/* ==========================================================================
   JEDNOTNÝ AKVARELOVÝ ANIMAČNÍ SYSTÉM

   Načítá se AŽ ZA styles.css a concept-watercolor.css — je to poslední,
   přesně ohraničená vrstva, která k hotovému layoutu přidává výhradně
   pohyb. Nemění obsah, barevnost, typografii, rozměry ani pořadí sekcí:
   všechno, co je tu animované, běží na `opacity` a `transform`, takže
   nikdy nevzniká layout shift.

   Každý pohyb na webu patří do JEDNÉ ze tří rodin — nic dalšího se
   nepřidává:

     1. NAMALOVÁNÍ — hover a aktivní prvky
        Krátký akvarelový tah, který se namaluje zleva doprava.
        (.nav a::after, .wc-mobile-contact::after)

     2. ROZPITÍ — podklad navigace
        Papírová vrstva, která se rozlije pod navigaci a měkce se vytratí.
        (.site-header::before)

        Akvarelové skvrny na hranicích sekcí (.wc-edge) tady dřív bývaly
        také. Byla to samostatná dekorace položená přes rovné hrany a
        v renderu se vždy četla jako rozostřený stín; princip byl opuštěn.
        Hranice sekcí teď tvoří samotné barevné plochy — společnou ručně
        malovanou hranicí, viz concept-watercolor.css.

     3. VYNOŘENÍ — nadpisy, textové skupiny a komponenty
        Obsah vystoupí z papíru: posun nahoru + zaostření.
        (.wc-rise)

   Bez knihoven, bez canvasu, bez videa a bez nekonečných animací —
   každý efekt jednou doběhne a zastaví se.

   Časovací křivka je pro celý systém jediná: klidný ease-out
   cubic-bezier(.22, .61, .36, 1).
   ========================================================================== */

:root {
  /* Jediná křivka pro celý systém. */
  --wc-ease: cubic-bezier(.22, .61, .36, 1);

}


/* ==========================================================================
   1. ROZPITÍ — podklad horní navigace
   ==========================================================================

   Hlavička sama zůstává beze změny: nehýbe se, neskáče a nemění výšku.
   Animuje se výhradně `opacity` téhle jediné podkladové vrstvy.

   Na úplném začátku stránky je vrstva na opacity:0 a lišta splývá s hero.
   Jakmile se stránka začne posouvat, je vrstva plně krycí — aktivace NENÍ
   vázaná na horizont krajiny ani na konec hero (to bývala dřívější verze
   s dopočítaným sentinelem; při rychlém scrollu tak pod navigací na chvíli
   projížděla krajina bez podkladu). Spouštěčem je prostě to, že stránka
   není úplně nahoře — sentinel proto sedí na nulové pozici dokumentu,
   viz <script> v index.html.

   Tvar: žádný obdélník, žádný glassmorphism, žádný stín, žádná tmavá
   linka. Spodní okraj je téměř rovný; drobná nepravidelnost a lokální
   rozpití drží v pásmu ~2–4 px. */

