/* ==========================================================================
   PRACOVNÍ KONCEPT — akvarelový hero

   Doplňuje styles.css (barvy, typografii, .container, .btn, .hero__secondary,
   .eyebrow, .lead, .site-header a navazující sekce) — načítá se AŽ ZA ním
   jako přesně ohraničená vrstva úprav pro tuto konceptovou stránku. Nic
   v tomto souboru neovlivňuje site/index.html ani site/styles.css: nové
   třídy mají vlastní prefix `wc-`; kde cíleně přepisují sdílenou třídu
   (`.site-header`, `.hero__secondary`…), je to vždy jen v rámci této
   stránky — soubor samotný se z index.html nikdy nenačítá.

   Hlavička i hero text sdílí JEDNU souvislou ilustraci na pozadí
   (.wc-hero-wrap__bg-image) — žádná oddělená světlá plocha pro text
   a pod ní samostatný obrázkový pruh. Čitelnost hlavičky a textu nese
   prázdná horní část ilustrace samotné, ne maska/gradient/průhlednost.
   Postavy jsou v jediném společném obalu (.wc-stage) jako pět statických
   výjevů z kanonické složky watercolor-characters-final. Každý má vlastní
   PEVNÉ místo; animuje se výhradně opacity, takže se po promenádě nikdy
   nic neposouvá. Pozadí je od prvního vykreslení statické (žádné
   přibližování/usazování kamery) — jediný pohyb v celém hero je crossfade
   tří scén postav.

   Vrstvení: V11 pozadí → character stage → navigace, text a CTA.

   Bez knihoven a bez externích zdrojů. Jediný JS je krátký inline skript
   v HTML, který řídí start a stavy sekvence; časování samo je tady v CSS.
   ========================================================================== */

/* Bezpečná zóna nahoře (notch/dynamic island) — čte JS při výpočtu cílové
   pozice scrollu pro položky mobilního menu (viz <script>), aby štítek
   a nadpis cílové sekce nezůstaly schované pod výřezem displeje. */
:root {
  --wc-safe-top: env(safe-area-inset-top, 0px);

  /* Skutečná výška hlavičky. Hodnota tady je přesný CSS ekvivalent toho,
     co vychází z .site-header__inner {min-height: 4.2rem} — platí ještě
     před během JS, takže při načtení nikde nechybí ani nepřebývá pixel.
     Po načtení ji JS (viz <script> v index.html) přeměří na skutečně
     vykreslené hlavičce a přepíše, aby seděla i po zoomu nebo změně
     velikosti písma. Používá ji odsazení .wc-hero-wrap níž — hlavička je
     position:fixed, takže v toku nezabírá místo a musí ho dostat od obalu. */
  --wc-header-h: 4.2rem;
}

/* --- kompaktní mobilní hlavička ------------------------------------------
   Textový odkaz na Kontakt se ukazuje tam, kde .nav (sdílené pravidlo ze
   styles.css) mizí — na zlomu 900px (tablet). Na užším zlomu 560px (telefon)
   ho níž nahrazuje hamburger + rozbalovací menu s existujícími odkazy
   sekcí — na tabletové šířce (561–900px) zůstává beze změny prostý text. */
.wc-mobile-contact {
  display: none;
}

@media (max-width: 900px) {
  .wc-mobile-contact {
    display: inline-block;
    margin-left: auto;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: .85rem;
    letter-spacing: .02em;
    padding: .6rem .25rem;
    transition: color .2s ease;
  }
  .wc-mobile-contact:hover { color: var(--ink); }
}

/* Hamburger tlačítko a rozbalovací menu — jen na ≤560px, viz media query
   níž. Mimo ni jsou trvale skryté, žádná JS logika navíc není potřeba. */
.wc-mobile-toggle,
.wc-mobile-menu {
  display: none;
}

/* --- společný obal: hlavička + hero sdílí jednu ilustraci ---------------
   .wc-hero-wrap je jediný positioning context. .wc-hero-wrap__scene je
   v něm absolutně pozicovaná přes celou plochu (inset:0), pod vším
   ostatním (z-index:0) — pozadí i pár uvnitř ji jen vyplňují. Hlavička
   a hero sekce zůstávají v normálním toku (jejich součet výšek dává
   přirozenou výšku obalu) a leží nad scénou přes z-index. Prázdná spodní
   rezerva daná min-height obalu prosvítá ilustrací — tam se dál rozvíjí
   krajina a stojí pár. */
.wc-hero-wrap {
  position: relative;
  /* přesně výška okna, ne clamp se stropem — strop dřív na vysokých
     a širokých oknech nechal prosvítat pruh navazující sekce pod hero
     (ověřeno reálným screenshotem). 100svh garantuje, že hero vždy končí
     přesně na dolní hraně viewportu, ať je vysoký jakkoli. Na mobilu (viz
     media query níž) se ruší — mobilní kompozice řídí výšku obsahem. */
  min-height: 100svh;

  /* Náhrada za výšku, kterou hlavička přestala zabírat v toku (je
     position:fixed, viz .site-header níž). Obsah hero tak začíná přesně
     tam, kde začínal dřív. Díky box-sizing:border-box se odsazení počítá
     dovnitř min-height, celková výška hero zůstává 100svh.
     .wc-hero-wrap__scene je position:absolute;inset:0, což se vztahuje na
     padding box — ilustrace tedy dál sahá až pod hlavičku, beze změny. */
  padding-top: var(--wc-header-h);
}

/* --- .wc-hero-media: obálka ilustrace + postav ---------------------------
   Mimo mobilní zlom (viz media query níž) NEMÁ vlastní position ani výšku
   — je to čistě strukturální seskupení kvůli mobilnímu pořadí v DOM.
   Potomci (.wc-hero-wrap__scene, .wc-stage) mají position:absolute;inset:0
   a bez pozicovaného rodiče se vážou na nejbližšího pozicovaného předka,
   kterým zůstává .wc-hero-wrap — chování na desktopu/tabletu je tedy
   bit-přesně stejné jako předtím, kdy byly jeho přímými dětmi.

   Na mobilu z ní media query dělá position:relative box s vlastní výškou:
   potomci se pak váží na TUHLE ohraničenou výšku (ne na celý wrap) a
   zároveň se sama jako běžný (ne absolutní) prvek v toku posune pod
   hlavičku a odtlačí textovou sekci pod sebe — místo dosavadního
   celoobrazovkového překryvu tak vznikne ohraničený blok ilustrace nad
   textem na krémovém pozadí. */
.wc-hero-media {
  /* záměrně beze stylu mimo mobilní zlom */
}

/* --- VRSTVA 1: V11 pozadí --------------------------------------------------
   .wc-hero-wrap__scene ořezává (overflow:hidden); .wc-hero-wrap__bg-motion
   uvnitř je čistě strukturální obal (název zůstává kvůli návaznosti na
   zbytek souboru), bez vlastní animace — dřívější "usazení kamery"
   (jemný translate+scale při startu) bylo na požadavek úplně odstraněno.
   Pozadí je od prvního vykreslení statické; jediný pohyb v hero je
   crossfade tří scén postav (viz .wc-pose níž). */
