/* ALVILA, jedna scena a nic vic.
   Cela stranka je jeden obraz: obloha jako kotouc, ktery se otaci pod rukou,
   monolity s nazvem studia na plani a tri domeny, ktere se v ruznych fazich
   dne vynoruji. Paleta: papirova bila, inkoustova cern a jedna signalni barva
   (limetka) pro slunce. Jedine pismo je Anton, i v drobnych textech. */

:root {
  --av-paper: #f6f5f1;
  --av-ink: #16150f;
  --av-signal: #c8ff2e;
  /* jedine pismo dokumentu, vcetne drobnych textu */
  --av-font: 'Anton', 'Archivo Black', 'Haettenschweiler', 'Arial Narrow Bold', Impact, sans-serif;
  /* Druhy rez jen pro slogany: Anton ma jedinou tloustku, takze v nem nejde
     odlisit slovo "web" tucnejsim pismem. Archivo ma skutecne rezy 300 a 700. */
  --av-font-say: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --av-ease: cubic-bezier(.2, .7, .2, 1);
}

* { -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
  /* stranka je jen scena, neni kam scrollovat */
  overflow: hidden;
}

body {
  background: var(--av-paper);
  color: var(--av-ink);
  font-family: var(--av-font);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--av-signal); color: var(--av-ink); }

/* ===== scena ===== */

.av-scene {
  --av-sky-top: #dee2dc;
  --av-sky-bot: #f6f5f1;
  --av-sky-glow: #f6f5f1;
  --av-ground: #dcd9cf;
  --av-sign-fg: #16150f;
  --av-fg: #16150f;
  /* plne kryci dvojice pro drobne texty: podklad a barva kresby na nem */
  --av-fg-solid: #16150f;
  --av-fg-on-solid: #f6f5f1;
  --av-sun-x: 50%;
  --av-sun-e: 1;
  --av-moon-x: 50%;
  --av-moon-e: -1;
  --av-stars: 0;
  --av-sh-op: .14;
  --av-sh-len: .16;
  --av-sh-skew: 0deg;
  --av-sh-blur: 1px;
  --av-horizon: 26%;
  --av-arc: 56%;
  position: relative;
  display: block;
  width: 100%;
  /* dvh kvuli adresnimu radku mobilu, vh zustava jako fallback pro stare prohlizece */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: linear-gradient(var(--av-sky-top), var(--av-sky-bot) 58%, var(--av-sky-glow));
  color: var(--av-fg);
  /* pan-y nechava svisly scroll prohlizeci, krouzeni bereme my */
  touch-action: pan-y;
  isolation: isolate;
}

.av-sky { position: absolute; inset: 0; }

/* Hvezdna klenba je jedno SVG: skript do nej nakresli hvezdy a souhvezdi
   jednou a pak uz jen otaci celou skupinou, takze pri kazdem snimku
   neprochazi DOM. Vetsi nez scena, aby pri otoceni nevykoukly rohy. */
.av-stars {
  position: absolute;
  left: -30%; top: -30%; width: 160%; height: 160%;
  opacity: var(--av-stars);
  transform: rotate(var(--av-dial, 0deg));
  pointer-events: none;
  overflow: visible;
}
.av-star { fill: var(--av-paper); }

/* Spojnice souhvezdi: jen naznak obrazce, ne kresba pres oblohu. Vlasova
   sirka a nizka sytost drzi caru decentni i proti nejtmavsi obloze; jasne
   zustavaji hvezdy, cara je mezi nimi jen tuseny tah.
   vector-effect drzi tloustku v pixelech bez ohledu na to, jak je SVG
   preskalovane pres viewBox, jinak by cara na sirokem okne ztloustla. */
