:root{
  --bg:#FFFBF8; --ink:#2B1B12; --muted:#7A6A5F;
  --amber:#B8530E; --amber2:#C96921; --wave:#E18F4E; --peach:#F4BB8B;
  --line:#EFE2D9;
  --cookie:linear-gradient(135deg,#F4BB8B,#E18F4E 40%,#C96921 70%,#A54F0F);
  /* Výška hlavičky. JEDINÝ zdroj pravdy — hlavička ji má jako height, aretace jako
     scroll-padding-top. Dokud jsou obě z téhle proměnné, film dosedne přesně pod
     hlavičku. Dřív byla hlavička vysoká podle obsahu (62,4 px na desktopu, 58,4 na
     mobilu), ale scroll-padding-top měl natvrdo 56 px → 6,4 px filmu se schovávalo
     pod poloprůhlednou hlavičku a prosvítalo (nahlášeno 2026-08-07 ze Safari). */
  --hd-h:64px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* mandatory: aretace DRŽÍ na sekci (běžící video) — dál se jede jen razantnějším scrollem */
html{scroll-behavior:smooth;scroll-padding-top:var(--hd-h);scroll-snap-type:y mandatory}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
main{position:relative;z-index:1}
a{color:inherit}

/* ── Zlatá nit: vysílací signál pulzující celou stránkou ─────────── */
.signal-field{position:fixed;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:hidden}
.sf-ring{position:absolute;width:42vmax;height:42vmax;border-radius:50%;border:1.5px solid var(--wave);opacity:0;animation:sfripple 7.5s ease-out infinite}
.sf-ring:nth-child(2){animation-delay:2.5s}
.sf-ring:nth-child(3){animation-delay:5s}
@keyframes sfripple{0%{transform:scale(.2);opacity:.14}80%{opacity:.04}100%{transform:scale(1.35);opacity:0}}

/* ── Hlavička ────────────────────────────────────────────────────── */
/* Výška je PEVNÁ (--hd-h), ne podle obsahu — jinak se rozejde s aretací, viz :root. */
.hd{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:var(--hd-h);padding:0 24px;transition:background .3s,backdrop-filter .3s,box-shadow .3s}
.hd.scrolled{background:rgba(255,251,248,.82);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(0,0,0,.05)}
.hd-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:600;font-size:18px}
.hd-logo{width:30px;height:30px;border-radius:8px}
.hd-nav{display:flex;gap:24px}
.hd-nav a{color:var(--muted);text-decoration:none;font-size:15px;transition:color .2s}
.hd-nav a:hover{color:var(--amber)}
.hd-cta{background:var(--amber);color:#fff;text-decoration:none;font-size:14px;padding:8px 16px;border-radius:10px;
  transition:transform .15s,filter .2s}
.hd-cta:hover{filter:brightness(1.06);transform:translateY(-1px)}

/* ── Jazykový přepínač ───────────────────────────────────────────── */
#lang-picker{
  appearance:none;-webkit-appearance:none;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237A6A5F'/%3E%3C/svg%3E") no-repeat right 8px center;
  border:1px solid var(--line);border-radius:8px;
  padding:5px 26px 5px 10px;font-size:13px;color:var(--ink);cursor:pointer;max-width:140px;
}
#lang-picker:hover{border-color:var(--amber2)}
@media(max-width:720px){#lang-picker{max-width:100px;font-size:12px;padding:4px 22px 4px 8px}}

/* ── Hero ────────────────────────────────────────────────────────── */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:96px 24px 64px;position:relative;scroll-snap-align:start}
.emitter{position:relative;width:150px;height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:48px}
/* ── Logo v hlavičce: stejná animace jako start aplikace ──────────
   Předloha je SplashScreen.kt: zelený oblouk se kreslí po své dráze od levé nohy
   (700 ms), žlutý se přidá s prodlevou 240 ms (650 ms), po dokreslení OBOU popne
   modrá koule (300 ms, s mírným přestřelem) a hotový symbol nakonec DOSEDNE na
   plochu (420 ms) — zdvih a zvětšení jdou na nulu a měkký stín se usadí.
   Časy i křivky odpovídají appce; FastOutSlowIn ≈ cubic-bezier(.4,0,.2,1),
   EaseOutBack ≈ cubic-bezier(.34,1.56,.64,1). */
/* Bílá podložka se NEanimuje — je od začátku do konce stejná, symbol do ní dosedá.
   POZOR: podložka MUSÍ zůstat na běžném boxu (.em-plate), ne na samotném <svg>.
   Když pozadí + border-radius + box-shadow visely přímo na <svg>, Safari 26.6 na
   macOS kreslilo stín pravoúhle a ostré rohy čtverce vykukovaly zpod zaoblených
   rohů podložky (nahlášeno 2026-08-07). WebKit na Windows to nereprodukuje —
   ověřovat je proto potřeba na skutečném Macu. */
.em-plate{display:block;width:98px;height:98px;border-radius:24px;background:#fff;
  position:relative;z-index:2;box-shadow:0 14px 44px rgba(184,83,14,.30)}
.em-logo{display:block;width:98px;height:98px}
/* Animuje se jen symbol: vznáší se nad podložkou a vrhá na ni měkký stín,
   při dosednutí jde zdvih i zvětšení na nulu a stín odezní úplně. */
.em-symbol{transform-box:fill-box;transform-origin:center;
  animation:emDosednuti .42s cubic-bezier(.4,0,.2,1) 1.19s backwards}