.wc-hero-wrap__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Barva plochy, než se podklad stáhne a dekóduje. Změřený průměr oblohy
     z hero podkladu — teplý papír, ne krémově zelená plocha stránky
     (var(--cream) na <body>), která se tu při studeném načtení ukazovala
     jako jednolitý zelenošedý obdélník. Po načtení ji obrázek celou
     překryje (object-fit: cover), takže se nikdy neprojeví jinak než
     jako mezistav. */
  background-color: var(--hero-sky);
}

/* Spodní okraj ilustrace se rozpouští do papírového podkladu sekce pod ní
   (--paper), místo aby končil rovným řezem. Maska je na TÉHLE vrstvě, tedy
   výhradně na podkladové ilustraci — postavy jsou v sourozeneckém .wc-stage
   a zůstávají celé, včetně bot a vlečky; jejich poloha ani animace se nemění.
   Nic se nepřidává do toku, takže mezi hero a ukázkou nevzniká další pás.

   Dvě dlaždice, stejný princip jako u podkladu navigace a u hranic sekcí:
   dole pás pevné výšky, ve kterém krytí dojde do nuly, nad ním plná plocha.
   Překrývají se o 1 px, takže uvnitř ilustrace nevzniká žádný spoj.

   Maska se čte z ALFA kanálu, ne z jasu — nepravidelnost proto dělá bílá
   s různým krytím (rozostřené elipsy posazené různě hluboko, které v těch
   místech drží barvu déle), ne míchání černé a bílé. Žádný tmavý lem, žádný
   stín, žádná pravidelná vlna. */
.wc-hero-wrap__bg-motion {
  position: absolute;
  inset: 0;

  --wc-hero-fade: 40px;
  --wc-hero-edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0.00' stop-color='%23fff' stop-opacity='1.00'/%3E%3Cstop offset='0.26' stop-color='%23fff' stop-opacity='0.97'/%3E%3Cstop offset='0.48' stop-color='%23fff' stop-opacity='0.80'/%3E%3Cstop offset='0.68' stop-color='%23fff' stop-opacity='0.47'/%3E%3Cstop offset='0.86' stop-color='%23fff' stop-opacity='0.15'/%3E%3Cstop offset='1.00' stop-color='%23fff' stop-opacity='0.00'/%3E%3C/linearGradient%3E%3Cfilter id='s0' x='-60%' y='-60%' width='220%' height='220%'%3E%3CfeGaussianBlur stdDeviation='6.4'/%3E%3C/filter%3E%3Cfilter id='s1' x='-60%' y='-60%' width='220%' height='220%'%3E%3CfeGaussianBlur stdDeviation='10.4'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='1200' height='40' fill='url(%23g)'/%3E%3Cellipse cx='88' cy='19.6' rx='137' ry='13.4' fill='%23fff' opacity='0.55' filter='url(%23s0)'/%3E%3Cellipse cx='282' cy='17.1' rx='123' ry='8.6' fill='%23fff' opacity='0.42' filter='url(%23s1)'/%3E%3Cellipse cx='458' cy='19.8' rx='84' ry='10.8' fill='%23fff' opacity='0.57' filter='url(%23s0)'/%3E%3Cellipse cx='653' cy='17.4' rx='99' ry='13.6' fill='%23fff' opacity='0.56' filter='url(%23s1)'/%3E%3Cellipse cx='816' cy='22.2' rx='74' ry='12.0' fill='%23fff' opacity='0.61' filter='url(%23s0)'/%3E%3Cellipse cx='908' cy='22.9' rx='112' ry='12.9' fill='%23fff' opacity='0.40' filter='url(%23s1)'/%3E%3Cellipse cx='1064' cy='26.4' rx='150' ry='10.7' fill='%23fff' opacity='0.35' filter='url(%23s0)'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--wc-hero-edge), linear-gradient(#000, #000);
  mask-image: var(--wc-hero-edge), linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left bottom, left top;
  mask-position: left bottom, left top;
  -webkit-mask-size: 100% var(--wc-hero-fade), 100% calc(100% - var(--wc-hero-fade) + 1px);
  mask-size: 100% var(--wc-hero-fade), 100% calc(100% - var(--wc-hero-fade) + 1px);
}

/* --- Společné zobrazení hero vrstev ---------------------------------------
   Podklad a postavy jsou jedna kresba a mají se objevit najednou. Bez toho
   se při studeném načtení krátce ukázaly samotné postavy nad prázdnou
   plochou — a protože --ground-scale (viz <script>) se počítá z rozměrů
   podkladu, které ještě nebyly známé, stály navíc ve špatné výšce a
   nevěsta se mohla ořezávat.

   Obě vrstvy proto čekají na .wc-hero-ready, kterou JS přidá teprve až
   jsou VŠECHNY obrázky hero dekódované (Promise nad img.decode()) a až se
   přepočítá --ground-scale. Pojistka na 6 s a posluchač window.load hlídají,
   aby hero nezůstalo skryté ani při pomalém spojení nebo chybě dekódování.

   Text, CTA i hlavička jsou mimo tuhle bránu — na obrazovce jsou hned,
   žádná načítací obrazovka ani spinner nevzniká. Rozměry hero drží
   min-height/height od prvního vykreslení, takže nedochází k layout shiftu.

   Bez JavaScriptu bránu ruší <noscript> v index.html. */
.wc-hero-wrap__bg-motion,
.wc-stage {
  opacity: 0;
}

.wc-hero-ready .wc-hero-wrap__bg-motion,
.wc-hero-ready .wc-stage {
  opacity: 1;
  transition: opacity 240ms cubic-bezier(.22, .61, .36, 1);
}

.wc-hero-wrap__bg-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* ukotveno dolů — na širokých a zároveň nízkých oknech by ořez shora
     usekával spodek scény: dlažbu, spodek postav i kraj květin */
  object-position: center bottom;
}

/* Hlavička leží přímo na ilustraci; čitelnost dává prázdná horní část
   podkladu, ne neprůhledné pozadí za textem. Kontrastnější části stránky
   pod ní podloží akvarelová vrstva .site-header::before (viz motion.css).

   position:fixed místo zděděného sticky ze styles.css: sticky prvek se
   drží jen uvnitř svého rodiče, a hlavička je potomkem .wc-hero-wrap —
   po konci hero (100svh) tedy odscrollovala pryč (ověřeno vyrenderováním
   na 1440×900: při scrollY 1384 byl header.top −551px, tj. mimo obraz).
   Navigace má ale zůstat čitelná po celou stránku. Výšku, o kterou tím
   hlavička přestala zabírat místo v toku, vrací odsazení .wc-hero-wrap
   níž — layout zůstává pixel po pixelu stejný. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* --- VRSTVA 2: character stage ------------------------------------------
   Tři scény páru v nekonečné smyčce (viz <script>):
     1) "walking" — bride-enter.png + groom-enter.png, animované jako JEDEN
        celek (stejné .is-visible v tutéž chvíli, nikdy nezávisle),
     2) "faced"   — couple-kiss.png,
     3) "final"   — couple-railing-back.png.
   couple-turn.png se už nepoužívá (viditelné scény = přesně tři, podle
   reference). Animuje se VÝHRADNĚ opacity — žádný translate, scale ani
   posun v čase; --x a --pose-scale u každé scény jsou pevné/statické.

   Normalizace velikosti — PŘEPOČTENO na skutečném obsahu PNG (alfa-kanál,
   ne jen celková bbox pěti výjevů dřív). Změřená VIDITELNÁ výška ženicha
   (temeno–bota) na společném plátně 640×640:
     groom-enter.png (sólo)         553 px
     couple-kiss.png                531 px
     couple-railing-back.png        522 px
   Cíl je sjednotit na nejnižší z nich (522 px), protože couple-kiss.png
   a couple-railing-back.png už mají jen ~8–9 % průhledné rezervy kolem
   kresby (couple-railing-back přesně na 522, beze změny) — škálovat je
   NAHORU by ořízlo temeno nebo boty o zaokrouhlovací okraj plátna.
   couple-kiss.png (531→522) i groom-enter.png (553→522) se tedy škálují
   mírně DOLŮ. Nevěstin poměr k ženichovi (~0,92 v couple-kiss.png i
   couple-railing-back.png, změřeno stejně) je zachovaný i pro její sólo
   vstup bride-enter.png. */
