/* AUTOGENEROVANO CORALEM, neupravovat.
 * Zdroj pravdy je stejnojmenny .less soubor, tento .css se pri kazde
 * synchronizaci prepisuje. Upravy delej v .less souboru. */
/* Zlatá hodinka, hero (body 27 a 28).
   Časová osa úvodu běží od třídy zh-hero--start, kterou skript přidá až po
   načtení písem, takže jméno nikdy nenaskočí v náhradním písmu.
   Zlatá hodinka 134: jméno je neonová cedule, která svítí v noci. Písmena se
   rozsvěcují a zhasínají jako trubice, logo se skládá na tmavé obloze, kde má
   kontrast, a zlatá hodinka (název webu) přijde až nakonec od obzoru, pod
   logem. Na konci se už nic znovu nerozsvěcí, neon jen dostane záři.
   0.3 s  písmena Jan Kotlík se rozblikají, v barvách loga z patičky
   1.0 s  noc přechází do modré hodinky
   2.0 s  Jan zhasne, rozsvítí se Honza a nápis se srovná na střed
   3.2 s  písmena kolem iniciál zhasnou, za H a K se rozžhaví světlo
   4.2 s  H a K převezme tvar ve skriptu (bod 88): odletí do středu a zvětší se,
          5.95 s se spojí v HK, 6.75 s se promění ve znak loga a šikmá
          pacička nahoře se natáhne hned s proměnou (bod 102)
   7.2 s  od obzoru vychází zlatá hodinka, slunce stoupá k obzoru
   7.4 s  za hotovým znakem blikne světlo
   8.05 s výřez jede zleva doprava a za ním se dopíše Jan Kotlík, fotograf a grafik
   9.6 s  k logu se plynule přidá záře neonu z patičky (bod 102)
   9.9 s  palmy a claim, pak se odemkne scroll
   Scéna s logem stojí přesně uprostřed obrazovky ve všech fázích. Hýbe se jen
   průhlednost, posun a tvar znaku, nic nemění rozvržení stránky. */
.zh-hero {
  --zh-scena-s: min(460px, 74vw);
  /* Bod 87: palmy a claim přijdou až po logu. Konec loga je jedna
     hodnota; skript z ní počítá i zvuk a odemčení scrollu. */
  --zh-po-logu: 9.9s;
  /* Zlatá hodinka 134: obzor leží pod logem, přesně za claimem. Nejsvětlejší
     pás oblohy je tady, za logem je obloha tmavší a neon má kontrast. */
  --zh-obzor: calc(50% + var(--zh-scena-s) * 0.252 + clamp(26px, 5vh, 46px) + 10px);
  /* Zlatá hodinka 96 a 99: úvod stojí (zh-drzi v jádře) a přes něj přijede O mně s čárou */
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: clip;
  text-align: center;
}
/* ─────────────────────────────  obloha  ──────────────────────────── */
.zh-hero__nebe {
  position: absolute;
  inset: 0;
}
.zh-hero__tma {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #07040E 0%, #0D0920 58%, #150C24 100%);
}
/* Zlatá hodinka 134: modrá hodinka mezi nocí a západem. Světlejší modrá jako
   v logu (Honza, část 29) je jen u obzoru, za logem zůstává obloha tmavá. */