.av-conline {
  stroke: var(--av-paper);
  stroke-width: .8;
  stroke-opacity: .24;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* Zadne spojnice mezi hvezdami: souhvezdi nese jen presna relativni poloha
   hvezd a jejich jas, presne jak obloha vypada doopravdy. */

/* Slunce i jeho zare beru barvu ze skriptu, ktery prochazi nerealnou paletu. */
.av-sun {
  position: absolute; z-index: 1;
  border-radius: 50%;
  width: clamp(28px, 3.6vw, 44px); height: clamp(28px, 3.6vw, 44px);
  left: var(--av-sun-x);
  bottom: calc(var(--av-horizon) + var(--av-sun-e) * var(--av-arc));
  /* Mesicni iluze: kotouc je nejvetsi u obzoru a nejmensi v zenitu.
     Skalujeme transformem, ne rozmery, aby to neseka. Zare je box-shadow
     teleса, takze se zvetsuje spolu s nim. */
  transform: translate(-50%, 50%) scale(var(--av-sun-scale, 1));
  background: var(--av-sun, var(--av-signal));
  box-shadow: 0 0 36px 10px var(--av-sun-glow, rgba(200, 255, 46, .32));
}
/* Mesic a hvezdy zustavaji chladne a neutralni: kontrast proti barevnemu
   slunci je zamer, obarvit je by cely efekt rozmelnilo. Fazi kresli maska
   uvnitr SVG, skript meni jen jeji elipsu. */
/* Opar sedi na tomtez miste jako mesic a zvetsuje se s nim (mesicni iluze),
   jen je nekolikrat sirsi. Dva prekryvne kruhy: tesny jasnejsi kolem kotouce
   a siroky slaby dozvuk, takze opar nema viditelny okraj. */
.av-moon-halo {
  position: absolute; z-index: 0;
  width: 30px; height: 30px;
  left: var(--av-moon-x);
  bottom: calc(var(--av-horizon) + var(--av-moon-e) * var(--av-arc));
  transform: translate(-50%, 50%) scale(calc(var(--av-moon-scale, 1) * 5.5));
  border-radius: 50%;
  /* Barva opary je papirova, ne barva slunce: mesic sviti odrazenym
     svetlem a nereálná paleta patri slunci, ne jemu. */
  background:
    radial-gradient(circle,
      rgba(246, 245, 241, .20) 0%,
      rgba(246, 245, 241, .10) 18%,
      rgba(246, 245, 241, .04) 34%,
      transparent 62%);
  /* Opar je videt jen v noci (jako hvezdy) a sytost mu dava faze mesice. */
  opacity: calc(var(--av-stars) * var(--av-moon-lit, 1));
  pointer-events: none;
}

.av-moon {
  position: absolute; z-index: 1;
  width: 30px; height: 30px;
  left: var(--av-moon-x);
  bottom: calc(var(--av-horizon) + var(--av-moon-e) * var(--av-arc));
  /* tataz mesicni iluze jako u slunce: kratery jsou uvnitr SVG, takze se
     zvetsuji s kotoucem a nerozjedou se */
  transform: translate(-50%, 50%) scale(var(--av-moon-scale, 1));
  opacity: var(--av-stars);
  overflow: visible;
}

/* Zeme prekryva spodek monolitu (lezi nad nimi), proto pismena konci
   u obzoru a nejdou docist. Zaroven je to schranka stinu: overflow ho
   orizne u obzoru, takze stin nikdy nevyleze na oblohu. */
.av-ground {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  height: var(--av-horizon);
  background: var(--av-ground);
  overflow: hidden;
}

/* Monolity: Anton v obrovske velikosti. Prostrkani je NULOVE, ne zaporne:
   pismena se uz neprekryvaji a slovo jde precist, ale zustavaji tesne u sebe,
   takze si napis drzi hmotu telesa na plani. Zaporne prostrkani z nej delalo
   slepenou masu, ktera nesedela s vlastnim stinem.
   Spodni tretina pismen mizi pod obzorem, cimz zmizi paty pismen a zustanou
   bloky vrhajici stin. */
.av-sign {
  position: absolute;
  left: 50%;
  font-size: clamp(5.5rem, 31vw, 22rem);
  line-height: .78;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--av-sign-fg);
  user-select: none;
}

/* Hmota stoji PATAMI NA OBZORU, nezanoruje se do zeme. Drive byla zanorena
   o tretinu vysky, jenze prave v te tretine lezi patka L a pricka A: zem je
   ukrajovala jen na hmote, ne na stinu, a oba tak vypadaly jako jiny rez
   pisma. Ted se tvar pismen shoduje s vlastnim stinem.
   Odhalovani: --av-reveal jde od 0 (zasunuto pod zemi) do 1 (stoji na zemi).
   Pri 0 je hmota posunuta o celou svou vysku dolu, takze ji zem (z-index 3)
   uplne prekryje. Jen transform, zadne prepocty rozmeru. */