.wc-stage {
  position: absolute;
  /* Přesah pod spodní hranu scény. Bez něj ořezával overflow:hidden konec
     nevěstiny vlečky přesně na hraně hero — dokud kolem ní končila i dlažba
     rovným řezem, nebylo to vidět; po rozpuštění okraje ilustrace (viz
     maska na .wc-hero-wrap__bg-motion výš) zbyl uprostřed papíru ostře
     uříznutý pruh látky.

     Vlečka sahá 0,0953 × --pose-size pod podrážku, podrážka stojí
     (--feet-gap − --foot-drop) nad dnem scény; nejvíc tedy přečnívá
     0,1403 × --pose-size − --feet-gap, což na běžných desktopových oknech
     vychází 8–17 px (změřeno na 1024/1280/1440/1920). 24 px je s rezervou
     dost a na mobilu, kde pár nepřečnívá vůbec, se přesah stejně ořízne
     na .wc-hero-media.

     Postavy se tím NEPOSOUVAJÍ — o tutéž hodnotu se navyšuje `bottom`
     každé pózy níž, takže vůči ilustraci stojí přesně tam co dřív. */
  --stage-spill: 24px;
  inset: 0 0 calc(-1 * var(--stage-spill)) 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;

  --pose-size: clamp(210px, 21vw, 320px);
  /* Podlaha terasy. Skutečnou hodnotu v px nastavuje JS na tento prvek
     inline (viz <script>, funkce updateGroundScale) — přepočítává změřenou
     podlahovou linii ZDROJOVÉHO podkladu do vykreslených pixelů toutéž
     object-fit:cover matematikou, jakou používá prohlížeč. Hodnota tady je
     jen záloha pro běh bez JavaScriptu.

     Podlahová linie byla změřena přímo v podkladech (pata balustrády, kde
     dlažba terasy navazuje na její podstavec — ne horní hrana zábradlí ani
     spodní okraj obrázku):
       desktop 1672×941  → řádek 914, tj.  27 px nade dnem obrázku
       tablet  1086×1448 → řádek 1322, tj. 126 px nade dnem obrázku
       mobil    941×1672 → řádek 1556, tj. 116 px nade dnem obrázku
     Dřívější hodnota 49 px platila pro desktop a mířila na horní hranu
     podstavce balustrády, ne na dlažbu před ní — postavy proto stály
     o ~21 CSS px nad podlahou a působily, že se vznášejí. */
  --feet-gap: calc(var(--ground-scale, 1) * 27px);

  /* Pár nestojí NA spoji soklu a dlažby, ale na dlažbě před ním, blíž
     k divákovi — podrážky proto leží o kus NÍŽ než změřená podlahová linie.
     Spoj má za ženichem procházet těsně nad jeho kotníky.

     Hodnota se odvozuje z POSTAVY, ne z pozadí, protože je to anatomická
     míra: v alfa kanálu groom-enter.png začíná bota na řádku 588 a podrážka
     končí na 615, výška figury je 553 px — kotník je tedy 27/553 = 4,9 %
     výšky postavy nad podlahou. Vykreslená výška figury je po normalizaci
     522/640 = 0,816 × --pose-size ve všech scénách, takže 5,5 % --pose-size
     odpovídá zhruba 1,1násobku výšky boty: spoj vychází těsně NAD kotník
     a celá bota je pod ním. (Ověřeno vykreslením na 1440×900 v porovnání
     hodnot 0 / 3 / 4,5 / 6 % — 4,5 % je jediná, u které je bota zřetelně
     pod spojem a zároveň pod ní zůstává viditelný pruh dlažby.)

     Protože je to podíl --pose-size, škáluje se stejně jako postavy samy —
     žádná pevná pixelová konstanta pro všechny velikosti okna. --feet-gap
     nad ní zůstává vázané na měřítko POZADÍ, takže obě části vztahu
     (podlahová linie i odstup od ní) drží při libovolném ořezu. */
  --foot-drop: calc(var(--pose-size) * 0.045);
  --pose-scale: 1;                        /* normalizace velikosti, viz komentář výš */

  /* pevné vodorovné středy jednotlivých scén — statické, neanimované.
     --x-couple (scéna 2, polibek) je pevný cílový bod, který se NEHÝBE.
     --x-bride/--x-groom jsou posunuté o STEJNOU hodnotu (+2,2 %) oproti
     dřívějším 62/74 %, aby střed mezery mezi jejich obličeji navazoval na
     střed páru ve scéně 2 — ne střed jejich BOXŮ (ten už na 62/74 %
     vycházel přesně na 68 % shodou okolností), ale skutečný střed
     nakreslených obličejů uvnitř plátna (alfa-kanálová analýza:
     bride-enter.png má těžiště hlavy na 59,9 % šířky svého plátna,
     groom-enter.png na 48,4 %, couple-kiss.png na 63,9 % — postavy nejsou
     v plátně vystředěné, dívají se/kráčí k sobě). Přepočet (viz komentář
     u předchozí verze v git historii) vyšel na posun +2,2 %, ověřeno
     translucentním překryvem scény 2 přes scénu 1 ve vykreslené stránce
     (odchylka < 1 % šířky stage). Vzájemná vzdálenost (12 %) i velikost
     zůstávají beze změny — posouvá se CELÁ scéna 1 jako jeden celek.
     Rozsah zůstává uvnitř bezpečné zóny mimo sytě barevné květinové trsy
     v krajních ~15 % šířky podkladu (ověřeno rozborem sytosti přes
     scripts/flower_zone.py). */
  --x-bride:  64.2%;
  --x-groom:  76.2%;
  --x-couple: 68%;
}

/* Záloha bez JS pro tabletový podklad — ten se používá v portrétu od 600px
   a má podlahu jinde než desktopový. */
@media (orientation: portrait) and (min-width: 600px) {
  .wc-stage { --feet-gap: calc(var(--ground-scale, 1) * 126px); }
}