.zh-hero__modra {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(180deg, #080B22 0%, #101838 22%, #17224E calc(var(--zh-obzor) - 28vh), #253672 calc(var(--zh-obzor) - 10vh), #5B86B4 calc(var(--zh-obzor) - 1.5vh), #2C3566 calc(var(--zh-obzor) + 7vh), #130F2C calc(var(--zh-obzor) + 20vh), #0A0716 100%);
}
/* Zlatá hodinka 199: Miami obloha jako před bodem 134, která se Honzovi
   líbila víc, a nahoře decentně víc světle modré jako na zbytku webu (Ondra,
   část 57: „přidat teda trochu víc té modré … ale decentně“). Bílé logo na ní
   drží měkký stín. */
.zh-hero__svit {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(180deg, #7FA6DA 0%, #A79BD6 9%, #E487BE 20%, #FF8FB4 30%, #FF9FA6 40%, #FFB98F 52%, #F0977F 62%, #9A5E8E 78%, #3B2246 91%, #120818 100%);
}
/* Slunce u obzoru jde za myší jen transformací: do stran volně, nahoru a dolů
   jen v pásu kolem obzoru (002-hero.js), aby nikdy nevystoupalo za logo. */
.zh-hero__svetlo {
  position: absolute;
  left: 0;
  top: 0;
  width: max(76vw, 380px);
  height: min(30vw, 30vh);
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(closest-side, /* Zlatá hodinka 211: měkké jako v první verzi, ne výrazný kotouč */ rgba(255, 230, 188, 0.5) 0%, rgba(255, 185, 138, 0.22) 32%, rgba(247, 134, 127, 0.08) 62%, transparent 100%);
  will-change: transform, opacity;
}
.zh-hero__obzor {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--zh-obzor) - 11vh);
  height: 22vh;
  background: linear-gradient(180deg, transparent, rgba(253, 224, 181, 0.26) 50%, transparent);
  opacity: 0;
}
/* Bod 77: stín kolem obrazovky je stejný na všech stranách a plynulý. Dřív
   byl jen vlevo a vpravo lineárním přechodem, nahoře chyběl a na telefonu
   byly vidět svislé hrany, kde přechod začínal. Elipsa roste s tvarem okna,
   takže na úzkém telefonu i širokém PC má každý okraj stejnou tmu. */
.zh-hero__kraje {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse farthest-corner at 50% 50%, transparent 40%, rgba(7, 4, 14, 0.06) 50%, rgba(7, 4, 14, 0.16) 60%, rgba(7, 4, 14, 0.3) 71%, rgba(7, 4, 14, 0.44) 84%, rgba(7, 4, 14, 0.5600000000000001) 100%);
}
.zh-hero__mrak {
  position: absolute;
  height: 26px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(253, 224, 181, 0.34) 0%, rgba(253, 224, 181, 0.12) 55%, transparent 100%);
  opacity: 0;
}
.zh-hero__mrak--1 {
  left: 6%;
  top: 24%;
  width: 30%;
}
/* Zlatá hodinka 134: mraky nad logem a vedle něj, žádný světlý pruh za ním. */
.zh-hero__mrak--2 {
  right: 8%;
  top: 26%;
  width: 22%;
}
.zh-hero__mrak--3 {
  left: 4%;
  top: calc(var(--zh-obzor) - 6vh);
  width: 22%;
  height: 7px;
}
/* ─────────────────────────────  palmy  ───────────────────────────── */
.zh-hero__palmy {
  position: absolute;
  inset: 0;
  overflow: clip;
}
/* Blízké palmy skoro černé, vzdálené v oparu; barva je zapečená v obrázku. */
/* Bod 69: všechny palmy o kousek níž, střední víc (dřív lezly nad obzor). */
.zh-hero__palma {
  position: absolute;
  left: var(--zh-x);
  bottom: calc(-1vh - 10px);
  height: var(--zh-v);
  aspect-ratio: var(--zh-pomer);
  translate: -50% 4vh;
  transform-origin: 50% 100%;
  /* Bod 70: palma je hotový průhledný WebP s barvou i rozmazáním (vykreslený
     z SVG). Úvod počká na jeho dekódování a pak ho jen posouvá a otáčí; dřív ji
     kreslila maska z SVG s filtrem a úvod se sekal (bez palem jel skoro
     třikrát plynuleji). */
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: 50% 100%;
  /* Bod 88: ne úplná nula. Prohlížeč palmy vykreslí už při načítání, kdy se nic
     nehýbe; s nulou je kreslil až v 9,9 s naráz všech šest a úvod se na telefonu
     na 0,14 s zasekl. 0,4 % není na obloze vidět. */
  opacity: 0.004;
  will-change: transform, opacity;
}
/* jádro dává obrázkům max-width: 100 %, palma je ale vyšší než široká scéna */
.zh-hero .zh-hero__palma {
  max-width: none;
}
.zh-hero__palma--stredni {
  --zh-najezd: 16vw;
  bottom: calc(-4vh - 10px);
}
.zh-hero__palma--blizka {
  --zh-najezd: 30vw;
}
/* jemný vítr, každá palma jinou fází */
@keyframes zh-vitr {
  0%,
  100% {
    rotate: -0.5deg;
  }
  50% {
    rotate: 0.7deg;
  }
}
/* ────────────────  jméno, které se mění v logo  ──────────────────── */
/* Střed obrazovky: scéna s logem stojí přesně na 50 % výšky i šířky. */
.zh-hero__stred {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.zh-hero__h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.zh-hero__scena {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--zh-scena-s);
  aspect-ratio: 970 / 489;
}
/* Bod 88: úzké bezpatkové písmo se svislými tahy, jeho H a K mají stejnou
   stavbu jako nožičky znaku, takže proměna v logo dává smysl. Skript zná
   tvary písmen právě v tomhle řezu (Barlow Condensed 700). */