.av-sign--body {
  z-index: 2;
  bottom: var(--av-horizon);
  /* Skryti posouva o 125 % vysky, ne o 100 %: Anton ma line-height .78, takze
     glyfy presahuji svuj radkovy ramec a pri posunu o presnou vysku ramce
     zustavaly vrsky pismen kouskem nad obzorem (namereno 17 px). */
  transform: translate(-50%, calc((1 - var(--av-reveal, 1)) * 125%));
}

/* Stin ma patu presne tam, kde ma patu hmota, tedy na care obzoru.
   Uvnitr zeme je to jeji horni hrana, proto top: 0 a spodni hrana ramce
   posunuta na tuto caru pres translateY(-100%). Origin je pak SPODNI HRANA
   ramce (50% 100%), tedy pata objektu: odtud se stin zrcadli dolu a zkosi.
   Zadny dalsi svisly posun, jinak by se stin od paty odlepil. */
.av-sign--cast {
  top: 0;
  transform: translate(-50%, -100%);
}

.av-sign-word {
  display: block;
  /* jemna hrana nahore: telesa maji svetlou stranu privracenou k obloze */
  text-shadow: 0 -.012em 0 rgba(246, 245, 241, .16);
}

/* Zrcadleni a zkoseni kolem paty. Delku, sklon i rozmazani rizi skript pres
   promenne, vse jen v transformu a filtru, nic v layoutu.
   Poradi zalezi: nejdriv sklopeni na zem, pak zkoseni podle strany slunce. */
/* Stin roste s hmotou: delka se nasobi odhalenim, takze nad zasunutym
   napisem nikdy nelezi cely stin. Pata zustava na obzoru po celou dobu,
   protoze origin je porad spodni hrana ramce. */
/* Stin se VYSOUVA stejne jako hmota, nejen prodluzuje.
   Drive se cely stin skaloval o --av-reveal, takze pri polovicnim vytazeni
   byl na zemi zmacknuty obraz CELEHO slova, jenze nad zemi byla videt jen
   jeho pulka: stin tedy patril necemu jinemu, nez co ho vrhalo.

   Ted je uvnitr ramce stin posunuty o tutez cast sve vysky, o kterou je
   zanorena hmota, a ramec ho orizne. Nad obzorem je proto videt tolik
   pismene, kolik je videt i nahore, jen zrcadlene: stin presne odpovida
   tomu, co ho vrha.

   Posun je UVNITR sklopeneho systemu: scaleY(-1) uz osu y obratilo, takze
   kladny translateY posouva stin smerem od obzoru zpet "pod zem". Nasobime
   ho 1.25 stejne jako u hmoty, protoze Anton presahuje svuj radkovy ramec.
   Orez obstara .av-ground, uvnitr ktere stin lezi. */
.av-sign-shadow {
  display: block;
  color: var(--av-ink);
  opacity: var(--av-sh-op);
  transform-origin: 50% 100%;
  /* Poradi zalezi a cte se zprava doleva: nejdriv posun (zasunuti stinu pod
     zem), az potom zkoseni a sklopeni. Kdyz se zkosilo jako prvni, sminalo
     se kolem stredu VLASTNIHO ramce, jenze pri castecnem vysunuti uz je
     videt jina cast ramce, takze se stin vuci pismenu posunul do strany
     (namereno az 14 px, a smer se obracel se sluncem).
     Takhle zkoseni pusobi az na posunuty stin a bod, kolem ktereho se sminá,
     zustava na obzoru, tedy u pat pismen: stin proto lícuje s hmotou pri
     jakemkoli vysunuti a pri plnem vysunuti je posun nulovy. */
  transform: scaleY(calc(-1 * var(--av-sh-len)))
             skewX(var(--av-sh-skew))
             translateY(calc((1 - var(--av-reveal, 1)) * 125%));
  filter: blur(var(--av-sh-blur));
  will-change: transform, opacity;
}