.wc-pose {
  position: absolute;
  display: block;
  width: var(--pose-size);
  height: var(--pose-size);
  /* Přesné ukotvení kontaktního bodu na podlahu.

     --pose-foot je vzdálenost podrážky od SPODNÍ hrany plátna 640×640,
     vyjádřená jako podíl jeho výšky: (639 − řádek podrážky) / 640.
     Násobí se --pose-scale, protože transform-origin je dole (50% 100%)
     a měřítko tedy vzdálenost kontaktního bodu od spodní hrany prvku
     zmenšuje spolu se vším ostatním. Po odečtení od --feet-gap sedí
     podrážka každé pózy přesně na jedné společné podlahové linii,
     nezávisle na jejím měřítku i na tom, kolik průhledného místa má
     pod sebou v plátně.

     Dřívější jednotná konstanta 0.0375 mířila na NEJNIŽŠÍ neprůhledný
     pixel plátna. U dvojic je to ale konec nevěstiny vlečky, která leží
     na podlaze směrem k divákovi, tedy blíž kameře a v obraze níž než
     boty — ne kontaktní bod. Proto se pózy vůči sobě svisle rozjížděly. */
  bottom: calc(var(--stage-spill) + var(--feet-gap) - var(--foot-drop)
               - var(--pose-size) * var(--pose-foot) * var(--pose-scale));
  transform: translateX(-50%) scale(var(--pose-scale));
  transform-origin: 50% 100%;
  opacity: 0;
  pointer-events: none;
}

/* --pose-foot = (639 − řádek podrážky) / 640. Řádky změřeny v alfa kanálu
   PNG v úzkém výřezu kolem bot (viz scripts/ i komentář u .wc-pose výš):
     bride-enter          střevíc  578  → 61/640
     groom-enter          podrážky 615  → 24/640
     couple-kiss          ženichova bota 562 → 77/640
     couple-railing-back  ženichova bota 553 → 86/640 */
.wc-pose--bride { left: var(--x-bride);  --pose-scale: 0.859; --pose-foot: 0.0953; }
.wc-pose--groom { left: var(--x-groom);  --pose-scale: 0.944; --pose-foot: 0.0375; }
.wc-pose--kiss  { left: var(--x-couple); --pose-scale: 0.983; --pose-foot: 0.1203; }
.wc-pose--final {
  left: var(--x-couple);
  --pose-foot: 0.1344;
}

/* Výchozí stav (bez JS i před spuštěním časové osy): scéna 1 (walking)
   viditelná, ostatní dvě průhledné. Platí čistě přes výchozí CSS, ne přes
   JS-přidávanou třídu — nesmí se krátce mihnout jiná/závěrečná póza. */
.wc-pose--bride,
.wc-pose--groom {
  opacity: 1;
}

/* Časovače časové osy (viz <script>) běží na pozadí dál i se skrytou
   záložkou — animation-play-state:paused (ne transition:none) pauzu
   pozná i uprostřed keyframe přechodu a po návratu pokračuje přesně
   od stejného místa, ne "přeskočí" na cílovou hodnotu. Pozadí žádnou
   vlastní animaci nemá (kamera byla odstraněna), pauzovat tedy stačí
   jen postavy. */
.wc-paused .wc-pose {
  animation-play-state: paused;
}

/* --- Přechody mezi scénami --------------------------------------------------
   Řízeno JS (viz <script> na konci HTML, funkce runTimeline) přes třídy
   .is-leaving / .is-entering, každá spouští svou @keyframes animaci.
   Jednorázová časová osa (žádná smyčka) — viz komentář ve <script>.

   Jednotný crossfade, 1,2 s, s pevnými kontrolními body a plynulou
   ease-in-out interpolací MEZI KAŽDOU DVOJICÍ sousedních bodů (ne
   lineárně) — animation-timing-function na .wc-run pravidlech níž se podle
   specifikace CSS animací aplikuje samostatně na každý úsek mezi dvěma
   keyframe zastávkami, ne jednou na celou animaci:

     průběh   odchozí (wc-pose-out)   příchozí (wc-pose-in)   součet
       0 %          1,00                    0,00              1,00
      28 %          0,94                    0,05              0,99
      42 %          0,74                    0,24              0,98
      58 %          0,24                    0,74              0,98
      72 %          0,05                    0,94              0,99
     100 %          0,00                    1,00              1,00

   Proti předchozí verzi (0,55 / 0,55 uprostřed) se obě scény překrývají
   VÝRAZNĚ jen v úzkém okně 42–58 % průběhu, tedy ~190 ms místo ~360 ms.
   Právě dlouhý pobyt obou pozic kolem poloviny krytí vytvářel patrné
   zdvojené obrysy — nejvíc mezi polibkem a závěrečnou pózou, které stojí
   na stejném místě. Krajní úseky naopak zůstaly pomalé, takže nástup i
   odchod jsou klidné a nikde nevzniká bliknutí.

   Součet krytí přitom po celou dobu drží na ~1,0 (nejníž 0,98), takže pár
   ani na okamžik nezeslábne. animation-fill-mode:forwards drží po
   doběhnutí koncovou hodnotu (0, resp. 1) natrvalo. Výdrže scén (HOLD
   v <script>) se nemění. */
.wc-run .wc-pose.is-leaving {
  animation: wc-pose-out 1.2s ease-in-out forwards;
}
.wc-run .wc-pose.is-entering {
  animation: wc-pose-in 1.2s ease-in-out forwards;
}

@keyframes wc-pose-out {
  0%   { opacity: 1;   }
  28%  { opacity: .94; }
  42%  { opacity: .74; }
  58%  { opacity: .24; }
  72%  { opacity: .05; }
  100% { opacity: 0;   }
}

@keyframes wc-pose-in {
  0%   { opacity: 0;   }
  28%  { opacity: .05; }
  42%  { opacity: .24; }
  58%  { opacity: .74; }
  72%  { opacity: .94; }
  100% { opacity: 1;   }
}

/* Portrait mobil — jen jiná velikost a jiná pevná místa, smyčka (JS) je
   táž. --feet-gap se řídí stejným pravidlem jako jinde, jen s podlahovou
   linií mobilního podkladu (116 px nade dnem obrázku, viz .wc-stage výš);
   skutečnou hodnotu i tady nastavuje JS, tohle je záloha bez JavaScriptu. */
@media (max-width: 560px) and (orientation: portrait) {
  .wc-stage {
    --pose-size: clamp(180px, 56vw, 250px);
    --feet-gap: calc(var(--ground-scale, 1) * 116px);
    /* Stejná logika jako u desktopu — mobilní podklad má sytý pás květin
       jen pod ~10 % a nad ~85 % šířky, uprostřed je čisto.
       Posun +17,7 % oproti dřívějším 38/58 % — na mobilu byl box střed
       páru (--x-couple: 60 %) od středu boxů chodící dvojice (48 %) 12 %
       daleko UŽ bez ohledu na těžiště obličejů uvnitř plátna (na desktopu
       byly boxové středy shodou okolností přesně zarovnané, na mobilu ne).
       Stejná alfa-kanálová analýza jako na desktopu (viz --x-bride/--x-groom
       výš), přepočet ověřen translucentním překryvem scény 2 přes scénu 1
       ve vykreslené stránce na 390×844. Vzájemná vzdálenost (20 %) i
       velikost beze změny. */
    --x-bride:  55.7%;
    --x-groom:  75.7%;
    /* Záměrně NE 50 % — finální scéna páru u zábradlí nemá v nové mobilní
       kompozici (ilustrace jako ohraničený blok, ne fullscreen podklad)
       působit symetricky. 60 % leží uprostřed cíleného rozsahu 58–62 %. */
    --x-couple: 60%;
  }
}