.zh-hero__napis {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: "Barlow Condensed", "Sora", sans-serif;
  font-size: clamp(40px, 8.4vw, 78px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: #FDE0B5;
  translate: calc(var(--zh-jan-posun, 0px) * -1) 0;
  /* Zlatá hodinka 134: písmena svítí jako trubice neonu. Záře je jeden filtr
     na celém nápisu, ne na každém písmenu (bod 88: filtr na třiceti
     písmenech sekal). Zlatá hodinka 210: stín jen jemně odliší nápis od nebe.
     Zlatá hodinka 219: stín nese text každého písmena (text-shadow), ne filtr
     celého nápisu; filtr se při každém snímku blikání písmen počítal znovu
     a na telefonu sekal úvod. */
}
.zh-hero__slovo {
  display: inline-flex;
}
.zh-hero__slovo--prijmeni {
  --zh-od: 0.3s;
  margin-left: 0.24em;
}
.zh-hero__slovo--prezdivka {
  --zh-od: 2.25s;
  position: relative;
}
/* Jan stojí v místě přezdívky, pravým okrajem tam, kde končí Honza. */
.zh-hero__slovo--krestni {
  --zh-od: 0.3s;
  position: absolute;
  top: 0;
  right: 0;
}
.zh-hero__pis {
  display: inline-block;
  opacity: 0;
}
/* Zlatá hodinka 102: písmena od začátku v barvách loga z patičky. Přechod je
   jeden přes celou scénu a každé písmeno z něj ukazuje svůj kus (polohu
   nastaví 002-hero.js), takže H a K mají přesně barvy znaku, ve který se
   promění. */
/* Zlatá hodinka 198: klasické bílé logo, žádný neon (Ondra, část 57:
   „Ta bílá verze … aby to nebyla neonová“). Písmena, znak i logo se jménem
   jsou bílé a od oblohy je odděluje měkký tmavý stín, ne záře. */
/* Zlatá hodinka 249: stín je rovnoměrná měkká aura úměrná velikosti scény,
   stejná u písmen i u loga, takže převzetí písmen znakem stín nezmění
   (Ondra, část 67: „ten stín musí být pěkný … důležitý aby to tam
   kontrastovalo ta bílá“). */
.zh-hero {
  --zh-stin-loga: 0 calc(var(--zh-scena-s) * 0.004) calc(var(--zh-scena-s) * 0.034) rgba(42, 16, 48, 0.44);
}
.zh-hero__pis {
  color: #FFFFFF;
  text-shadow: var(--zh-stin-loga);
}
/* ─────────────────────────────  logo  ────────────────────────────── */
.zh-hero__znak {
  position: absolute;
  inset: 0;
  isolation: isolate;
}
.zh-hero__zablesk {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130%;
  height: 240%;
  translate: -50% -50%;
  scale: 0.6;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 224, 181, 0.55) 0%, rgba(250, 129, 185, 0.22) 42%, transparent 70%);
  opacity: 0;
}
/* Bod 88: žár za písmeny, když se mění ve znak. Jen průhlednost a zvětšení
   hotového přechodu, žádný filtr, který by se překresloval s každým snímkem. */