/* ===== hodiny: dve rucicky, zadny cifernik =====
   Stoji v levem hornim rohu sceny, samostatne. Casova osa je vlastni prvek
   uprostred okna, viz nize: meridla se nedeli o jeden pruh, protoze kazde
   patri jinam. */

/* Rucicky se otaci kolem sve paty, proto je kotva bod o nulovem rozmeru.
   Ramec kolem ni drzi misto v rohu a da rucickam stred, kolem ktereho krouzi. */
.av-clock-box {
  position: absolute; z-index: 8;
  top: clamp(2rem, 5vh, 3.6rem); left: clamp(2.4rem, 6vw, 5rem);
  width: clamp(28px, 3.6vw, 40px);
  height: clamp(28px, 3.6vw, 40px);
  pointer-events: none;
}
.av-clock {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
}
.av-clock-hand {
  position: absolute; left: 0; bottom: 0;
  width: 2px;
  border-radius: 999px;
  /* rucicka je v barve, ktera kontrastuje s oblohou: pres den inkoust,
     v noci papir. Kolem ni mekky prah v barve opacne, aby drzela citelnost
     i tam, kde prejizdi pres hmotu monolitu. */
  background: var(--av-fg-solid);
  transform-origin: 50% 100%;
  /* uhel pocita skript pruzinou, CSS jen otaci */
  transform: translateX(-50%) rotate(var(--av-hand, 0deg));
  filter: drop-shadow(0 0 3px var(--av-fg-on-solid)) drop-shadow(0 0 2px var(--av-fg-on-solid));
}
.av-clock-hand--h { height: clamp(17px, 2.2vw, 24px); }
.av-clock-hand--m { height: clamp(28px, 3.6vw, 40px); }

/* ===== casova osa =====
   Pasmo jednoho roku, ktere jede pod stojicim ukazatelem. Ticks jsou mesice,
   delsi tick patri lednu. Cislo roku je v pasmu jen JEDNO v jednu chvili:
   odchazejici se odsouva a miz, prichazejici najizdi, ale nikdy nestoji
   dva cele letopocty vedle sebe (viz .av-tl-year nize).

   Sirka pasma odpovida presne jednomu roku, posun rizi skript promennou
   --av-tl-x v teto sirce, takze prepocet dnu na pixely patri skriptu
   a CSS jen posouva. */

.av-tl {
  /* Vodorovne uprostred okna, ve stejne vysce jako hodiny v rohu. Stred osy
     (a s nim ukazatel) tak sedi presne na svisle ose sceny. */
  position: absolute; z-index: 8;
  top: clamp(2rem, 5vh, 3.6rem);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(9rem, 17vw, 15rem);
  height: clamp(28px, 3.6vw, 40px);
  pointer-events: none;
  /* Kraje se vytrácejí, aby ticks a letopocty na okrajich nemizely skokem
     a osa nepusobila jako utnuty kus. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  overflow: hidden;
}

/* Pasmo je sirsi nez okno osy: drzi tri roky, aby pri posunu bylo vzdy
   z ceho brat na obou stranach. Posun je v procentech sirky jednoho roku. */
.av-tl-track {
  position: absolute; inset: 0;
  transform: translateX(var(--av-tl-x, 0px));
  will-change: transform;
}

/* Tick jednoho mesice. Vyska rozlisuje leden od ostatnich, takze je v ose
   poznat zacatek roku i bez cisla. */
.av-tl-tick {
  position: absolute; bottom: 38%;
  width: 1px; height: 5px;
  margin-left: -.5px;
  background: var(--av-fg-solid);
  opacity: .45;
}
.av-tl-tick--jan { height: 11px; opacity: .8; }

/* Letopocet sedi u sveho lednoveho ticku. Pruhlednost rizi skript tak, aby
   v jednu chvili byl plne videt nejvys jeden: sousedni se do plne sytosti
   nikdy nedostane. */
.av-tl-year {
  position: absolute; top: 0;
  transform: translateX(-50%);
  font-size: clamp(.62rem, 1.15vw, .8rem);
  letter-spacing: .16em;
  color: var(--av-fg-solid);
  opacity: var(--av-year-op, 0);
  white-space: nowrap;
}


/* Ukazatel stoji uprostred osy a nehybe se: pod nim jede cas.
   Je nizsi nez osa a sedi pri jejim spodnim okraji, aby se hrot vesel
   dovnitr: osa ma overflow hidden kvuli pasmu a cokoli nad jejim okrajem
   by se orizlo. */
.av-tl-now {
  position: absolute; left: 50%; bottom: 20%;
  width: 1px; height: 46%;
  margin: 0 0 0 -.5px;
  background: var(--av-fg-solid);
  opacity: .9;
}
/* Hrot na spici ukazatele, aby bylo zrejme, ze ukazuje do osy. */
.av-tl-now::after {
  content: "";
  position: absolute; left: 50%; top: -3px;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--av-fg-solid);
}