/* Velmi nízký landscape (telefon na šířku): na text i postavy tu není dost
   místa, aby obojí zůstalo čitelné — rovnou závěrečná statická póza. */
@media (orientation: landscape) and (max-height: 500px) {
  .wc-pose { animation: none !important; opacity: 0 !important; }
  .wc-pose--final { opacity: 1 !important; }
}

.wc-hero {
  position: relative;
  z-index: 2;
}

.wc-hero__inner {
  padding-block: clamp(2rem, 6vw, 4rem) 1.5rem;
}

.wc-hero__text {
  max-width: 34rem;
}

.wc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

/* Krátká mobilní verze perexu a hlavního CTA — přepínáno čistě CSS
   (display), ne JS přepisem textu. Desktop/tablet ukazuje --desktop
   dvojici, ≤560px --mobile dvojici (viz media query níž). Cíl i href jsou
   u obou verzí shodné, mění se jen délka textu. */
.wc-hero__lead--mobile,
.wc-hero__cta--mobile {
  display: none;
}

/* .hero__secondary je sdílená třída ze styles.css (neupravovat tam) —
   samotný odkaz má bez úpravy dotykovou plochu jen ~27px (ověřeno
   vyrenderováním), pod doporučeným minimem. Rozšíření dotykové plochy
   přes padding, cíleno jen na tenhle koncept. */
.wc-hero__actions .hero__secondary {
  display: inline-block;
  padding-block: .65rem;
}

/* ==========================================================================
   Responzivita — výška obalu (a tím poměr text/krajina) laděná podle
   výšky okna (svh), ne šířky. Zlom 560px sdílený se styles.css pro
   kompaktní mobilní hlavičku a text; zlomy pro <picture> zdroje (600px,
   1024px) jsou samostatné a řeší jen výběr assetu v HTML.
   ========================================================================== */