.site-header::before {
  content: "";
  position: absolute;
  /* Přesah pod lištu, ve kterém se okraj rozpíjí. Výška vrstvy je tedy
     výška hlavičky + tato hodnota. Dřív to bylo 30 px s výraznou vlnou;
     teď je okraj téměř rovný a rozpití drží v pásmu ~2–4 px. */
  --wc-nav-bleed: 4px;
  /* Pevná výška pásu, ve kterém je nakreslený spodní okraj. Sedí na SPODKU
     vrstvy, takže se s výškou hlavičky nedeformuje. */
  --wc-nav-edge: 10px;
  inset: 0 0 calc(-1 * var(--wc-nav-bleed)) 0;
  z-index: -1;
  pointer-events: none;

  /* Teplý papír stránky. Výplň je JEDNOTNÁ a bez alfy — obsah projíždějící
     pod navigací nesmí být čitelný nikde uvnitř siluety. Dvě sotva znatelné
     lazury v tónech papíru z hero ilustrace (--hero-paper, --hero-sky) dávají
     ploše charakter malovaného papíru místo ploché digitální barvy; jejich
     rozdíl proti podkladu je pod 2 % jasu, takže nikde nevzniká pruh.
     Žádný stín, žádná záře, žádný barevný lem, žádná tmavá linka. */
  background-color: var(--paper);
  background-image:
    radial-gradient(78% 140% at 16% 26%, rgba(245, 236, 225, .55), rgba(245, 236, 225, 0) 72%),
    radial-gradient(64% 130% at 82% 74%, rgba(244, 237, 232, .5), rgba(244, 237, 232, 0) 72%);

  /* DVĚ dlaždice masky, obě s krytím 1: dole pás s malovaným okrajem,
     nad ním plná plocha. Překrývají se o 1 px, takže mezi hlavním pásem
     a jeho zakončením nevzniká spoj ani rozdíl v krytí — měkký je jen
     vnější obrys pásu (feGaussianBlur 0,5 px v samotné masce). */
  --wc-nav-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 10' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='f' x='-6%' y='-200%' width='112%' height='500%'%3E%3CfeGaussianBlur stdDeviation='0.50'/%3E%3C/filter%3E%3Cfilter id='g0' x='-70%' y='-400%' width='240%' height='900%'%3E%3CfeGaussianBlur stdDeviation='0.9'/%3E%3C/filter%3E%3Cfilter id='g1' x='-70%' y='-400%' width='240%' height='900%'%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-40.0,7.00C-20.0,7.00 -20.0,7.00 0.0,7.00C37.5,7.00 37.5,6.90 75.0,6.90C112.5,6.90 112.5,6.92 150.0,6.92C187.5,6.92 187.5,6.69 225.0,6.69C262.5,6.69 262.5,6.83 300.0,6.83C337.5,6.83 337.5,6.20 375.0,6.20C412.5,6.20 412.5,6.71 450.0,6.71C487.5,6.71 487.5,7.32 525.0,7.32C562.5,7.32 562.5,7.33 600.0,7.33C637.5,7.33 637.5,7.75 675.0,7.75C712.5,7.75 712.5,7.27 750.0,7.27C787.5,7.27 787.5,7.61 825.0,7.61C862.5,7.61 862.5,7.41 900.0,7.41C937.5,7.41 937.5,7.55 975.0,7.55C1012.5,7.55 1012.5,7.44 1050.0,7.44C1087.5,7.44 1087.5,6.88 1125.0,6.88C1162.5,6.88 1162.5,7.00 1200.0,7.00C1220.0,7.00 1220.0,7.00 1240.0,7.00L1240.0,-20L-40.0,-20Z' fill='%23fff' filter='url(%23f)'/%3E%3Cellipse cx='150' cy='6.29' rx='61' ry='1.36' fill='%23fff' filter='url(%23g0)'/%3E%3Cellipse cx='257' cy='6.41' rx='59' ry='0.80' fill='%23fff' filter='url(%23g1)'/%3E%3Cellipse cx='545' cy='6.73' rx='66' ry='1.49' fill='%23fff' filter='url(%23g0)'/%3E%3Cellipse cx='745' cy='6.67' rx='129' ry='1.18' fill='%23fff' filter='url(%23g1)'/%3E%3Cellipse cx='921' cy='6.74' rx='127' ry='1.28' fill='%23fff' filter='url(%23g0)'/%3E%3Cellipse cx='1156' cy='6.19' rx='73' ry='1.05' fill='%23fff' filter='url(%23g1)'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--wc-nav-mask), linear-gradient(#000, #000);
  mask-image: var(--wc-nav-mask), 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-nav-edge), 100% calc(100% - var(--wc-nav-edge) + 1px);
  mask-size: 100% var(--wc-nav-edge), 100% calc(100% - var(--wc-nav-edge) + 1px);

  opacity: 0;
  transition: opacity 260ms var(--wc-ease);
}

.site-header.is-washed::before {
  opacity: 1;
}