.em-arc{fill:none;stroke-width:36.9;stroke-linecap:round}
.em-green{stroke:#4CC47B;stroke-dasharray:622;animation:emKresli .7s cubic-bezier(.4,0,.2,1) backwards}
.em-yellow{stroke:#FFD24A;stroke-dasharray:431;animation:emKresliY .65s cubic-bezier(.4,0,.2,1) .24s backwards}
.em-dot{fill:#2E6FE6;transform-box:fill-box;transform-origin:center;
  animation:emKoule .3s cubic-bezier(.34,1.56,.64,1) .89s backwards}
@keyframes emKresli{from{stroke-dashoffset:622}to{stroke-dashoffset:0}}
@keyframes emKresliY{from{stroke-dashoffset:431}to{stroke-dashoffset:0}}
@keyframes emKoule{from{transform:scale(0);opacity:0}60%{opacity:1}to{transform:scale(1);opacity:1}}
/* Vznášení → dosednutí. Délky jsou v jednotkách viewBoxu (432 na 98 px zobrazení),
   přepočtené ze splashe appky: zdvih 7/58 poloměru, stín 12 dp rozostření a 8 dp
   posunu při plném vznášení. Po dosednutí stín mizí úplně — symbol je plochý. */
@keyframes emDosednuti{
  from{transform:translateY(-16.5px) scale(1.05);
       filter:drop-shadow(0 18.9px 28.4px rgba(43,27,18,.34))}
  to{transform:none;filter:drop-shadow(0 0 0 rgba(43,27,18,0))}
}
/* Vypnuté animace → rovnou hotový symbol, dosedlý a bez kreslení (jako v appce). */
@media(prefers-reduced-motion:reduce){
  .em-symbol,.em-arc,.em-dot{animation:none}
  .em-arc{stroke-dashoffset:0}
}
.em-ring{position:absolute;top:50%;left:50%;width:98px;height:98px;margin:-49px 0 0 -49px;border-radius:28px;
  border:2px solid var(--wave);opacity:0;animation:emripple 3.4s ease-out infinite}
.em-ring:nth-child(2){animation-delay:1.13s}
.em-ring:nth-child(3){animation-delay:2.26s}
@keyframes emripple{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.7);opacity:0;border-radius:50%}}
.hero h1{font-weight:600;line-height:1.08;letter-spacing:-.02em;margin-bottom:22px}
/* Hádanka → odpověď (řídí script.js): otázka menší, odpověď „Timity — tady a teď!" VÝRAZNĚJŠÍ
   (větší, tučnější, brand amber). Obě se objevují/mizí nezávisle přes class .vis. */
.riddle-q{
  display:block;font-size:clamp(19px,2.9vw,32px);font-weight:500;line-height:1.35;
  letter-spacing:-.01em;color:var(--ink);max-width:24em;margin:0 auto;min-height:2.7em;
  opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;
}
.riddle-a{
  display:block;font-size:clamp(31px,5.4vw,56px);font-weight:700;line-height:1.08;
  letter-spacing:-.02em;color:var(--amber);margin-top:18px;
  opacity:0;transform:translateY(16px) scale(.96);transition:opacity .55s ease,transform .55s ease;
}
#hero-motto .vis{opacity:1;transform:none}
.scroll-cue{position:absolute;bottom:26px;left:50%;width:20px;height:20px;margin-left:-10px;
  border-right:2px solid var(--amber2);border-bottom:2px solid var(--amber2);transform:rotate(45deg);
  opacity:.55;animation:bounce 1.9s infinite}
@keyframes bounce{0%,100%{transform:rotate(45deg) translateY(0)}50%{transform:rotate(45deg) translateY(8px)}}