@media (max-width: 560px) {
  :root {
    /* Přesný CSS ekvivalent nižší mobilní hlavičky
       (.site-header__inner {min-height:auto; padding-block:.55rem}) —
       změřeno na vykreslené stránce při 390px: 61,59px = 3,85rem.
       Po načtení hodnotu stejně přeměří JS. */
    --wc-header-h: 3.85rem;
  }

  /* Mobilní kompozice hero: header → ohraničený blok ilustrace (přes celou
     šířku) → jemný přechod do papíru → text. Ne fullscreen (100svh) overlay
     jako na desktopu — výšku určuje obsah samotný.

     Hlavička je na mobilu KRYCÍ OD PRVNÍHO VYKRESLENÍ (viz .site-header
     níž), takže pruh za ní nemá co prosvítat. Obal pod ní má přesto
     TÝŽ papírový tón — kdyby při zaokrouhlení výšky vznikla subpixelová
     škvíra, je za ní zase jen papír, ne jiná barva. Dřív tu byl tón
     --hero-sky, který se od papíru lišil o 5 stupňů jasu a pod pevnou
     hlavičkou tvořil rovný barevný předěl. */
  .wc-hero-wrap {
    min-height: 0;
    background-image: linear-gradient(var(--paper), var(--paper));
    background-repeat: no-repeat;
    background-size: 100% calc(var(--wc-header-h) + var(--wc-safe-top));
    background-position: top left;
  }

  /* Krycí podklad lišty na mobilu řeší motion.css — načítá se poslední
     a vlastní výchozí opacity:0, takže pravidlo odsud by přebilo. */
  .site-header {
    background: transparent;
  }

  /* .wc-hero-media je na tomto zlomu position:relative — stává se tak
     containing blockem pro scene/stage (position:absolute;inset:0 uvnitř),
     takže se místo celého .wc-hero-wrap váží jen na tuhle ohraničenou
     výšku. Zároveň je to normální (ne absolutní) prvek v toku, takže
     přirozeně odtlačí .wc-hero (text) pod sebe.

     Výška 76vw vychází z poměru ilustrace v dodaném referenčním návrhu
     (změřeno na mockupu i na reálném mobilním podkladu: užitečná
     scéna — jezero, vesnice, hory, terasa — začíná až v dolních ~37 %
     portrétového obrázku, zbytek nahoře je záměrně prázdný prostor pro
     čitelnost; při šířce boxu × 76 % se object-fit:cover s ukotvením dolů
     trefí přesně do tohohle přechodu). overflow:hidden ořezává přesah
     scaled podkladu, ne kamerový posun (ten ořezává už .wc-hero-wrap__scene
     samo o sobě). */
  .wc-hero-media {
    position: relative;
    height: 76vw;
    overflow: hidden;
  }

  /* Na mobilu rozpouští spodek ilustrace hlavně .wc-hero-media::after níž
     (přechod přes celou spodní třetinu). Maska tu zůstává jen jako
     zakončení úplné hrany, proto mělčí a s vlastním užším viewBoxem —
     desktopová cesta (1200 j.) by se na 390 px stlačila na třetinu. */
  .wc-hero-wrap__bg-motion {
    --wc-hero-fade: 26px;
    --wc-hero-edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 26' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0.00' stop-color='%23fff' stop-opacity='1.00'/%3E%3Cstop offset='0.26' stop-color='%23fff' stop-opacity='0.97'/%3E%3Cstop offset='0.48' stop-color='%23fff' stop-opacity='0.80'/%3E%3Cstop offset='0.68' stop-color='%23fff' stop-opacity='0.47'/%3E%3Cstop offset='0.86' stop-color='%23fff' stop-opacity='0.15'/%3E%3Cstop offset='1.00' stop-color='%23fff' stop-opacity='0.00'/%3E%3C/linearGradient%3E%3Cfilter id='s0' x='-60%' y='-60%' width='220%' height='220%'%3E%3CfeGaussianBlur stdDeviation='4.2'/%3E%3C/filter%3E%3Cfilter id='s1' x='-60%' y='-60%' width='220%' height='220%'%3E%3CfeGaussianBlur stdDeviation='6.8'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='400' height='26' fill='url(%23g)'/%3E%3Cellipse cx='53' cy='12.7' rx='31' ry='8.3' fill='%23fff' opacity='0.46' filter='url(%23s0)'/%3E%3Cellipse cx='139' cy='11.6' rx='33' ry='8.7' fill='%23fff' opacity='0.44' filter='url(%23s1)'/%3E%3Cellipse cx='231' cy='13.0' rx='31' ry='8.8' fill='%23fff' opacity='0.49' filter='url(%23s0)'/%3E%3Cellipse cx='344' cy='12.0' rx='43' ry='6.8' fill='%23fff' opacity='0.44' filter='url(%23s1)'/%3E%3C/svg%3E");
  }

  /* Horní pravá květinová dekorace mobilního podkladu zasahuje až do
     viditelného ořezu (object-position: center bottom, viz výš) a vstupuje
     do obrazu shora přes siluetu hor — v jednom kresleném podkladu (žádná
     samostatná vrstva), takže ji nejde skrýt/přesunout jinak než měkkým
     přechodem do barvy oblohy. Radiální gradient z pravého horního rohu,
     stejná barva jako pozadí hlavičky (var(--hero-sky), změřený průměr oblohy) —
     ne ostrý jednobarevný obdélník, jen postupné vytrácení. Spodní a boční
     trsy (uzavírající kompozici dole) zůstávají beze změny, gradient
     pokrývá jen horní pravý roh.

     PRVNÍ vrstva (nad tou výš) řeší jiný, samostatný spoj: pás za
     hlavičkou (.wc-hero-wrap, background-image výš) je --paper, ale
     skutečný horní okraj podkladu je --hero-sky (změřený průměr, o pár
     stupňů jasu tmavší — proto ho hlavička vůbec používá). Bez tohohle
     přechodu byl přesně na hraně hlavička/ilustrace vidět vodorovný skok
     tónu (ověřeno vzorkováním vykresleného pixelu: pod hlavičkou
     rgb 248/242/234, hned pod ní rgb 244/237/232). Krátký lineární spád
     do 20 px zase srovná okraj obrázku na --paper, než tón přirozeně
     přejde do vlastní barvy ilustrace; hlavička zůstává neprůhledná celou
     svou výškou, takže se přechod nikdy neprojeví jako průhledná mezera —
     jen jako měkké navázání pod ní. */
  .wc-hero-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
      linear-gradient(to bottom, var(--paper) 0, transparent 20px),
      radial-gradient(ellipse 60% 42% at 100% 0%,
        var(--hero-sky) 0%,
        var(--hero-sky) 30%,
        transparent 78%
      );
    pointer-events: none;
  }

  /* Jemný přechod ilustrace do papírového pozadí stránky — bez ostré
     vodorovné hrany. Mobilní podklad nemá vlastní alfa fade (je to plné
     RGB PNG, ověřeno), proto maska přes CSS gradient. z-index nad scene
     (0) i stage (1), ať překryje i chodidla/spodek postav u kraje.

     Cílová barva MUSÍ být --paper, tedy plocha první sekce pod ilustrací.
     Dřív tu byl --cream (= --wash, zelenošedá) a na spodní hraně vznikal
     zřetelný skok: ilustrace doběhla do rgb(222,230,226) a hned pod ní
     začala papírová plocha rgb(249,244,237) — přesně ten dojem řady
     samostatných barevných panelů, který má stránka nemít (změřeno
     svislým řezem na 390×844). */
  .wc-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to bottom,
      transparent 0%,
      transparent 60%,
      var(--paper) 96%
    );
    pointer-events: none;
  }

  /* kompaktnější hlavička na telefonu — jednořádková, podřízená hero */
  .site-header__inner {
    min-height: auto;
    padding-block: .55rem;
  }
  .wordmark { font-size: .95rem; }

  /* Na tomto zlomu nahrazuje textový odkaz Kontakt hamburger — tablet
     (561–900px, viz výše) používá pořád prostý text beze změny. */
  .wc-mobile-contact { display: none; }

  .wc-mobile-toggle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink);
  }

  /* --- Hamburger → srdce ---------------------------------------------------
     Jedno SVG, tři části (dvě čárky + obrys srdce), žádné přepínání dvou
     ikon. Zavřený stav: čárky plně viditelné, obrys srdce zmenšený na
     87 % a se stroke-dashoffset rovným celé délce (tedy nevykreslený).
     Otevřený stav ([aria-expanded="true"]): čárky se zmenší ke společnému
     středu a zeslábnou (140ms), obrys srdce se zvětší na 100 % a vykreslí
     (dashoffset → 0) se zpožděním 70ms a délkou 280ms — od startu čárek
     tedy doběhne za 350ms, uvnitř cíleného rozsahu 300–380ms. Zavírání je
     stejná dvojice transitions, ale bez delay a kratší (150/210ms), takže
     proměna zpět na hamburger je znatelně svižnější.

     --heart-len dopočítá JS přes path.getTotalLength() a nastaví jako
     inline custom property na .wc-mobile-toggle__heart — dasharray i
     počáteční dashoffset na ni odkazují, ať odpovídají skutečné délce
     dráhy, ne odhadu. */
  .wc-mobile-toggle__icon {
    overflow: visible;
  }
  .wc-mobile-toggle__bar {
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .14s ease-out, opacity .14s ease-out;
  }
  .wc-mobile-toggle__heart {
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: var(--heart-len, 49.6);
    stroke-dashoffset: var(--heart-len, 49.6);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(.87);
    transition:
      stroke-dashoffset .15s ease-out,
      opacity .15s ease-out,
      transform .15s ease-out;
  }

  .wc-mobile-toggle[aria-expanded="true"] .wc-mobile-toggle__bar {
    transform: scaleX(.12);
    opacity: 0;
  }
  .wc-mobile-toggle[aria-expanded="true"] .wc-mobile-toggle__heart {
    stroke-dashoffset: 0;
    opacity: 1;
    transform: scale(1);
    transition:
      stroke-dashoffset .28s ease-out .07s,
      opacity .28s ease-out .07s,
      transform .28s ease-out .07s;
  }

  /* Rozbalovací menu — potomek .site-header (position: sticky ze
     styles.css), takže se zavěsí přímo pod hlavičku a stojí nad ilustrací
     i postavami bez vlastního z-indexu navíc.

     Zavřený/výchozí stav (element bez [hidden], ale bez .is-open — nastane
     krátce při otvírání i po celou dobu zavírání) je opacity:0 a mírně
     posunutý nahoru; JS jej po odebrání [hidden] o snímek později přepne
     do .is-open, což spustí delší "expo" ease-out transition (růst shora,
     320–380ms). Při zavírání JS jen odebere .is-open — vrátí se tak k
     tomuto (rychlejšímu, 140/240ms) přechodu. opacity doběhne dřív než
     transform, takže panel v čase, kdy podle zadání startuje scroll
     (~140ms po startu zavírání), už vizuálně nepřekrývá obsah pod sebou. */
  .wc-mobile-menu:not([hidden]) {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* Plně krycí papír — tentýž tón jako podklad lišty nad ním, takže
       otevřené menu a hlavička tvoří jednu souvislou plochu a obsah pod
       nimi neprosvítá nikde. Spodní hrana je jen lehce nepravidelná
       (odchylka pod 1 % výšky panelu), ne pravidelná vlna; stín odpadá. */
    background: var(--paper);
    clip-path: polygon(
      0 0, 100% 0,
      100% 99.2%, 88% 100%, 71% 98.8%, 55% 99.8%,
      38% 98.9%, 21% 100%, 0 99%
    );
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .14s ease-out, transform .24s ease-out;
    pointer-events: none;
  }
  .wc-mobile-menu.is-open:not([hidden]) {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .2s ease-out, transform .36s cubic-bezier(.16, 1, .3, 1);
    pointer-events: auto;
  }

  .wc-mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: .25rem 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
  }
  .wc-mobile-menu a {
    display: block;
    padding: .85rem 0;
    color: var(--ink);
    text-decoration: none;
    font-size: 1rem;
    border-bottom: 1px solid var(--line);
    /* jemný stisk při kliknutí — viz .is-pressed v JS (krok 1 sekvence
       klik → zavření → scroll) */
    transition: background-color .12s ease-out, color .15s ease;
  }
  .wc-mobile-menu li:last-child a { border-bottom: none; }
  .wc-mobile-menu a.is-pressed {
    background-color: var(--accent-bg);
    color: var(--accent-ink);
  }

  /* Odkazy nastupují s jemným vzájemným odstupem — jen když se panel
     skutečně otevírá (.is-open), ať při zavírání nezpožďují mizení. */
  .wc-mobile-menu.is-open li {
    opacity: 0;
    transform: translateY(-6px);
    animation: wc-menu-item-in .32s ease-out forwards;
  }
  .wc-mobile-menu.is-open li:nth-child(1) { animation-delay: .04s; }
  .wc-mobile-menu.is-open li:nth-child(2) { animation-delay: .07s; }
  .wc-mobile-menu.is-open li:nth-child(3) { animation-delay: .10s; }
  .wc-mobile-menu.is-open li:nth-child(4) { animation-delay: .13s; }
  .wc-mobile-menu.is-open li:nth-child(5) { animation-delay: .16s; }

  @keyframes wc-menu-item-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Text teď stojí POD ohraničenou ilustrací (.wc-hero-media), ne na ní
     přeloženě — horní odsazení je vzduch mezi obrázkem a eyebrow textem,
     dolní zůstává stejné jako dřív. */
  .wc-hero__inner {
    padding-block: clamp(1.75rem, 6vw, 2.25rem) 1.75rem;
  }

  .wc-hero__text {
    max-width: none;
    text-align: center;
  }

  .wc-hero__text .eyebrow {
    margin-bottom: .6rem;
  }

  /* H1 na 390px zbytečně dominoval — mírné zmenšení, ne redesign */
  .wc-hero__text h1 {
    font-size: 2.15rem;
  }

  .wc-hero__text .lead {
    font-size: .92rem;
    line-height: 1.5;
    margin-top: 1rem;
  }

  /* kratší mobilní verze perexu a hlavního CTA nahrazují ty desktopové —
     viz základní pravidlo u .wc-hero__actions výš */
  .wc-hero__lead--desktop,
  .wc-hero__cta--desktop {
    display: none;
  }
  .wc-hero__lead--mobile {
    display: block;
  }
  .wc-hero__cta--mobile {
    display: inline-block;
  }

  .wc-hero__actions {
    justify-content: center;
    margin-top: 1.75rem;
    gap: 1.4rem;
  }

  /* CTA smí zůstat menší a přirozeně široké — ne pruh přes celou šířku */
  .wc-hero__actions .btn {
    width: auto;
    padding: .65rem 1.35rem;
    font-size: .92rem;
  }

  /* Na mobilu je ukázka hned pod hero sekcí, odkaz na ni by byl zbytečný. */
  .wc-hero__actions .hero__secondary {
    display: none;
  }
}