/* MOBIL: lišta se nepřepíná, papírový podklad je pod ní OD PRVNÍHO
   VYKRESLENÍ. Nad ilustrací i nad obsahem tak vždycky stojí jedna souvislá
   krycí plocha, nikde neprosvítá text projíždějící pod ní a hlavičkou
   neprochází žádný barevný předěl. Jemný akvarelový okraj zůstává jen na
   jejím spodním zakončení (maska výš). */
@media (max-width: 560px) {
  .site-header::before {
    opacity: 1;
    transition: none;
  }
}

/* Výřez displeje (notch / dynamic island). Odsazení patří na SAMOTNOU
   lištu, ne na .site-header__inner — tam by přebilo mobilní padding-block
   a lišta by se o něj zkrátila (naměřeno 61,6 → 52,8 px). Takhle je
   přičtené: krytá plocha (::before, inset:0 vůči padding boxu) sahá
   i přes výřez, ale obsah lišty pod něj nezaleze. */
.site-header {
  padding-top: var(--wc-safe-top);
}


/* ==========================================================================
   2. NAMALOVÁNÍ — hover a focus položek menu
   ==========================================================================

   Pod textem se zleva doprava namaluje krátký akvarelový tah přibližně
   v šířce položky. Text se nehýbe, nezvětšuje ani nemění řez — tah je
   absolutně pozicovaný, takže na layout nemá vliv.

   Příchod (180–240 ms): tah se maluje zleva doprava (scaleX) a současně
   zaostří (blur → 0).
   Odchod (220–300 ms): tah se NEstahuje zpět, jen se rozpustí — vytratí
   se a rozostří na místě; scaleX se vrací až po doběhnutí rozpuštění
   (transition-delay na transform ve výchozím pravidle).

   Původní `border-bottom` u .nav a / .wc-mobile-contact zůstává v DOM
   (drží výšku boxu), jen se už nikdy nezabarví — nahradil ho tah. */

.nav a,
.wc-mobile-contact,
.wc-link {
  position: relative;
}