/* Uzka obrazovka: osa zustava, jen se zuzi. Hodiny uz s ni nesdili jeden
   pruh (jsou v levem rohu, osa uprostred), takze si nemaji kde prekazet. */
@media (max-width: 700px) {
  /* Osa je stred okna, hodiny levy roh: sirka musi nechat misto obema
     stranam, jinak by se na nejuzsich displejich potkaly. */
  .av-tl { width: min(52vw, 14rem); }

  /* Uzky displej: slogan dostane mensi stupen a sevrenejsi prostrkani, aby
     se rucne delene radky vesly na jeden radek kazdy. */
  .av-say { font-size: clamp(.78rem, 4vw, 1.1rem); letter-spacing: .08em; }
}

.av-doms,
.av-says {
  position: absolute; z-index: 7;
  /* Svisle UPROSTRED OBLOHY. Obloha saha od horni hrany k obzoru, tedy
     100% - var(--av-horizon); jeji pulka je polovina te vysky. Nazev pak
     stoji ve stredu volne plochy, ne natlaceny k horni hrane.
     Posun o -50% vlastni vysky srovna stred nazvu, ne jeho horni hranu. */
  left: 50%;
  /* Stred oblohy. Na nizkem sirokem okne saha vytazeny napis az do pulky
     oblohy, proto je tu jeste strop: nazev nesmi klesnout pod vrchol
     monolitu. Vyska napisu je clamp(5.5rem, 31vw, 22rem) krat line-height
     .78, k tomu mala rezerva. min() vybere to vyssi z obou mist. */
  top: min(
    calc((100% - var(--av-horizon)) / 2),
    calc(100% - var(--av-horizon) - clamp(5.5rem, 31vw, 22rem) * .78 - 3rem)
  );
  transform: translate(-50%, -50%);
  max-width: calc(100% - 2rem);
  margin: 0; padding: 0;
  display: grid;
  justify-items: center;
  /* Vsechny domeny sdili jednu bunku mrizky: v jednu chvili je videt stejne
     jedina a nesmi si navzajem posouvat radek. */
  grid-template-areas: "dom";
  /* seznam sam pohyb nechytá, aby kotouc sel otacet i pres nej;
     klikatelne jsou jen viditelne odkazy (viz .av-dom.is-near a) */
  pointer-events: none;
}

/* ===== slogany, ktere se objevuji ve dne =====
   Protejsek domen: co v noci patri webu, ve dne patri sloganu. Stridaji se
   po dnech stejne jako domeny a lezi na tomtez miste oblohy, takze scena ma
   porad jen jedno misto, kam se diva. */
.av-say {
  grid-area: dom;
  opacity: var(--av-say-op, 0);
  /* Sirku bloku urcuje nejsirsi radek: ten je v toku jako max-content,
     ostatni se do te sirky roztahnou pres justify. Bez toho by blok nemel
     k cemu radky roztahovat a justify by je nechal na miste. */
  width: max-content;
  max-width: calc(100vw - 2rem);
  /* Slogan bezi v tenkem rezu, aby vyniklo jedine tucne slovo v nem. */
  font-family: var(--av-font-say);
  font-weight: 300;
  font-size: clamp(.95rem, 2.2vw, 1.6rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--av-fg-solid);
}

