/* ═══════════════════════════════════════════════════════════════
   FILM — scrollem řízený příběh Diochi.
   Engine podle skillu film-scroll, ale SVĚTLÝ: Dad 15. 9. 2026
   „a nedělej to černý!!!" · „veselé hravé božské jemné".

   Paleta je renesanční, ne neonová: pergamen, sláma, šalvěj,
   zlato, terakota, nebe. Titulky jsou v tmavém inkoustu na světle.
   Prefix  f-  (film), ať se to nepere se zbytkem webu.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --f-pergamen: #fdfaf4;
  --f-krem:     #f7efe1;
  --f-slama:    #efe0c4;
  --f-salvej:   #b3c7ac;
  --f-list:     #5c8f63;
  --f-les:      #2f5742;
  --f-zlata:    #d9a441;
  --f-med:      #e8b964;
  --f-terakota: #cf8462;
  --f-nebe:     #9ecfdd;
  --f-levandule:#b9a7cf;
  --f-inkoust:  #2b3028;
  --f-tichy:    #5e6b5c;
  --f-max:      min(92vw, 60rem);
  --f-pismo:    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* ⚠️ clip, ne hidden — hidden zabíjí sticky (viz poučení z DioPra) */
html.f-film, html.f-film body { overflow-x: clip; }

.f-scena { position: relative; height: 820vh; }
@media (max-width: 48rem) { .f-scena { height: 720vh; } }

.f-platno {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; background: var(--f-pergamen);
}

/* ---------- titulky: nescrollují, jen se rozsvěcují ---------- */
.f-ram {
  position: fixed; inset: 0; z-index: 2;
  display: grid; place-items: center; padding: 2rem 1.2rem;
  pointer-events: none;
}
.f-dej {
  position: absolute; inset: 0;
  display: grid; place-items: center; padding: 2rem 1.2rem;
  opacity: 0; will-change: opacity, transform;
}
.f-text { max-width: var(--f-max); text-align: center; }

.f-ocko {
  display: inline-block; margin: 0 0 1.1rem;
  font: 600 .78rem/1 var(--f-pismo); letter-spacing: .22em; text-transform: uppercase;
  color: var(--f-les); background: rgba(253,250,244,.72);
  padding: .5rem .9rem; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.f-titulek {
  margin: 0 0 1rem;
  font: 800 clamp(2rem, 6.4vw, 4.6rem)/1.05 var(--f-pismo);
  letter-spacing: -.025em; color: var(--f-inkoust);
  text-shadow: 0 2px 26px rgba(253,250,244,.9), 0 1px 3px rgba(253,250,244,.9);
}
.f-titulek em { font-style: normal; color: var(--f-list); }
.f-titulek em.f-zlato { color: #b8860b; }
.f-titulek em.f-hlina { color: #b2643f; }
.f-rec {
  margin: 0 auto; max-width: 34rem;
  font: 400 clamp(1rem, 2.1vw, 1.2rem)/1.65 var(--f-pismo);
  color: var(--f-tichy);
  text-shadow: 0 1px 18px rgba(253,250,244,.95);
}

/* ---------- pobídka dolů ---------- */
.f-pobidka {
  position: fixed; left: 50%; bottom: 1.8rem; transform: translateX(-50%);
  z-index: 3; display: grid; gap: .45rem; justify-items: center;
  font: 600 .74rem/1 var(--f-pismo); letter-spacing: .18em; text-transform: uppercase;
  color: var(--f-les); transition: opacity .4s; pointer-events: none;
}
.f-pobidka span { display: block; width: 1px; height: 2rem;
  background: linear-gradient(var(--f-list), transparent); animation: f-tah 1.8s ease-in-out infinite; }
@keyframes f-tah { 0%,100% { transform: scaleY(.4); opacity: .4 } 50% { transform: scaleY(1); opacity: 1 } }

/* ---------- vypínač filmu ---------- */
.f-vypinac {
  position: fixed; right: 1rem; top: 1rem; z-index: 6;
  font: 600 .72rem/1 var(--f-pismo); letter-spacing: .1em; text-transform: uppercase;
  color: var(--f-les); background: rgba(253,250,244,.86); border: 1px solid var(--f-salvej);
  border-radius: 999px; padding: .5rem .85rem; cursor: pointer;
}
.f-vypinac:hover { background: #fff; }

/* ---------- závěr: film dojede, obsah naváže ---------- */
.f-zaver { position: relative; z-index: 4; background: var(--f-pergamen); }

/* ---------- bez JS musí být text vidět ---------- */
html.f-bezjs .f-scena { height: auto; }
html.f-bezjs .f-platno,
html.f-bezjs .f-pobidka,
html.f-bezjs .f-vypinac { display: none; }
html.f-bezjs .f-ram { position: static; display: block; padding: 0; }
html.f-bezjs .f-dej { position: static; opacity: 1; padding: 3rem 1.2rem; border-bottom: 1px solid var(--f-slama); }

/* ---------- kdo nechce pohyb ---------- */
@media (prefers-reduced-motion: reduce) { .f-pobidka span { animation: none; } }

/* Film jede přes celou šířku — obal si otevře až závěr.
   Platí jen když běží JS; bez něj zůstane obyčejná stránka v obalu. */
html.f-film main#obsah { max-width: none; padding: 0; }
html.f-film .f-zaver { padding-top: 2.5rem; }
html.f-film .f-zaver .w-obal { padding-left: 1rem; padding-right: 1rem; }

/* Delší odstavec v závěrečném dějství — menší a užší, aby titulek
   zůstal úderný a text se vešel i na nižší displej. */
.f-rec-dlouha {
  margin-top: 1rem; max-width: 42rem;
  font-size: clamp(.92rem, 1.7vw, 1.04rem); line-height: 1.7;
}
@media (max-height: 44rem) { .f-rec-dlouha { font-size: .88rem; line-height: 1.6; } }