.nav a::after,
.wc-mobile-contact::after,
.wc-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* Tah leží pod dotažnicemi, ne přes ně. Změřeno na vykreslené položce
     (font .93rem, line-height 1.7, padding-block .35rem): spodek dotažnic
     "J"/"p" končí 11,8 px nad spodní hranou boxu, horní okraj tahu je na
     7,8 px — mezi písmem a tahem tedy zůstávají ~4 px. */
  bottom: .05rem;
  height: 7px;
  pointer-events: none;

  /* Tenký, průsvitný, nepravidelný tah v tlumené zelenošedé z palety
     (--accent #66765A). Dvě tmavší místa = přirozeně nahromaděný pigment,
     konec tahu se měkce vytrácí do nuly. */
  background:
    radial-gradient(58% 68% at 21% 58%, rgba(74, 86, 66, .30), rgba(74, 86, 66, 0) 74%),
    radial-gradient(42% 56% at 62% 42%, rgba(74, 86, 66, .24), rgba(74, 86, 66, 0) 74%),
    linear-gradient(90deg,
      rgba(102, 118, 90, .04) 0%,
      rgba(102, 118, 90, .34) 7%,
      rgba(102, 118, 90, .24) 36%,
      rgba(102, 118, 90, .32) 60%,
      rgba(102, 118, 90, .16) 85%,
      rgba(102, 118, 90, 0) 100%);

  /* Nepravidelná horní i dolní hrana — sjednocení několika elips místo
     rovné pilulky. */
  --wc-stroke-mask:
    radial-gradient(72% 62% at 17% 60%, #000 0%, transparent 100%),
    radial-gradient(58% 46% at 44% 38%, #000 0%, transparent 100%),
    radial-gradient(74% 56% at 74% 64%, #000 0%, transparent 100%),
    radial-gradient(38% 34% at 94% 48%, #000 0%, transparent 100%);
  -webkit-mask-image: var(--wc-stroke-mask);
  mask-image: var(--wc-stroke-mask);

  opacity: 0;
  filter: blur(2px);
  transform: scaleX(0);
  transform-origin: left center;
  /* ODCHOD — rozpuštění na místě; scaleX se resetuje až potom */
  transition:
    opacity 260ms var(--wc-ease),
    filter 260ms var(--wc-ease),
    transform 0ms linear 260ms;
}

/* SAMOSTATNÉ TEXTOVÉ ODKAZY (mimo menu) mají tah vidět POŘÁD — podle
   manuálu je to jejich výchozí vzhled, ne reakce. Najetím se jen přisytí
   pigment; tvar, délka ani poloha se nemění, takže se nic neposouvá. */
.wc-link::after {
  opacity: .5;
  filter: blur(0);
  transform: scaleX(1);
  transition: opacity 220ms var(--wc-ease);
}

@media (hover: hover) {
  .wc-link:hover::after { opacity: 1; }
}
.wc-link:focus-visible::after { opacity: 1; }

/* Hover jen tam, kde skutečně existuje ukazatel — na dotykových
   zařízeních se stav nezasekne a ovládání na něm nikdy nezávisí. */
@media (hover: hover) {
  .nav a:hover::after,
  .wc-mobile-contact:hover::after {
    opacity: 1;
    filter: blur(0);
    transform: scaleX(1);
    /* PŘÍCHOD — namalování zleva doprava */
    transition:
      transform 210ms var(--wc-ease),
      opacity 150ms var(--wc-ease),
      filter 190ms var(--wc-ease);
  }
}

/* Stejný princip pro klávesnici — focus-visible se chová jako hover. */
.nav a:focus-visible::after,
.wc-mobile-contact:focus-visible::after {
  opacity: 1;
  filter: blur(0);
  transform: scaleX(1);
  transition:
    transform 210ms var(--wc-ease),
    opacity 150ms var(--wc-ease),
    filter 190ms var(--wc-ease);
}

/* .wc-mobile-contact (tabletový zlom 561–900px) má vyšší spodní odsazení
   (.6rem místo .35rem), takže by při společné hodnotě zůstal tah viditelně
   odsazený od textu. Změřeno na vykreslené položce: spodek dotažnic končí
   15,4 px nad spodní hranou boxu, tah tedy začíná na 11,5 px — stejné
   ~4 px odstupu jako u položek desktopového menu. */
.wc-mobile-contact::after {
  bottom: .28rem;
}

/* Podtržení nahradil tah — rámeček zůstává průhledný, aby se nezměnila
   výška boxu (a tím ani pozice položek v hlavičce). */
.nav a:hover,
.wc-mobile-contact:hover {
  border-color: transparent;
}


/* ==========================================================================
   3. VYNOŘENÍ — objevování obsahu sekcí
   ==========================================================================

   Skupiny (ne jednotlivé odstavce) vystoupí z papíru: posun zdola,
   zaostření a náběh krytí. Pořadí uvnitř sekce je popisek → nadpis →
   text → hlavní komponenta, mezi skupinami 100 ms.

   Třídu .wc-rise přidává JS (viz <script> v index.html) — bez JS i při
   prefers-reduced-motion je obsah rovnou vidět. Po doběhnutí JS obě třídy
   zase odebere, takže na prvcích nezůstává trvalý filtr ani transformace. */

.wc-rise {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(1.2px);
}

.wc-rise.is-risen {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 620ms var(--wc-ease) var(--wc-rise-delay, 0ms),
    transform 620ms var(--wc-ease) var(--wc-rise-delay, 0ms),
    filter 620ms var(--wc-ease) var(--wc-rise-delay, 0ms);
}

/* Příchod na sekci kliknutím na kotvu v navigaci. Návštěvník už na místě
   je a nemá na obsah čekat — animace jen naznačí, že sekce dosedla. */
.wc-rise.is-risen.is-quick {
  transition-duration: 300ms;
}


/* ==========================================================================
   Responzivita — na malé obrazovce stejný princip, nižší intenzita
   ========================================================================== */

@media (max-width: 560px) {
  /* Podklad navigace: týž princip, jen užší viewBox. Desktopová cesta
     (1200 j.) by se na 390 px stlačila na třetinu a drobná nepravidelnost
     by se změnila na vysokofrekvenční zoubky. */
  .site-header::before {
    --wc-nav-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 10' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='f' x='-6%' y='-200%' width='112%' height='500%'%3E%3CfeGaussianBlur stdDeviation='0.45'/%3E%3C/filter%3E%3Cfilter id='g0' x='-70%' y='-400%' width='240%' height='900%'%3E%3CfeGaussianBlur stdDeviation='0.9'/%3E%3C/filter%3E%3Cfilter id='g1' x='-70%' y='-400%' width='240%' height='900%'%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-40.0,7.00C-20.0,7.00 -20.0,7.00 0.0,7.00C25.0,7.00 25.0,6.60 50.0,6.60C75.0,6.60 75.0,6.86 100.0,6.86C125.0,6.86 125.0,6.27 150.0,6.27C175.0,6.27 175.0,6.78 200.0,6.78C225.0,6.78 225.0,7.08 250.0,7.08C275.0,7.08 275.0,6.31 300.0,6.31C325.0,6.31 325.0,6.50 350.0,6.50C375.0,6.50 375.0,7.00 400.0,7.00C420.0,7.00 420.0,7.00 440.0,7.00L440.0,-20L-40.0,-20Z' fill='%23fff' filter='url(%23f)'/%3E%3Cellipse cx='57' cy='6.34' rx='29' ry='1.31' fill='%23fff' filter='url(%23g0)'/%3E%3Cellipse cx='173' cy='6.71' rx='19' ry='1.15' fill='%23fff' filter='url(%23g1)'/%3E%3Cellipse cx='367' cy='6.43' rx='38' ry='1.07' fill='%23fff' filter='url(%23g0)'/%3E%3C/svg%3E");
  }

  /* Vynoření: kratší dráha, ať se na krátkém viewportu nestihne
     "rozjet" a hned zastavit. */
  .wc-rise {
    transform: translateY(6px);
  }
}


/* ==========================================================================
   Přístupnost — prefers-reduced-motion
   ==========================================================================

   Obsah se zobrazí okamžitě, žádné posuny, rozostření ani zvětšování.
   Web zůstává plně ovladatelný — mění se jen způsob, jakým se prvky
   dostanou do koncového stavu.

   JS v tomhle režimu .wc-rise vůbec nepřidává; pravidla níž jsou pojistka
   pro případ, že si návštěvník nastavení přepne až za běhu. */

@media (prefers-reduced-motion: reduce) {
  .wc-rise,
  .wc-rise.is-risen {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }


  /* Jediná výjimka: podklad navigace smí přepnout krátkým prostým
     přechodem krytí. styles.css v tomhle režimu plošně sráží všechna
     trvání na .001ms — proto tu je !important, jinak by podklad
     naskakoval skokem. Žádný posun ani rozostření se neanimuje. */
  .site-header::before {
    transition: opacity 140ms linear !important;
  }

  /* Tah pod položkou menu se jen objeví a zmizí, nemaluje se. */
  .nav a::after,
  .wc-mobile-contact::after,
  .nav a:hover::after,
  .wc-mobile-contact:hover::after,
  .nav a:focus-visible::after,
  .wc-mobile-contact:focus-visible::after {
    filter: none !important;
    transform: scaleX(1) !important;
    transition: opacity 140ms linear !important;
  }
  .nav a::after,
  .wc-mobile-contact::after {
    opacity: 0;
  }
}


/* ==========================================================================
   Tisk a ukládání do PDF
   ==========================================================================

   Skupiny, ke kterým se návštěvník nescrolloval, mají v tu chvíli
   opacity:0 — bez tohoto pravidla by se vytiskly prázdné. Pohybové vrstvy
   ani barevné plochy do tisku nepatří. */

@media print {
  .wc-rise,
  .wc-rise.is-risen {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .site-header::before,
  .nav a::after,
  .wc-mobile-contact::after,
  /* barevné plochy sekcí se netisknou — text jde na bílý papír */
  main .section::before {
    display: none !important;
  }
}