.zh-hero__zhava {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  height: 290%;
  translate: -50% -50%;
  scale: 0.7;
  border-radius: 50%;
  /* Zlatá hodinka 134: růžový svit neonu na tmavé obloze, ne světlá skvrna,
     která by znaku brala kontrast. */
  background: radial-gradient(closest-side, rgba(253, 224, 181, 0.3) 0%, rgba(250, 176, 142, 0.12) 45%, transparent 100%);
  opacity: 0;
  pointer-events: none;
}
.zh-hero__tvary {
  position: absolute;
  inset: 0;
  filter: drop-shadow(var(--zh-stin-loga));
}
.zh-hero__morf,
.zh-hero__logo,
.zh-hero__logo-text {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  shape-rendering: geometricPrecision;
}
.zh-hero__morf {
  visibility: hidden;
}
/* Zlatá hodinka 102: znak má od převzetí do konce přechod loga z patičky
   (přechody v SVG z 002-hero.php), žádná bílá ani chladnutí. */
.zh-hero__morf-tvar {
  fill: #FFFFFF;
}
.zh-hero__plocha {
  fill: #FFFFFF;
}
/* Výřez: čisté logo dostane vodorovnou mezeru (clip-path s dírou), která jede
   od levého kraje doprava přesně tam, kde má logo se jménem mezeru pro text.
   Pod ním už stojí monogram varianty s textem. */
/* Zlatá hodinka 214: čisté logo leží nad logem se jménem, ne pod ním. Pod
   ním tak nevykukují hrany mezery se stínem jako pruhy přes celé logo a
   výřez odkrývá hotové logo se jménem přesně tam, kudy projel. */
.zh-hero__logo {
  z-index: 1;
  opacity: 0;
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, -4% var(--zh-rez-t, 46%), -4% var(--zh-rez-t, 46%), -4% var(--zh-rez-b, 54%), -4% var(--zh-rez-b, 54%), -4% var(--zh-rez-t, 46%));
}
@keyframes zh-rozevri {
  to {
    clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, -4% var(--zh-rez-t, 46%), 104% var(--zh-rez-t, 46%), 104% var(--zh-rez-b, 54%), -4% var(--zh-rez-b, 54%), -4% var(--zh-rez-t, 46%));
  }
}
.zh-hero__logo-text {
  opacity: 0;
}
.zh-hero__monogram,
.zh-hero__pismeno {
  fill: #FFFFFF;
}
.zh-hero__pismeno {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
/* ─────────────────────────────  claim  ───────────────────────────── */
/* claim stojí pod scénou, scéna tak zůstává přesně ve středu obrazovky */
.zh-hero p.zh-hero__claim {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + var(--zh-scena-s) * 0.252 + clamp(26px, 5vh, 46px));
  z-index: 3;
  margin: 0;
  max-width: none;
  font-size: clamp(12px, 2.2vw, 16px);
  font-weight: 700;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  /* Zlatá hodinka 216: negativ dřívější podoby, světlé písmo s tmavým stínem
     v barvách, které byly předtím obráceně (Ondra: „bílou s černým stínem“). */
  color: #FDE0B5;
  text-shadow: 0 0 18px rgba(42, 16, 48, 0.7), 0 1px 0 rgba(42, 16, 48, 0.4);
  opacity: 0;
}
/* ───────────────────────  časová osa úvodu  ──────────────────────── */
@keyframes zh-rozsvit {
  to {
    opacity: 1;
  }
}
/* Zlatá hodinka 230: slunce přichází měkce spolu s oblohou jako před bodem
   134, žádný kotouč, který v 7,2 s vyjede zpod obzoru (Ondra, část 63: „Teď
   je to takové moc výrazné“). */