/* ── Store badge ─────────────────────────────────────────────────── */
.badges{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
/* V hero sekci tlačítka odsazená od výrazné odpovědi hádanky (jinde beze změny). */
.hero .badges{margin-top:38px}
.badge{display:inline-flex;align-items:center;gap:10px;background:#1A140F;color:#fff;text-decoration:none;
  border-radius:12px;padding:9px 16px;transition:transform .15s,filter .2s}
.badge[href]:hover{transform:translateY(-2px);filter:brightness(1.15)}
/* Bez href = zatím nikam nevede (appka ještě není v obchodech, kontakt nemá adresu).
   Nesmí se tvářit klikatelně, ale jinak vypadá stejně. */
.badge:not([href]),.ft-col a:not([href]){cursor:default}
.badge-ic{width:24px;height:24px;fill:#fff;flex:none}
.badge span{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.badge small{font-size:10px;opacity:.85}
.badge b{font-size:15px;font-weight:500}

/* ── Příběhy — celoplošné pruhy (full-bleed bandy, žádná „okna") ──── */
/* Film sedí ÚPLNĚ nahoře sekce (aretace chytí přesně na něm, žádný barevný okraj nad ním);
   text se centruje ve zbývajícím prostoru pruhu (margin:auto). */
/* POZOR na kotvení: sekce je vysoká ~100vh, ale snapport je o 56px menší (scroll-padding-top
   hlavičky) → sekce se snap-align by měla DVA aretační body (horní/dolní hranu) a při scrollu
   NAHORU by chytal ten dolní (uříznutý film). Kotva je proto na .story-scene (horní hrana filmu)
   = jediný aretační bod → oba směry scrollu kotví shodně: film nahoře, slogan pod ním. */
.story{min-height:100vh;display:flex;align-items:center;justify-content:flex-start;text-align:center;
  flex-direction:column;padding:0 0 48px;position:relative}
.story-in{max-width:760px;padding:0 24px;margin-top:auto;margin-bottom:auto}
/* Střídavé podbarvení pruhů přes celou šířku stránky.
   POZOR: čísla tříd jsou stabilní ID (kvůli klíčům v translations.js), NE pořadí.
   Pořadí příběhů v DOM je s1 → s5 → s2 → s4 → s6, proto střídání vypadá takto. */
.s1,.s2,.s6{background:#FFF1E6}   /* 1., 3., 5. v pořadí */
.s4,.s5{background:var(--bg)}     /* 2., 4. v pořadí */
.kicker{text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--amber);font-weight:600;margin-bottom:18px}
.story h2{font-size:clamp(26px,4.6vw,48px);font-weight:600;line-height:1.12;letter-spacing:-.02em;margin-bottom:18px}
.slogan{font-size:clamp(20px,3.4vw,34px);font-weight:500;color:var(--amber);line-height:1.25}

/* ── Jak to funguje / Soukromí — celoplošné pruhy ────────────────── */
.how,.privacy{padding:96px 24px;scroll-snap-align:start}
/* relative + overflow: pole stickers je absolutní vůči sekci a nesmí přetéct ven */
.how{background:#FFFFFF;position:relative;overflow:hidden}
.privacy{background:#241712;color:#F2E3D8}
.privacy .kicker{color:var(--wave)}
.privacy .step{background:rgba(255,255,255,.07);box-shadow:none}
.privacy .step b{color:#F6E8DC}
.privacy .step p{color:#C9B6A8}
.how-in{max-width:920px;margin:0 auto;text-align:center}
.how h2,.privacy h2{font-size:clamp(26px,4vw,42px);font-weight:600;margin-bottom:40px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left}
.step{background:#FFF6EE;border:none;border-radius:18px;padding:24px;box-shadow:0 8px 28px rgba(43,27,18,.07)}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  background:var(--peach);color:#7A3C09;font-weight:600;margin-bottom:14px}
.step b{display:block;font-size:18px;margin-bottom:6px}
.step p{color:var(--muted);font-size:15px}

/* ── Stickers — pop-up bubliny v sekci „Jak to funguje" ──────────
   VARIANTA B (7. 8. 2026), FINÁLNĚ VYBRANÁ 8. 8. 2026. Bublina se nafoukne
   s lehkým přestřelem, dosedne do čitelné velikosti, chvíli SEDÍ a pak
   praskne — krátké nafouknutí a je pryč. Žádný let z dálky, žádné
   rozostření a hlavně ŽÁDNÝ NÁKLON: všechny stickers stojí vodorovně
   (naklánění na strany působilo rušivě).
   Vrstva je POD obsahem (z-index 1 vs. .how-in 3), takže karty kroků je
   zakrývají a text sekce zůstává vždy čitelný.

   POUZE NA DOST ŠIROKÉM VIEWPORTU (přání vlastníka 8. 8.) — viz
   .stk-field display:none/@media(min-width:1024px) níž. Na mobilu (na
   výšku i většina na šířku) je sekce úplně bez stickers, přesně jako
   předtím, než vznikly — žádné odsazení navíc, jen `.how-in` zůstává nad
   (prázdným) `.stk-field` z-indexem 3.

   VARIANTA A (plovoucí, z 6. 8.) je uložená v
   OneDrive\Plocha\Test\zaloha-stickers-plovouci\ pro případ návratu.      */
.stk-field{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;display:none}
/* ── Práh „dost široký viewport" ─────────────────────────────────────
   1024 CSS px (LOGICKÝ viewport, ne fyzické pixely displeje — to je totéž
   měřítko, kterým se řídí celá tahle stránka, ne "rozlišení" v marketingovém
   smyslu). Zvoleno tak, aby:
     - spolehlivě vyloučilo telefony i na šířku — největší běžné telefony
       (iPhone Pro Max, Galaxy S Ultra) mají na šířku ~915–932 CSS px, tedy
       pod prahem s ~90px rezervou
     - zahrnulo notebooky a počítače (typicky 1280/1366/1440 px a výš)
   Vedlejší efekt: tablet na šířku (iPad 1024+) stickers uvidí, na výšku ne
   — to je v pořádku, rozhoduje šířka, ne typ zařízení (přesně zadání). */
@media(min-width:1024px){
  .stk-field{display:block}
}
.how-in{position:relative;z-index:3}

.stk{
  position:absolute;
  width:max-content;max-width:min(340px,64vw);
  opacity:0;
  /* Dvě animace naráz: bublina (20 s) a SKOK POZICE (40 s, step-end).
     Křivky pro nafouknutí i prasknutí jsou uvnitř @keyframes u jednotlivých
     klíčových snímků — jedna společná křivka by se použila mezi KAŽDOU dvojicí
     a rozhodila by jak přestřel, tak dosednutí. */
  animation-name:stkPop,stkPosA1;      /* druhá se přepisuje u každé stickeru */
  animation-duration:20s,60s;          /* 60 s = tři polohy po 20 s */
  animation-timing-function:linear,step-end;
  animation-iteration-count:infinite,infinite;
  animation-delay:var(--delay),var(--delay);
}
/* POZOR — pozice MUSÍ být tady, ne v atributu style v HTML.
   `_headers` má `style-src 'self'` bez `'unsafe-inline'`, takže CSP inline atributy
   style zahodí; --x/--y by se nepropsaly, left:var(--x) by bylo neplatné → left:auto
   a všechny stickers by se složily do levého horního rohu sekce.
   Vývojový server CSP neposílá, takže se to lokálně neprojeví — testovat na produkci. */
/* ── Pozice: dvojice si je předávají ────────────────────────────────
   Každá sticker se střídá mezi DVĚMA místy (cyklus 40 s = 2 bubliny), takže na
   témže místě se postupně objeví dva různé texty. Sticker i a i+4 mají bublinu
   posunutou přesně o půl cyklu (10 s), takže NIKDY nejsou vidět zároveň — mohou
   si proto bezpečně sdílet tatáž dvě místa v opačném pořadí (A1 × A2).
   Skok pozice je step-end a padne na začátek cyklu, kdy je krytí 0 → není vidět.

   Svislé meze: v čitelné fázi nesmí sticker kolidovat s nadpisem. Nadpis
   začíná 124 px pod horním okrajem sekce (dané odsazením, na desktopu i mobilu
   stejně), takže HORNÍ místa jsou kotvená v PIXELECH, ne v procentech —
   procenta se s výškou sekce mezi zařízeními rozjíždějí. Nahoře uprostřed
   (x 40–60 %) záměrně nic není. Dlouhá šestka (3 řádky) má obě místa dole. */
.stk:nth-child(1){--delay:0s;      animation-name:stkPop,stkPosA1}
.stk:nth-child(2){--delay:-2.5s;   animation-name:stkPop,stkPosB1}
.stk:nth-child(3){--delay:-5s;     animation-name:stkPop,stkPosC1}
.stk:nth-child(4){--delay:-7.5s;   animation-name:stkPop,stkPosD1}
.stk:nth-child(5){--delay:-10s;    animation-name:stkPop,stkPosA2}
.stk:nth-child(6){--delay:-12.5s;  animation-name:stkPop,stkPosB2}
.stk:nth-child(7){--delay:-15s;    animation-name:stkPop,stkPosC2}
.stk:nth-child(8){--delay:-17.5s;  animation-name:stkPop,stkPosD2}

/* ── Osm míst po celé sekci ───────────────────────────────────────────
   Bubliny se objevují i VEDLE nadpisu (vlevo/vpravo s odstupem), VEDLE karet
   s kroky, POD nimi a ZA nimi. Vlastník výslovně souhlasil, že na okraji můžou
   být oříznuté nebo na výšku neviditelné — každá bublina se v některé ze svých
   tří poloh stejně objeví tam, kde vidět je.

   Svisle: co má sedět vůči nadpisu, je v PIXELECH (nadpis leží na 148–230 px
   od horního okraje sekce a je to tak na desktopu i na mobilu); co se má
   vztahovat k výšce sekce, je v procentech.

   Vodorovně u nadpisu: text nadpisu je vycentrovaný a při šířce 820 px zabírá
   x 276–544, takže 8 % / 92 % nechává i v nejužším případě přes 100 px mezeru.
   Pod prahem 1024 px (viz výš) je celé pole stickers display:none, takže tyhle
   pozice se tam nikdy neuplatní — nemusí řešit mobilní rozvrh vůbec.

   TŘETÍ POLOHA JE ZÁMĚRNĚ ZA KARTAMI (7. 8., přání vlastníka). Bublina se tam
   celá nafoukne i praskne, ale karty ji překrývají — vidět je jen svislý proužek
   v 20px mezeře mezi rámečky a text je prakticky nečitelný. Je to schválně:
   když se všechny bubliny objevují jen tam, kde jsou pěkně čitelné, je na tom
   znát strojové rozmístění. Tohle vypadá, že se dějí samy od sebe.
   Proto má každá dvojice TŘI polohy, ne dvě — cyklus poloh je 60 s (3 × 20 s). */
/* Dvojice A (1 × 5): nahoře vlevo → vlevo od nadpisu → za kartami u mezery 1|2 */
@keyframes stkPosA1{0%{left:16%;top:48px}   33.333%{left:8%;top:165px}  66.667%{left:25%;top:91%}}
@keyframes stkPosA2{0%{left:8%;top:165px}   33.333%{left:25%;top:91%}   66.667%{left:16%;top:48px}}
/* Dvojice C (3 × 7): nahoře vpravo → vpravo od nadpisu → za kartami u mezery 2|3
   (střed horního pásu zůstává volný) */
@keyframes stkPosC1{0%{left:84%;top:48px}   33.333%{left:92%;top:165px} 66.667%{left:75%;top:91%}}
@keyframes stkPosC2{0%{left:92%;top:165px}  33.333%{left:75%;top:91%}   66.667%{left:84%;top:48px}}
/* Dvojice B (2 × 6): pod kartami vlevo → vedle karet vlevo → za PROSTŘEDNÍ kartou.
   45 % (ne 63 %): na 63 % ležela B i C na téže mezeře 2|3 a jejich proužky se
   v ní překrývaly (našla simulace). Takhle B prosvítá mezerou 1|2, C mezerou 2|3. */
@keyframes stkPosB1{0%{left:45%;top:62%}    33.333%{left:8%;top:64%}    66.667%{left:63%;top:59%}}
@keyframes stkPosB2{0%{left:8%;top:64%}     33.333%{left:63%;top:59%}   66.667%{left:45%;top:62%}}
/* Dvojice D (4 × 8): pod kartami vpravo → vedle karet vpravo → za kartou vlevo */
@keyframes stkPosD1{0%{left:50%;top:80%}    33.333%{left:92%;top:64%}   66.667%{left:37%;top:80%}}
@keyframes stkPosD2{0%{left:92%;top:64%}    33.333%{left:37%;top:80%}   66.667%{left:50%;top:80%}}
.stk-card{position:relative;padding:12px 20px;font-size:14px;line-height:1.44;text-align:left}
.stk-card i{font-style:normal;color:rgba(43,27,18,.60)}
/* Oranžová odpověď nabíhá AŽ POTOM, co bublina dosedne (6,5 %) — plně vidět je
   ve 12 %, tedy s velkou rezervou uvnitř fáze, kdy bublina jen sedí a je čitelná
   (6,5–40 %). Podmínka „v okamžiku nejlepší čitelnosti musí být všechny texty
   zobrazené" tím drží. Mizí spolu s prasknutím. */
.stk-card b{
  display:block;font-weight:500;color:rgba(184,83,14,.90);
  opacity:0;animation:stkAmber 20s linear infinite;animation-delay:var(--delay);
}
@keyframes stkAmber{
  0%,7%{opacity:0} 12%{opacity:1} 40%{opacity:1} 44%,100%{opacity:0}
}

/* Náznak rámu: jen levý horní a pravý dolní roh, bez výplně */
.stk-corner,.stk-echo{position:absolute;inset:0;pointer-events:none}
.stk-corner::before,.stk-corner::after,
.stk-echo::before,.stk-echo::after{
  content:'';position:absolute;width:34%;height:54%;border:1px solid var(--wave);
}
.stk-corner::before,.stk-echo::before{top:0;left:0;border-right:0;border-bottom:0;border-top-left-radius:15px}
.stk-corner::after,.stk-echo::after{bottom:0;right:0;border-left:0;border-top:0;border-bottom-right-radius:15px}
.stk-corner{opacity:.42}
/* Vlna = tytéž rohy, které se rozpínají ven a mizí — stejný jazyk jako .em-ring */
.stk-echo{animation:stkEcho 3.6s ease-out infinite}
@keyframes stkEcho{0%{transform:scale(1);opacity:.24}100%{transform:scale(1.2);opacity:0}}

/* Krytí je záměrně nízké — prvek má být tušený, ne čtený jako obsah sekce.
   Vrchol 0,58 (7. 8. zvýšeno z 0,40 na přání vlastníka), text je jen mírně zesvětlený.

   Průběh jedné bubliny (20 s = jeden cyklus):
     0 – 0,8 s   nafoukne se z 0,34 na 1,06 (přestřel, EaseOutBack)
     0,8 – 1,3 s dosedne na 1,00
     1,3 – 8,0 s SEDÍ a je čitelná — nejdelší fáze, kvůli ní to celé je
     8,0 – 8,4 s nádech na 1,07 (jako když se bublina napne)
     8,4 – 9,0 s praskne: 1,24 a krytí na nulu
     9,0 – 20 s  není vidět, čeká na další cyklus
   Zbylých 13 s je záměrných: 8 stickeru po 2,5 s od sebe → v jednu chvíli
   jsou vidět zhruba tři až čtyři, ne všechny naráz.

   Fáze sezení byla 7. 8. prodloužena ze 4,7 na 6,7 s. Důvod není estetický:
   při kratší nastávaly okamžiky, kdy všechny právě běžící bubliny shodou
   okolností seděly za kartami a v čitelné oblasti nebylo vidět NIC (až 16 s
   z 60). Delší okno = víc bublin naráz = díra se nemá kde vzít. */
@keyframes stkPop{
  0%    {opacity:0;   transform:translate(-50%,-50%) scale(.34);
         animation-timing-function:cubic-bezier(.34,1.56,.64,1)}   /* nafouknutí s přestřelem */
  4%    {opacity:.58; transform:translate(-50%,-50%) scale(1.06);
         animation-timing-function:cubic-bezier(.4,0,.2,1)}        /* dosednutí */
  6.5%  {opacity:.58; transform:translate(-50%,-50%) scale(1.00)}
  40%   {opacity:.58; transform:translate(-50%,-50%) scale(1.00);
         animation-timing-function:ease-in}                        /* nádech */
  42%   {opacity:.50; transform:translate(-50%,-50%) scale(1.07);
         animation-timing-function:ease-out}                       /* prasknutí */
  45%   {opacity:0;   transform:translate(-50%,-50%) scale(1.24)}
  100%  {opacity:0;   transform:translate(-50%,-50%) scale(1.24)}
}

/* ── Stáhnout (finální gradientní pruh) ──────────────────────────── */
.download{min-height:78vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:96px 24px;position:relative;overflow:hidden;background:linear-gradient(135deg,#E89A57,#B8530E);color:#fff;
  scroll-snap-align:start}
.download h2{font-size:clamp(28px,4.5vw,46px);font-weight:600;margin-bottom:10px}
.download p{font-size:18px;opacity:.93;margin-bottom:28px}
.dl-emitter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.dl-emitter .em-ring{border-color:rgba(255,255,255,.5);width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%}
.download .badges{position:relative;z-index:1}
.download .badge{background:rgba(0,0,0,.28)}

/* ── Patička ─────────────────────────────────────────────────────── */
.ft{background:#241712;color:#CDBBAE;padding:48px 24px;display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between;
  scroll-snap-align:end}  /* s mandatory snapem musí mít i konec stránky aretační bod */
.ft .hd-brand{color:#F0DFD6}
.ft-col{min-width:170px}
.ft-col>b{display:block;color:#F0DFD6;font-size:15px;margin-bottom:12px;font-weight:600}
.ft-col a:not(.hd-brand){display:block;color:#CDBBAE;text-decoration:none;font-size:14px;margin-bottom:8px;transition:color .2s}
.ft-col a[href]:hover{color:var(--wave)}
.ft-fine{font-size:13px;color:#9A8579;max-width:300px;margin-top:12px;line-height:1.6}

/* ── Rozetmívání / stmívání při scrollu ──────────────────────────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}
.story-in .reveal:nth-child(2),.hero .reveal:nth-child(2){transition-delay:.1s}
.story-in .reveal:nth-child(3),.hero .reveal:nth-child(3){transition-delay:.2s}
.story-in .reveal:nth-child(4),.hero .reveal:nth-child(4){transition-delay:.3s}
.hero .reveal:nth-child(5){transition-delay:.4s}
.steps .reveal:nth-child(2){transition-delay:.12s}
.steps .reveal:nth-child(3){transition-delay:.24s}

/* ── Responzivně ─────────────────────────────────────────────────── */
@media (max-width:720px){
  :root{--hd-h:58px}   /* mění i scroll-padding-top — hlavička a aretace jdou spolu */
  .hd-nav{display:none}
  .hd{padding:0 18px}
  .steps{grid-template-columns:1fr}
  .hero{padding:88px 20px 56px}
  .story{padding:0 0 40px}
  .story-in{padding:0 20px}
  .ft{gap:28px}
}

/* ── Méně pohybu ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-snap-type:none;scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .sf-ring,.em-ring,.scroll-cue{animation:none}
  .sf-ring{opacity:.05}
  .story-scene{opacity:1;transform:none}
  .sc-card:last-child{opacity:1;transform:none}
  .sc-bar{display:none}
  /* Prolnutí smyčky je pohyb navíc — při omezeném pohybu se nekoná.
     Pojistka v CSS; script.js třídu při reduced-motion vůbec nenasazuje. */
  .sc-video{transition:none}
  .sc-video.sc-loopfade{opacity:1}
  /* Stickers: žádné nafukování ani praskání, zůstanou jen dvě statické a jemné.
     POZOR 1: vypnutím animací zmizí i skok pozice, který left/top nastavuje —
     obě zbylé proto musí dostat polohu natvrdo, jinak by se složily do rohu.
     POZOR 2: .stk-card b má základ opacity:0 a vlastní animaci — bez explicitního
     opacity:1 by tu oranžová část zmizela úplně. */
  .stk{animation:none;opacity:.50;filter:none;transform:translate(-50%,-50%) scale(1)}
  .stk:nth-child(1){left:20%;top:48px}
  .stk:nth-child(2){left:76%;top:62%}
  .stk:nth-child(n+3){display:none}
  .stk-echo{animation:none;opacity:0}
  .stk-card b{animation:none;opacity:1}
}

/* ── Story scene — full-bleed filmový pás přes celou šířku ───────── */
/* Žádné „okno v okně": bez zaoblení, bez stínu, od kraje ke kraji (à la celoplošné sekce). */
.story-scene{
  scroll-snap-align:start;   /* jediná kotva story sekce — viz komentář u .story */
  width:100%;max-width:none;margin:0 auto 52px;
  border-radius:0;overflow:hidden;
  opacity:0;transform:translateY(14px);
  transition:opacity .9s ease,transform .9s ease;
}
.story-scene.sc-visible{opacity:1;transform:none}

.s1,.s2,.s4,.s5,.s6{flex-direction:column;padding-top:0;padding-bottom:48px}

/* Film frame */
.sc-film{
  position:relative;width:100%;aspect-ratio:760/266;max-height:62vh;
  background:#1C0F08;overflow:hidden;
}

/* Cinematic top/bottom vignette.
   Zeslabeno 2026-08-14 (žádost vlastníka): dřív 36 % výšky s plně krycím držením
   prvních 10 % — u 16:9 zdrojů ve filmovém rámu to zakrývalo hlavy u horní hrany
   záběru. Nově 26 % výšky, bez krycího držení, vrchol 78 % — efekt zůstává, ale
   pustí víc obrazu. */
.sc-film::before,.sc-film::after{
  content:'';position:absolute;left:0;right:0;height:26%;z-index:2;pointer-events:none;
}
.sc-film::before{top:0;background:linear-gradient(to bottom,rgba(28,15,8,.78),transparent)}
.sc-film::after {bottom:0;background:linear-gradient(to top,rgba(28,15,8,.78),transparent)}

/* Cards: all stacked, hidden */
.sc-card{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:28px 12%;text-align:center;
  opacity:0;transform:translateY(22px);
}
.sc-num{
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:#8B6244;font-family:inherit;
}
.sc-shot{
  font-size:clamp(12px,1.65vw,18px);color:#EDD8C4;line-height:1.6;
  max-width:640px;font-family:inherit;
}
.sc-line{
  font-size:clamp(15px,2.1vw,24px);font-weight:500;font-style:italic;
  color:#E18F4E;line-height:1.35;max-width:680px;font-family:inherit;
}
.sc-note{
  font-size:clamp(10px,1.2vw,13px);color:#7A5A3A;font-style:italic;font-family:inherit;
}

/* Reálná videosekvence ve filmovém rámu (nahrazuje textové karty dané sekce).
   Široký filmový rám z 16:9 zdroje hodně ořezává na výšku — object-position drží
   viditelné pásmo u HORNÍ části záběru (obličeje herců), ne geometrický střed. */
.sc-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 8%;z-index:1;
  /* Prolnutí na konci smyčky (třídu řídí script.js). Vyplácí se sem, ne do videa:
     u zapečeného prolnutí by se muselo překódovat všech pět souborů a ztratila by
     se možnost ho vypnout. Ztmavuje se do `.sc-film` (#1C0F08), což je tentýž
     filmový podklad, na kterém video leží — vypadá to jako zavření clony. */
  transition:opacity .55s linear;
}
/* PRVNÍ přehrání je ZÁMĚRNĚ bez náběhu: bez téhle třídy má video plné krytí. */
.sc-video.sc-loopfade{opacity:0}

/* Prohlížeč zablokoval autoplay (per-web pravidla) → jemná ▶ nápověda „klikni a hraju".
   Zmizí, jakmile se přehrávání rozjede (class odebírá script.js na event `playing`). */
.sc-film.sc-blocked::after{
  content:'▶';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:72px;height:72px;border-radius:24px;display:flex;align-items:center;justify-content:center;
  font-size:26px;color:#fff;padding-left:6px;box-sizing:border-box;
  background:rgba(28,15,8,.55);border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(4px);z-index:3;pointer-events:none;
}

/* Progress bar */
.sc-bar{
  position:absolute;bottom:0;left:0;height:2px;width:0;
  background:var(--amber);z-index:3;opacity:.65;
}

/* ── Card animations (.sc-play) ─────────────────────────────────── */
/* Interval 3s, duration 3.6s → 0.6s překryv = crossfade bez černých mezer */
.sc-play .sc-card:nth-child(1){animation:cardFlow 3.6s linear  0.3s both}
.sc-play .sc-card:nth-child(2){animation:cardFlow 3.6s linear  3.3s both}
.sc-play .sc-card:nth-child(3){animation:cardFlow 3.6s linear  6.3s both}
.sc-play .sc-card:nth-child(4){animation:cardFlow 3.6s linear  9.3s both}
.sc-play .sc-card:nth-child(5){animation:cardFlow 3.6s linear 12.3s both}
.sc-play .sc-card:nth-child(6){animation:cardFlow 3.6s linear 15.3s both}
.sc-play .sc-card:nth-child(7){animation:cardFlow 3.6s linear 18.3s both}
.sc-play .sc-card:nth-child(8){animation:cardFlow 3.6s linear 21.3s both}
.sc-play .sc-card:nth-child(9){animation:cardLast 3.6s linear 24.3s both}
.sc-play .sc-bar              {animation:barFill    28s linear  0.3s both}

/* Bez plateau: karta vystoupá nahoru, v půlce je plně viditelná, plynule odejde */
@keyframes cardFlow{
  0%  {opacity:0;transform:translateY(24px);animation-timing-function:cubic-bezier(0,.2,.3,1)}
  50% {opacity:1;transform:translateY(0);  animation-timing-function:cubic-bezier(.6,0,1,.8)}
  100%{opacity:0;transform:translateY(-18px)}
}
/* Poslední karta zůstane */
@keyframes cardLast{
  0%  {opacity:0;transform:translateY(24px);animation-timing-function:cubic-bezier(0,.2,.3,1)}
  50% {opacity:1;transform:translateY(0)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes barFill{
  from{width:0}to{width:100%}
}

@media(max-width:720px){
  /* MOBIL NA VÝŠKU: po zakotvení musí být na JEDNÉ obrazovce vidět video i nadpis
     s pointou pod ním. Sekce je proto flex sloupec: text má pevnou výšku (nesmršťuje se),
     film dostane zbytek — díky `flex:1 1 auto` se sám zmenší, když je text delší
     (nejdelší jazyky zabírají ~250 px), a nikdy nepřeteče přes fold.
     `svh` (small viewport height) je klíčové: `vh` na mobilu počítá se SCHOVANOU adresní
     lištou, takže s viditelnou lištou by obsah přetekl. Fallback pro starší prohlížeče
     (bez svh) je řádek s `vh` nad tím. */
  .story{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding:0 0 24px}
  .story-scene{
    border-radius:0;margin-bottom:18px;flex:1 1 auto;min-height:150px;
    /* Scéna je sama flex sloupec — jinak by `height:100%` filmu nemělo se čím poměřit
       (rodič má jen flex-basis, ne pevnou výšku) a video by se zhroutilo na nulu. */
    display:flex;flex-direction:column;
    max-height:min(50vh, calc(100vh - 386px));
    max-height:min(50svh, calc(100svh - 386px));   /* 386 px = nejdelší text + mezery + hlavička */
  }
  .s1{padding-top:0;padding-bottom:24px}
  .sc-card{gap:12px;padding:24px 8%}
  /* Film vyplní přidělenou výšku scény (řídí ji flex výše); min-height:0 dovolí zmenšení. */
  .sc-film{aspect-ratio:auto;height:auto;flex:1 1 auto;min-height:0;max-height:none}
  .sc-shot{font-size:15px;max-width:88%}
  .sc-line{font-size:19px;max-width:92%}
}

/* ── Širší sloupec na velkých displejích ─────────────────────────────
   Dlouhé nadpisy se v úzkém sloupci lámaly až na čtyři řádky. */
@media(min-width:721px){
  .story-in{max-width:1040px;margin-top:0}
  /* Text patří k videu → pevná mezera ~44 px místo dřívějších ~90 px (52 px odsazení
     + automatické centrování, které text nechávalo „plavat" uprostřed zbylé plochy). */
  .story-scene{margin-bottom:30px}
}

/* ── Titul a pointa se STŘÍDAJÍ — jen když se pod sebe NEVEJDOU ──────
   VÝCHOZÍ stav je normální tok: kicker, nadpis a pointa pod sebou. Třídu .txt-swap
   přidává script.js (rozvrhTextu) tomu příběhu, kde by se oba texty pod video na
   jednu obrazovku nevešly — pak sdílejí JEDNU plochu (grid buňka 1/1) a plynule se
   prostřídají: nejdřív titul, chvíli drží, prolne se do pointy a zase zpět.

   Rozhoduje se MĚŘENÍM skutečné výšky, ne šířkou okna. Dřív to řídil zlom 721 px,
   jenže o tom, jestli se text vejde, nerozhoduje šířka, ale zbylá výška pod filmem —
   a ta závisí i na délce textu (jazyk!), poměru stran okna a výšce hlavičky.
   Proto se stejné okno může chovat různě v různých jazycích, a to je správně. */
.story.txt-swap .story-in{display:grid;justify-items:center;align-items:start}
.story.txt-swap .kicker{grid-column:1;grid-row:1}
.story.txt-swap h2,.story.txt-swap .slogan{grid-column:1;grid-row:2;margin-bottom:0}
/* Mimo záběr: výchozí stav = titul (pointa skrytá), ať se při návratu začíná od začátku. */
.story.txt-swap .slogan{opacity:0}
/* Animace běží jen u scény, kterou divák právě vidí (class dává IntersectionObserver). */
.story.txt-swap .story-scene.sc-visible ~ .story-in h2{animation:swapTitle 9.2s ease-in-out infinite}
.story.txt-swap .story-scene.sc-visible ~ .story-in .slogan{opacity:1;animation:swapSlogan 9.2s ease-in-out infinite}
@keyframes swapTitle{
  0%,40%   {opacity:1;transform:translateY(0)}
  47%,93%  {opacity:0;transform:translateY(-10px)}
  100%     {opacity:1;transform:translateY(0)}
}
@keyframes swapSlogan{
  0%,40%   {opacity:0;transform:translateY(10px)}
  47%,93%  {opacity:1;transform:translateY(0)}
  100%     {opacity:0;transform:translateY(10px)}
}
/* Bez animací: oba texty staticky pod sebou (v toku), ať o nic nepřijde.
   Pojistka v CSS — script.js při omezeném pohybu .txt-swap vůbec nenasazuje,
   ale kdyby třída zůstala viset z dřívějška, tohle ji přebije. */
@media(prefers-reduced-motion:reduce){
  .story.txt-swap .story-in{display:block}
  .story.txt-swap h2{margin-bottom:18px}
  .story.txt-swap .slogan,
  .story.txt-swap .story-scene.sc-visible ~ .story-in .slogan{opacity:1;animation:none}
  .story.txt-swap .story-scene.sc-visible ~ .story-in h2{animation:none}
}

/* ── Plovoucí panel: Podmínky použití a cookies ──────────────────────
   Nativní <dialog> v top layeru (nekoliduje se scroll-snapem; Esc, fokus i zamezení
   scrollu pozadí řeší prohlížeč). Panel VYJÍŽDÍ ZDOLA do středu obrazovky.
   Tvar se řídí orientací: na výšku užší a vyšší, na šířku širší a nižší. */
#legal-dialog{
  border:none;padding:0;background:var(--bg);color:var(--ink);
  border-radius:22px;box-shadow:0 30px 90px rgba(43,27,18,.30);
  overflow:hidden;margin:auto;   /* margin:auto = vycentrování modálu v top layeru */
}
/* KRITICKÉ: rozložení nastavuj JEN otevřenému panelu. Bezpodmínečné `display:flex` by
   přebilo výchozí `display:none` zavřeného <dialog> a panel by zůstal v toku stránky —
   projevilo se to tak, že „visel" nad patičkou a odkrýval se scrollováním. */
#legal-dialog:not([open]){display:none}
#legal-dialog[open]{display:flex;flex-direction:column}
#legal-dialog::backdrop{background:rgba(43,27,18,.55);backdrop-filter:blur(3px)}

/* NA VÝŠKU (mobil): užší a delší */
@media (orientation:portrait){
  #legal-dialog{width:min(94vw,540px);max-height:min(90svh,92vh)}
}
/* NA ŠÍŘKU (počítač, tablet): širší a nižší */
@media (orientation:landscape){
  #legal-dialog{width:min(92vw,880px);max-height:min(78svh,80vh)}
}

.legal-body{padding:38px 40px 40px;overflow-y:auto;text-align:left;-webkit-overflow-scrolling:touch;flex:1 1 auto;min-height:0}
.legal-body h2{font-size:clamp(21px,2.6vw,28px);font-weight:600;letter-spacing:-.02em;margin-bottom:4px;color:var(--amber)}
.legal-body h3{font-size:16.5px;font-weight:600;margin:24px 0 8px}
.legal-body p{font-size:15px;line-height:1.65;color:#4A382D;margin-bottom:12px}
.legal-body a{color:var(--amber);text-underline-offset:3px}
.legal-close{
  position:absolute;top:14px;right:16px;width:38px;height:38px;border:none;border-radius:12px;
  background:rgba(43,27,18,.06);color:var(--ink);font-size:26px;line-height:1;cursor:pointer;z-index:2;
  transition:background .2s,transform .15s;
}
.legal-close:hover{background:rgba(43,27,18,.12);transform:scale(1.05)}
.legal-close:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media (orientation:portrait) and (max-width:720px){
  #legal-dialog{border-radius:18px}
  .legal-body{padding:32px 22px 30px}
}

/* Vyjetí zdola do středu / zajetí zpět dolů (třídu .closing dává script.js). */
@media (prefers-reduced-motion:no-preference){
  #legal-dialog[open]{animation:legalUp .38s cubic-bezier(.16,.84,.28,1)}
  #legal-dialog[open]::backdrop{animation:legalFade .38s ease-out}
  #legal-dialog.closing{animation:legalDown .26s ease-in forwards}
  #legal-dialog.closing::backdrop{animation:legalFade .26s ease-in reverse forwards}
}
@keyframes legalUp{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
@keyframes legalDown{from{opacity:1;transform:none}to{opacity:0;transform:translateY(100%)}}
@keyframes legalFade{from{opacity:0}to{opacity:1}}