/* Jeden radek sloganu. Vsechny radky sloganu maji byt stejne siroke.

   Nejde to udelat samotnym CSS: text-align: justify roztahuje jen MEZERY,
   takze kratky radek dosahne sirky jedine tim, ze se mezery nafouknou do
   der (namereno az 11.5 nasobku bezne mezery, "WEB____JE____NAS"), a zadna
   vlastnost neumi "roztahni radek presne na tuhle sirku". Chybejici sirku
   proto skript rozpocita do PROSTRKANI mezi pismena.

   scaleX by take sedel na sirku, ale deformuje kresbu pisma (pri dvojnasobku
   ma kratky radek viditelne tlustsi tahy nez radek pod nim). Prostrkani tvar
   pismen nemeni, jen je odsune od sebe. */
.av-say-l {
  display: block;
  text-align: center;
}

/* Roztazeni nese vnitrni obal, ne radek: radek je blok pres celou sirku
   sloganu, kdezto obal je presne tak siroky jako text. Prostrkani na nej
   dopocita a nastavi skript. */
.av-say-x {
  display: inline-block;
}

/* Slovo "web" v kazdem sloganu. Zvyrazuje ho JEN tloustka pisma, zadna
   linka ani barva navic: kolem nej bezi rez 300, samo ma 700. Rozdil je
   zretelny, ale zustava uvnitr textu a nedela ze sloganu ceduli. */
.av-say-w {
  font-weight: 700;
}

/* Fyzikalni vzorec. Na rozdil od ostatnich sloganu tu na velikosti pismen
   zalezi: m je hmotnost a c rychlost svetla, obe znacky jsou definovane
   malym pismenem. Proto tady rusime spolecne uppercase z .av-say.

   Kurziva je typograficka konvence pro promenne ve vzorci: sazi se skloneni,
   kdezto cislice exponentu zustava stojata. Rez 1,300 proto nacitame z
   Google Fonts; bez nej by prohlizec sklon jen nafingoval zkosenim. */
.av-say-var {
  text-transform: lowercase;
  font-style: italic;
}

/* Mocnina u "web = mc2". Vlastni line-height 0 je tu proto, ze nadsazeny
   index by jinak rozestoupil radkovani prave tohoto sloganu a ten by mel
   jiny rozestup nez ostatni. Posun resime pres bottom, ne pres
   vertical-align: super, aby sla vyska doladit k Antonu. */
.av-say-sup {
  font-size: .62em;
  line-height: 0;
  position: relative;
  bottom: .52em;
  vertical-align: baseline;
}
.av-dom {
  grid-area: dom;
  /* Pruhlednost pocita skript z faze dne snimek po snimku, proto tu neni
     zadny prechod: ten by za otacenim kotouce jen zaostaval. */
  opacity: var(--av-dom-op, 0);
}
/* Holy text bez podkladu a dekorace, stejne jako firemni udaje.
   Stin domena nevrha: lezi na obloze, ne na zemi, a vrzeny stin by tvrdil,
   ze pod ni je plocha, na kterou dopada. Citelnost proti obloze drzi barva
   pisma prepinana podle jasu oblohy. */
.av-dom a {
  display: inline-block;
  pointer-events: none;
  font-size: clamp(1.1rem, 3.4vw, 2.4rem);
  /* Anton je displejovy rez, potrebuje prostrkani, at nesplyva v hmotu */
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--av-fg-solid);
  /* Pismena se pri letu posouvaji mimo radek, nesmi ale roztahovat scenu
     ani rolovat stranku. */
  white-space: nowrap;
}
/* Jedno pismeno, jeden ulomek meteoru. Drzi si misto v radku (proto
   inline-block a zadna zmena toku), letí jen transformace. */
/* Klikat jde jen do zrejme viditelne domeny, jinak by mysi prekazel
   neviditelny terc. Tridu is-near pridava skript. */
.av-dom.is-near a { pointer-events: auto; }
.av-dom.is-near a:hover,
.av-dom a:focus-visible { transform: translateY(-3px); }

/* Fokus z klavesnice musi domenu zviditelnit, i kdyz je zrovna mimo svou
   noc: jinak by Tab skakal na neviditelny odkaz. */