@keyframes zh-svetlo-prijd {
  to {
    opacity: 0.6;
  }
}
@keyframes zh-mrak-prijd {
  to {
    opacity: 0.8;
  }
}
/* Bod 87: blízké a střední palmy najedou z boku a narovnají se, vzdálené
   vystoupí z oparu. Strana a délka nájezdu jsou u každé palmy. */
@keyframes zh-palma-prijd {
  0% {
    opacity: 0.004;
    translate: calc(-50% + var(--zh-strana, 0) * var(--zh-najezd, 0vw)) 3vh;
    transform: rotate(calc(var(--zh-strana, 0) * 6deg));
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    translate: -50% 0;
    transform: rotate(0deg);
  }
}
@keyframes zh-palma-prijd-daleka {
  0% {
    opacity: 0.004;
    translate: -50% 6vh;
  }
  100% {
    opacity: 0.6;
    translate: -50% 0;
  }
}
/* Bod 88: písmena se mění jen průhledností. Žádná změna šířky ani
   rozmazání, které by s každým snímkem přepočítávaly stránku (část 27:
   „chvilkama trochu sekaný“).
   Zlatá hodinka 134: písmeno se rozsvítí jako trubice neonu, dvakrát
   škytne a pak svítí; zhasne stejně, jedním probliknutím. */