/* ==========================================================================
   BAREVNÉ PLOCHY STRÁNKY
   ==========================================================================

   Barva neoznačuje sekci, ale SOUVISLÝ CELEK obsahu:

     hero                        ilustrace v původní barevnosti
     ukázka + co web obsahuje    teplý papír   --paper      #F9F4ED
     průběh spolupráce           světlá zeleň  --wash-soft  #E4EAE9
     FAQ                         zpět papír    --paper      #F9F4ED
     autor + kontakt             sytější zeleň --wash-deep  #D0D9D5
     patička                     tmavě hnědé zakončení --ink #30231C

   Plochu maluje ::before sekce, ne sám box. Vrstva přesahuje o --wc-seam
   NAHORU do předchozí sekce a v tom přesahu ji maska měkce zakončí.
   Pozdější sekce v <main> maluje přes dřívější, takže viditelná hranice
   dvou barev je PŘESNĚ jedna sdílená křivka — ani mezera, ani rovná linka
   schovaná pod dekorací. Mezi sekcemi se stejnou výplní není po hranici
   vidět nic.

   Přechodové pásmo je --wc-seam-band (24 px na desktopu, 16 px na mobilu).
   Uvnitř něj je hranice převážně vodorovná; místní odchylky drží v rozmezí
   ~2–5 px a jsou nepravidelné (dvě nesouměřitelné harmoniky + šum z pevného
   seedu, viz scripts/gen_seams.py) — žádná pravidelná vlna ani opakovaný
   výběžek. Nestejnoměrné rozpíjení pigmentu dodávají rozostřené elipsy
   posazené přímo na hranici: místy plochu vytáhnou výš a měkčeji, jinde
   ji nechají doběhnout ostřeji.

   Rozostření je VÝHRADNĚ v masce, tedy jen na okraji barevné plochy —
   nikde nesahá na text ani na jeho pozadí. Žádný stín, žádný tmavý šev,
   žádná dekorace navíc přes hranu.

   Každá skutečně viditelná hranice má vlastní křivku (přiřazenou podle id
   sekce, ne střídáním přes :nth-of-type) — stejný tvar se na stránce
   neopakuje. */

main .section {
  position: relative;
  /* barvu maluje ::before níž, ne sám box */
  background-color: transparent;
  --wc-seam: 24px;
  --wc-seam-band: 24px;
  --wc-section-fill: var(--paper);
}

main #postup  { --wc-section-fill: var(--wash-soft); }
main #kontakt { --wc-section-fill: var(--wash-deep); }

main .section::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: calc(-1 * var(--wc-seam));
  bottom: 0;
  pointer-events: none;

  background-color: var(--wc-section-fill);

  /* dvě dlaždice masky: nahoře přechodové pásmo s malovanou hranicí, pod
     ním plné krytí. Obě mají krytí 1 a překrývají se o 1 px, takže uvnitř
     plochy nevzniká žádný spoj ani rozdíl v sytosti. */
  -webkit-mask-image: var(--wc-seam-edge), linear-gradient(#000, #000);
  mask-image: var(--wc-seam-edge), linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left top, left bottom;
  mask-position: left top, left bottom;
  -webkit-mask-size: 100% var(--wc-seam-band), 100% calc(100% - var(--wc-seam-band) + 1px);
  mask-size: 100% var(--wc-seam-band), 100% calc(100% - var(--wc-seam-band) + 1px);
}

/* Hranice, kde se plocha SKUTEČNĚ mění. Ostatní sekce sdílejí papír,
   takže u nich není po hranici co malovat. */