.av-dom:focus-within { opacity: 1; }
.av-dom:focus-within a { pointer-events: auto; }
.av-dom a:focus-visible {
  outline: 3px solid var(--av-signal);
  outline-offset: 6px;
  border-radius: 4px;
}

/* Kdo si vyzadal klid, ma prechod pruhlednosti mekky a bez pohybu. */
@media (prefers-reduced-motion: reduce) {
  .av-dom { transition: opacity .3s linear; }
}

/* ===== ovladani ===== */

/* Jezdec je nativni range pres celou scenu: klavesnice a ctecka zadarmo.
   Vizual nad nim je jen obraz, krouzeni mysi resi skript. */
.av-scene-range {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: crosshair;
  touch-action: pan-y;
}

/* Kdyz je videt domena, vede kliknuti kamkoli do sceny na jeji stranku,
   takze to musi byt na kurzoru poznat. Tridu prepina skript. */
.av-scene.is-clickable .av-scene-range { cursor: pointer; }

.av-scene-range:focus-visible { outline: none; }
.av-scene-focus {
  position: absolute; inset: 0; z-index: 6;
  pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--av-ink), inset 0 0 0 7px var(--av-signal);
  opacity: 0; transition: opacity .2s ease;
}
.av-scene-range:focus-visible ~ .av-scene-focus { opacity: 1; }

/* ===== jednoradkova paticka =====
   Pruh, ktery po nacteni lezi cely pod spodni hranou sceny a vyjizdi az
   pri scrollovani. Zadny podklad, zadna pilulka, jen radek textu.
   Posun ridi skript pres --av-foot-y (0 = zasunuta, 1 = vysunuta), protoze
   pohyb pocita pruzina ve smycce, ne CSS transition. */

.av-foot {
  position: absolute; z-index: 9;
  left: 0; right: 0; bottom: 0;
  /* vlastni vyska pruhu; translate o 100 % ji schova presne pod hranu */
  padding: .85rem 1rem;
  transform: translateY(calc((1 - var(--av-foot-y, 0)) * 100%));
  /* zasunuta paticka nesmi chytat mys ani fokus mysi; odkaz uvnitr si
     pointer-events zapina sam, aby sel kliknout, jakmile je videt */
  pointer-events: none;
  will-change: transform;
}

.av-foot-line {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: center;
  gap: .4em 1.6em;
  margin: 0;
  text-align: center;
  font-size: clamp(.5rem, 1.15vw, .62rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
  /* Barvu prepina skript podle jasu zeme pod pruhem, aby paticka drzela
     kontrast ve dne i v noci. */
  color: var(--av-foot-fg, var(--av-paper));
}

/* Bez podtrzeni: podtrzena linka je UI prvek, ktery do fyzikalni sceny
   nepatri. Fokus proto resi obrys. */
.av-foot a {
  color: inherit;
  text-decoration: none;
  /* odkaz musi jit kliknout, zbytek plochy dal otaci kotoucem */
  pointer-events: auto;
}
.av-foot a:hover { color: var(--av-sun, var(--av-signal)); }
.av-foot a:focus-visible {
  outline: 3px solid var(--av-signal);
  outline-offset: 4px;
  border-radius: 3px;
}

@media (max-width: 575.98px) {
  /* Na uzkem displeji je obloha nizka a zvetsene slunce v zenitu by domene
     vlezlo do radku. Posuneme ji nize, do klidu mezi drahou slunce
     a vrcholky monolitu. */

  /* uzky displej: radek se zalomi, proto mensi mezery a stupen pisma */
  .av-foot { padding: .7rem .8rem; }
  .av-foot-line { gap: .3em .9em; letter-spacing: .1em; }
}

/* Bez animaci: scena stoji v dopoledni, kde jsou telesa i stin dobre
   citelne, mys s ni nehybe a nic nedobiha. Klavesnice funguje dal. */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { transition: none !important; animation: none !important; }
  /* Odhalovani scrollem se nekona: napis stoji a paticka je vysunuta hned,
     scena tedy dava smysl bez jedineho scrollu. Skript nastavuje totez,
     tohle je pojistka pro pripad, ze by se nespustil. */
  .av-sign--body { transform: translate(-50%, 0); }
  .av-foot { transform: none; }
}