@keyframes zh-pis-blik {
  0% {
    opacity: 0;
    translate: 0 0.12em;
  }
  70%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes zh-pis-vypni {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes zh-napis-srovnej {
  to {
    translate: 0 0;
  }
}
@keyframes zh-zhava {
  0% {
    opacity: 0;
    scale: 0.7;
  }
  35% {
    opacity: 0.75;
    scale: 0.9;
  }
  62% {
    opacity: 1;
    scale: 1;
  }
  82% {
    opacity: 0.9;
    scale: 1.04;
  }
  100% {
    opacity: 0;
    scale: 1.12;
  }
}
@keyframes zh-schovej {
  to {
    opacity: 0;
  }
}
/* Zlatá hodinka 134: záblesk dohasne úplně, za neonem nezůstane světlá skvrna. */
@keyframes zh-zablesk {
  0% {
    opacity: 0;
    scale: 0.6;
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    scale: 1;
  }
}
@keyframes zh-objev {
  to {
    opacity: 1;
  }
}
/* Bod 88: bez rozmazání, filtr na třiceti písmenech sekal výřez (snímky 55 ms). */
@keyframes zh-pismeno {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.6);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes zh-hero-prijd {
  to {
    opacity: 1;
    translate: 0 0;
  }
}
/* Zlatá hodinka 134: noc, od 1 s modrá hodinka, od 7,2 s zlatá hodinka se
   sluncem, oparem u obzoru a mraky. */
/* Zlatá hodinka 199: obloha se rozsvěcí celou dobu úvodu z černofialové do
   Miami oblohy, jako před bodem 134. Modrá hodinka mezi tím odpadla. */
.zh-hero__modra {
  display: none;
}
.zh-hero--start .zh-hero__svit {
  animation: zh-rozsvit 7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}
.zh-hero--start .zh-hero__svetlo {
  animation: zh-svetlo-prijd 6s cubic-bezier(0.4, 0, 0.2, 1) 1s forwards;
}
.zh-hero--start .zh-hero__obzor,
.zh-hero--start .zh-hero__mrak {
  animation: zh-mrak-prijd 3.4s ease 3.2s forwards;
}
.zh-hero--start .zh-hero__palma {
  animation: zh-palma-prijd 2.6s cubic-bezier(0.16, 1, 0.3, 1) both, zh-vitr 9s ease-in-out infinite;
  animation-delay: calc(var(--zh-po-logu) + var(--zh-k, 0) * 0.14s), calc(var(--zh-k, 0) * -1.7s);
}
.zh-hero--start .zh-hero__palma--daleka {
  animation-name: zh-palma-prijd-daleka, zh-vitr;
}
/* Bod 88: jméno se mění pozvolna a nic se v něm nepřeskládává: Jan Kotlík
   (0,3 s), Jan zhasne, rozsvítí se Honza a nápis se srovná na střed (2 s),
   písmena kolem iniciál zhasnou a za H s K se rozžhaví světlo (3,2 s). Ve
   4,2 s je převezme skript a promění je ve znak loga. Zlatá hodinka 134:
   písmena se rozsvěcují a zhasínají jako neon, jedno po druhém. */
.zh-hero--start .zh-hero__pis {
  animation: zh-pis-blik 0.8s linear forwards;
  animation-delay: calc(var(--zh-od, 0.3s) + var(--zh-i, 0) * 0.08s);
}
.zh-hero--start .zh-hero__slovo--krestni .zh-hero__pis {
  animation: zh-pis-blik 0.8s linear forwards, zh-pis-vypni 0.5s linear forwards;
  animation-delay: calc(0.3s + var(--zh-i, 0) * 0.08s), calc(2s + var(--zh-i, 0) * 0.06s);
}
.zh-hero--start .zh-hero__slovo--prezdivka > .zh-hero__pis:not(.zh-hero__pis--ini),
.zh-hero--start .zh-hero__slovo--prijmeni > .zh-hero__pis:not(.zh-hero__pis--ini) {
  animation: zh-pis-blik 0.8s linear forwards, zh-pis-vypni 0.6s linear forwards;
  animation-delay: calc(var(--zh-od, 0.3s) + var(--zh-i, 0) * 0.08s), calc(3.2s + var(--zh-i, 0) * 0.035s);
}
.zh-hero--start .zh-hero__napis {
  animation: zh-napis-srovnej 1.1s cubic-bezier(0.65, 0, 0.35, 1) 2s forwards;
}
/* Převzetí: ve stejném snímku zmizí písmena H a K a na jejich místě stojí
   stejný tvar ze skriptu. */
.zh-hero--morf .zh-hero__pis--ini {
  visibility: hidden;
}
.zh-hero--morf .zh-hero__morf {
  visibility: visible;
}
.zh-hero--start .zh-hero__zhava {
  animation: zh-zhava 5s cubic-bezier(0.4, 0, 0.2, 1) 3.3s forwards;
}
.zh-hero--start .zh-hero__morf {
  animation: zh-schovej 0.01s linear 8.050000000000001s forwards;
}
.zh-hero--start .zh-hero__zablesk {
  animation: zh-zablesk 2s ease-out 7.4s forwards;
}
.zh-hero--start .zh-hero__logo-text {
  animation: zh-objev 0.01s linear 7.95s forwards;
}
/* Skutečné logo naskočí přes tvar ze skriptu, který je s ním totožný, a pak
   jím výřez projede zleva doprava (část 27: „výřez v tom logu ... pojede
   zleva doprava“). Písmena jména naskakují za hranou výřezu. */
.zh-hero--start .zh-hero__logo {
  animation: zh-objev 0.01s linear 7.95s forwards, zh-rozevri 1.1s cubic-bezier(0.37, 0, 0.63, 1) 8.050000000000001s forwards, zh-schovej 0.01s linear 9.199999999999999s forwards;
}
.zh-hero--start .zh-hero__pismeno {
  animation: zh-pismeno 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(8.050000000000001s + var(--zh-t, 0) * 1s);
}
/* Zlatá hodinka 198: neonová cedule na konci úvodu je pryč, zůstává logo. */
.zh-hero .zh-hero__neon {
  display: none;
}
.zh-hero--start p.zh-hero__claim {
  animation: zh-hero-prijd 1s ease calc(var(--zh-po-logu) + 0.3s) forwards;
  translate: 0 12px;
}
/* Zlatá hodinka 197 a 219: animace sekcí pod úvodem během něj zastavuje
   002-hero.js přes Web Animations (zastavPodUvodem), ne pravidlo pro všechny
   potomky; jeho sundání přepočítávalo styl celé stránky naráz. */
/* ─────────────  přeskočení nebo příchod z QR: rovnou konec  ─────────── */
.zh-hero--hned .zh-hero__palma {
  opacity: 1;
  translate: -50% 0;
  animation: zh-vitr 9s ease-in-out infinite;
  animation-delay: calc(var(--zh-k, 0) * -1.7s);
}
.zh-hero--hned .zh-hero__svit {
  opacity: 1;
  animation: none;
}
.zh-hero--hned .zh-hero__palma--daleka {
  opacity: 0.6;
}
.zh-hero--hned .zh-hero__svetlo {
  opacity: 0.6;
  animation: none;
}
.zh-hero--hned .zh-hero__mrak,
.zh-hero--hned .zh-hero__obzor {
  opacity: 0.8;
  animation: none;
}
.zh-hero--hned .zh-hero__napis,
.zh-hero--hned .zh-hero__morf,
.zh-hero--hned .zh-hero__zhava,
.zh-hero--hned .zh-hero__logo {
  display: none;
}
.zh-hero--hned .zh-hero__zablesk {
  opacity: 0;
  animation: none;
}
.zh-hero--hned .zh-hero__logo-text,
.zh-hero--hned .zh-hero__pismeno,
.zh-hero--hned p.zh-hero__claim {
  opacity: 1;
  translate: 0 0;
  transform: none;
  animation: none;
}
/* Po úvodu řídí slunce kurzor: výš je jasněji, níž hlubší západ. Výška je
   poloha slunce v jeho pásu u obzoru, 0 dole a 1 nahoře (002-hero.js). */
.zh-hero--zive .zh-hero__svetlo {
  animation: none;
  opacity: calc(0.45 + var(--zh-vyska, 0.5) * 0.3);
  transition: opacity 0.6s ease;
}
.zh-hero--zive .zh-hero__svit {
  animation: none;
  opacity: 1;
}
/* Světlo oblohy podle kurzoru bez filtru: tmavý a teplý závoj nad svitem. */
.zh-hero__svit::before,
.zh-hero__svit::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.zh-hero__svit::before {
  background: #0B0612;
}
.zh-hero__svit::after {
  background: radial-gradient(90% 26% at 50% var(--zh-obzor), rgba(255, 179, 138, 0.4), transparent 75%);
}
.zh-hero--zive .zh-hero__svit::before {
  opacity: calc(0.22 - var(--zh-vyska, 0.5) * 0.22);
}
.zh-hero--zive .zh-hero__svit::after {
  opacity: calc(var(--zh-vyska, 0.5) * 0.35 - 0.08);
}
@media (prefers-reduced-motion: reduce) {
  .zh-hero__palma {
    animation-iteration-count: 1 !important;
  }
}
/* ─────────────────────────────  mobil  ───────────────────────────── */
@media (max-width: 767px) {
  .zh-hero {
    --zh-scena-s: 78vw;
  }
}
@media (max-width: 767px) {
  /* Telefon: dvě velké palmy rámují kraje, dvě vzdálené dole ve středu.
     Listy blízkých palem končí nad logem: palmy jsou vyšší než okno, koruny
     přesahují horní hranu a rámují rohy (bod 30). */
  .zh-hero__palma--c1 {
    left: -18%;
    height: 114vh;
  }
  .zh-hero__palma--c2 {
    left: 116%;
    height: 104vh;
  }
  /* Bod 87: střední palmy na telefonu opravdu pryč. Jádro dává obrázkům
     display: block s vyšší vahou, takže dřív zůstaly a scéna měla šest
     zrcadlových palem. Vzdálené stojí každá jinde a jinak vysoko. */
  .zh-hero .zh-hero__palma--stredni {
    display: none;
  }
  .zh-hero__palma--c5 {
    left: 24%;
    height: 31vh;
  }
  .zh-hero__palma--c6 {
    left: 83%;
    height: 21vh;
  }
}