main #postup::before  { --wc-seam-edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='e' x='-6%' y='-120%' width='112%' height='340%'%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3Cfilter id='b0' x='-60%' y='-300%' width='220%' height='700%'%3E%3CfeGaussianBlur stdDeviation='2.4'/%3E%3C/filter%3E%3Cfilter id='b1' x='-60%' y='-300%' width='220%' height='700%'%3E%3CfeGaussianBlur stdDeviation='3.2'/%3E%3C/filter%3E%3Cfilter id='b2' x='-60%' y='-300%' width='220%' height='700%'%3E%3CfeGaussianBlur stdDeviation='4.0'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-60.0,12.5C-30.0,12.5 -30.0,12.5 0.0,12.5C50.0,12.5 50.0,12.8 100.0,12.8C150.0,12.8 150.0,12.9 200.0,12.9C250.0,12.9 250.0,12.2 300.0,12.2C350.0,12.2 350.0,10.1 400.0,10.1C450.0,10.1 450.0,9.4 500.0,9.4C550.0,9.4 550.0,11.1 600.0,11.1C650.0,11.1 650.0,10.0 700.0,10.0C750.0,10.0 750.0,10.5 800.0,10.5C850.0,10.5 850.0,13.0 900.0,13.0C950.0,13.0 950.0,12.4 1000.0,12.4C1050.0,12.4 1050.0,13.5 1100.0,13.5C1150.0,13.5 1150.0,12.5 1200.0,12.5C1230.0,12.5 1230.0,12.5 1260.0,12.5L1260.0,60L-60.0,60Z' fill='%23fff' filter='url(%23e)'/%3E%3Cellipse cx='49' cy='14.3' rx='72' ry='4.4' fill='%23fff' filter='url(%23b0)'/%3E%3Cellipse cx='280' cy='12.3' rx='58' ry='4.5' fill='%23fff' filter='url(%23b1)'/%3E%3Cellipse cx='604' cy='12.4' rx='131' ry='6.1' fill='%23fff' filter='url(%23b2)'/%3E%3Cellipse cx='847' cy='12.8' rx='118' ry='5.1' fill='%23fff' filter='url(%23b0)'/%3E%3Cellipse cx='1137' cy='11.4' rx='131' ry='4.1' fill='%23fff' filter='url(%23b1)'/%3E%3C/svg%3E"); }
main #faq::before     { --wc-seam-edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='e' x='-6%' y='-120%' width='112%' height='340%'%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3Cfilter id='b0' x='-60%' y='-300%' width='220%' height='700%'%3E%3CfeGaussianBlur stdDeviation='2.4'/%3E%3C/filter%3E%3Cfilter id='b1' x='-60%' y='-300%' width='220%' height='700%'%3E%3CfeGaussianBlur stdDeviation='3.2'/%3E%3C/filter%3E%3Cfilter id='b2' x='-60%' y='-300%' width='220%' height='700%'%3E%3CfeGaussianBlur stdDeviation='4.0'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-60.0,12.5C-30.0,12.5 -30.0,12.5 0.0,12.5C50.0,12.5 50.0,12.7 100.0,12.7C150.0,12.7 150.0,12.0 200.0,12.0C250.0,12.0 250.0,12.1 300.0,12.1C350.0,12.1 350.0,12.2 400.0,12.2C450.0,12.2 450.0,11.1 500.0,11.1C550.0,11.1 550.0,11.9 600.0,11.9C650.0,11.9 650.0,12.5 700.0,12.5C750.0,12.5 750.0,13.6 800.0,13.6C850.0,13.6 850.0,12.8 900.0,12.8C950.0,12.8 950.0,13.9 1000.0,13.9C1050.0,13.9 1050.0,13.7 1100.0,13.7C1150.0,13.7 1150.0,12.5 1200.0,12.5C1230.0,12.5 1230.0,12.5 1260.0,12.5L1260.0,60L-60.0,60Z' fill='%23fff' filter='url(%23e)'/%3E%3Cellipse cx='103' cy='13.4' rx='70' ry='6.2' fill='%23fff' filter='url(%23b0)'/%3E%3Cellipse cx='405' cy='12.8' rx='56' ry='4.5' fill='%23fff' filter='url(%23b1)'/%3E%3Cellipse cx='683' cy='11.7' rx='65' ry='3.9' fill='%23fff' filter='url(%23b2)'/%3E%3Cellipse cx='810' cy='11.5' rx='90' ry='4.4' fill='%23fff' filter='url(%23b0)'/%3E%3Cellipse cx='1006' cy='14.3' rx='127' ry='4.2' fill='%23fff' filter='url(%23b1)'/%3E%3C/svg%3E"); }
main #kontakt::before { --wc-seam-edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='e' x='-6%' y='-120%' width='112%' height='340%'%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3Cfilter id='b0' x='-60%' y='-300%' width='220%' height='700%'%3E%3CfeGaussianBlur stdDeviation='2.4'/%3E%3C/filter%3E%3Cfilter id='b1' x='-60%' y='-300%' width='220%' height='700%'%3E%3CfeGaussianBlur stdDeviation='3.2'/%3E%3C/filter%3E%3Cfilter id='b2' x='-60%' y='-300%' width='220%' height='700%'%3E%3CfeGaussianBlur stdDeviation='4.0'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-60.0,12.5C-30.0,12.5 -30.0,12.5 0.0,12.5C50.0,12.5 50.0,11.9 100.0,11.9C150.0,11.9 150.0,9.5 200.0,9.5C250.0,9.5 250.0,10.5 300.0,10.5C350.0,10.5 350.0,10.5 400.0,10.5C450.0,10.5 450.0,11.4 500.0,11.4C550.0,11.4 550.0,11.3 600.0,11.3C650.0,11.3 650.0,12.2 700.0,12.2C750.0,12.2 750.0,13.1 800.0,13.1C850.0,13.1 850.0,12.6 900.0,12.6C950.0,12.6 950.0,13.0 1000.0,13.0C1050.0,13.0 1050.0,11.8 1100.0,11.8C1150.0,11.8 1150.0,12.5 1200.0,12.5C1230.0,12.5 1230.0,12.5 1260.0,12.5L1260.0,60L-60.0,60Z' fill='%23fff' filter='url(%23e)'/%3E%3Cellipse cx='95' cy='13.8' rx='72' ry='6.0' fill='%23fff' filter='url(%23b0)'/%3E%3Cellipse cx='353' cy='13.2' rx='90' ry='6.4' fill='%23fff' filter='url(%23b1)'/%3E%3Cellipse cx='658' cy='14.3' rx='90' ry='4.4' fill='%23fff' filter='url(%23b2)'/%3E%3Cellipse cx='756' cy='13.0' rx='97' ry='6.0' fill='%23fff' filter='url(%23b0)'/%3E%3Cellipse cx='1054' cy='13.6' rx='65' ry='5.9' fill='%23fff' filter='url(%23b1)'/%3E%3C/svg%3E"); }

/* První sekce navazuje na ilustraci, ne na jinou barevnou plochu. Papír
   pod ní by se stejně nikam neprokreslil — ilustrace (.wc-hero-wrap__scene,
   z-index 0) leží nad vrstvou plochy (z-index −1) — takže tu přesah ani
   maska nemají co řešit a plocha začíná přesně pod obrázkem. */
main .section:first-of-type::before {
  --wc-seam: 0px;
  --wc-seam-band: 0px;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Na úzké obrazovce se šířka viewBoxu stlačí na třetinu, takže by hranice
   působila hustěji než na desktopu. Užší pásmo drží stejný klidný
   charakter. */
@media (max-width: 560px) {
  main .section {
    --wc-seam: 16px;
    --wc-seam-band: 16px;
  }
}

/* ==========================================================================
   Motion — pozadí je vždy statické (žádná kamera). Postavy se pouze
   objevují a mizí na pevných místech; žádná z jejich vrstev nemá
   animovaný prostorový pohyb.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  /* Žádná časová osa — okamžitě jen závěrečná póza u zábradlí. !important
     kvůli tomu, aby přebilo i pravidla pod .wc-run, která přidává JS. */
  .wc-pose {
    animation: none !important;
    opacity: 0 !important;
  }

  .wc-pose--final {
    opacity: 1 !important;
  }
}