/* ─────────────────────────────────────────────────────────────
   Zuzana & Martin — 2026
   Postavené 1:1 podľa Figma návrhu (artboard 2135 × 1296).
   Miery sú prepočítané na vw, aby držali proporcie návrhu:
   hodnota_vw = hodnota_z_návrhu / 2135 * 100
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Blair";
  src: url("../fonts/blair-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Blair";
  src: url("../fonts/blair-light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Blair";
  src: url("../fonts/blair-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper: #ffffff;
  --ink: #000000;
  --ph: #d9d9d9;          /* placeholder fotky — presne z návrhu */

  /* veľkosti a prostrkanie sú z Figmy (2. 9. 2026) */
  --d162: 7.5972vw;       /* 162.2 px — mená, OUR STORY, roky */
  --d250: 11.7096vw;      /* 250 px — 2. OCT 2026 */
  --d300: 14.0515vw;      /* 300 px — čas, FAQ, INFO, Š Z M */
  --display: var(--d162);
  --big: var(--d162);
  --lh-display: 1.235;    /* = „auto" v Figme pre Blair */
  --display-ls: -0.16394vw;   /* -3.5 px @ 2135 */

  --body: 1.1241vw;       /*  24 px @ 2135 */
  --body-lh: 1.5417;      /*  37 / 24 */
  --body-ls: -0.01405vw;  /* -0.3 px @ 2135 */
  --meta: 1.0211vw;       /*  21.8 px @ 2135 */

  /* koľko z papierovej textúry presvitá cez text a fotky —
     0 = čistá čierna, vyššie = viac vlákien v tlači */
  --grain: 0.1;

  --edge: 1.5vw;          /* 32 px @ 2135 */

  /* logo: tvar zaberá 76 % viewBoxu SVG, takže kontejner musí byť väčší,
     aby VIDITEĽNÝ ovál mal 8.61vw (183.8 px @ 2135) ako v návrhu */
  --logo-w: 11.33vw;

  /* medzera pre fotku medzi menami — 241.2 px — tak, aby MARTIN začal na x 1211.5 ako vo Figme */
  --gap-w: 11.2974vw;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Blair", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

img,
svg { display: block; max-width: 100%; }

/* ── PAPIEROVÁ TEXTÚRA ────────────────────────────────────────
   Shader `paper-texture` z shaders.paper.design v dvoch vrstvách.
   Plátno si v oboch robí knižnica sama; je statické (speed 0),
   takže sa vykreslí raz a ďalej nič nepočíta.

   `.paper-bg`     leží POD stránkou a je to samotný papier.
   `.paper-grain`  je tá istá textúra NAD obsahom v režime
                   `lighten`, takže vlákna prejdú aj cez text
                   a fotky. Na papieri je to identita (obe vrstvy
                   sú pixel po pixeli rovnaké, max(t, t) = t),
                   takže sa mení iba to, čo je tmavšie než papier.

   Silu prechodu cez text ladí `--grain`. Keď WebGL nie je,
   obe vrstvy sa odstránia a ostane biele pozadie z `body`. */
.paper-bg,
.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.paper-bg { z-index: -1; }

.paper-grain {
  z-index: 30;                     /* logo má 20 — grain musí byť nad ním */
  mix-blend-mode: lighten;
  opacity: var(--grain);
}

.paper-bg canvas,
.paper-grain canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Nadpisy nesmú byť tučné — prehliadač dáva h1–h3 automaticky 700,
   takže INFO a FAQ vychádzali v Blair Bold, kým celý web je Medium. */
h1, h2, h3, h4 { font-weight: inherit; margin: 0; }

/* ── FOTKY ──────────────────────────────────────────────────────
   Každá fotka je slot: šedá plocha drží miesto a proporciu, kým
   nie je v nej obrázok. Rect (left/top/width/height) riadi JS,
   pretože fotky cestujú medzi fázami.
   ───────────────────────────────────────────────────────────── */

.media {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: var(--ph);
}

.media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

/* obrázok sa objaví až keď má src — dovtedy svieti šedá plocha */
.media > img[src]:not(.media__layer) { opacity: 1; }

/* tváre sú na fotkách v hornej polovici — výrez to rešpektuje */
.media > img { object-position: 50% 35%; }

/* flipbook v intre — nad základnou fotkou, pod vrstvami scény */
.media > img.media__flip {
  position: absolute;
  inset: 0;
  visibility: hidden;
  transition: none;
}

/* ďalšie fotky slotu ležia nad základnou; odkrýva ich maskou zdola
   timeline scény, preto bez CSS prechodu (scrub by sa s ním bil) */
.media > img.media__layer {
  position: absolute;
  inset: 0;
  clip-path: inset(100% 0% 0% 0%);
  opacity: 1;
  transition: none;
}

/* ── LOGO ───────────────────────────────────────────────────── */

.site-logo {
  position: fixed;
  /* 1.285vw od VRCHU RÁMCA (2.576vw v návrhu mínus vnútorný padding
     SVG) — pri užšom okne je rámec vycentrovaný, takže sa pripočíta
     horný pás; pri pomere ≥ návrh je pás 0 a vyjde čistých 1.285vw */
  top: calc((100svh - min(100svh, 60.7026vw)) / 2 + 1.285vw);
  left: 50%;
  transform: translateX(-50%);
  width: var(--logo-w);
  min-width: 120px;
  z-index: 20;
  pointer-events: none;
}

.site-logo .logo { width: 100%; height: auto; overflow: visible; }

/* pero: tučné biele ťahy v maske odkrývajú skutočnú kresbu
   po jej vlastnej kontúre, v jej reálnej hrúbke */
.logo .ink { fill: var(--ink); }
.logo .pen { fill: none; stroke: #fff; stroke-linecap: butt; stroke-linejoin: round; }
.logo .pen--frame { stroke-width: 3.5; }
.logo .pen--script { stroke-width: 4; }
.logo .pen--bit { stroke-width: 5; }

/* Kým sa nerozbehne intro, nesvieti nič z hera — ale len v
   animovanom režime (`.is-anim`), inak by pri vypnutom JS zostal
   web navždy prázdny. */
body.is-anim:not(.is-ready) .logo,
body.is-anim:not(.is-ready) .names,
body.is-anim:not(.is-ready) .invite,
body.is-anim:not(.is-ready) [data-slot="hero"] { visibility: hidden; }

/* Načítanie: `.is-loading` dáva na <html> inline skript v <head>.
   Kým JS nepostaví scénu, nesvieti statický dokument (inak na
   chvíľu blikne), a kým pero nedokreslí logo, nedá sa scrollovať. */
html.is-loading body:not(.is-anim) main,
html.is-loading body:not(.is-anim) .site-logo { opacity: 0; }   /* nie visibility — statické fázy ju majú !important visible */
html.is-loading,
html.is-loading body { overflow: hidden; }
/* tón papiera, kým shader nevykreslí textúru — inak biela preskočí na sivú */
html.is-loading { background: #ededed; }
html.is-loading body { background: transparent; }

/* ── SCÉNA ────────────────────────────────────────────────────
   Celý web je jedna pripnutá scéna, takže vonkajšia sekcia nesmie
   mať fixnú výšku ani overflow: hidden — inak nemá ScrollTrigger
   kam odsunúť pin spacer a ďalší obsah by sa prekryl.
   ───────────────────────────────────────────────────────────── */

.scene { height: auto; overflow: visible; }

.scene__stage {
  position: relative;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  display: grid;
  align-items: center;
}

/* Rámec drží pomer artboardu 2135 : 1296. Miery sú vo vw a zvislé
   pozície v % výšky — pri oknách UŽŠÍCH než návrh (štvorec, tablet)
   by sa kompozícia roztiahla na celú výšku a rozpadla. Preto sa
   výška rámca zastropuje na 1296/2135 = 60.7026 % šírky a rámec sa
   vycentruje. Pri pomere ≥ návrh je to presne 100 % ako doteraz. */
.scene__frame {
  position: relative;
  width: 100%;
  height: min(100%, 60.7026vw);
}

/* WebGL látka — leží nad fotkami a pod typografiou, rozmer nastavuje JS */
.scene__gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.scene__media { position: absolute; inset: 0; }

/* v režime látky kreslí fotky WebGL — DOM ostáva len ako zdroj
   (rect, masky, flipbook), sám sa nezobrazuje */
body.is-cloth .scene__media .media { background: transparent; }
body.is-cloth .scene__media .media > img { visibility: hidden !important; }

/* Jedna fáza = jedna obrazovka; ležia na sebe a prepínajú sa časom.
   `pointer-events: none` je nutné — fázy sú na plnú plochu a tá
   posledná v DOM by inak brala kliky všetkým pod sebou. Klikacie
   prvky si ich zapnú samé; mimo svojej fázy sú skryté cez autoAlpha
   (visibility: hidden), takže sa na ne aj tak kliknúť nedá. */
.phase { position: absolute; inset: 0; pointer-events: none; }
.info__cta { pointer-events: auto; }

/* pozvánka — x 763, y 603, w 609 (Figma) */
.invite {
  position: absolute;
  left: 35.7377%;
  top: 46.528%;
  margin: 0;
  width: 28.5246vw;                /* 609 px @ 2135 */
  min-width: 300px;
  font-size: var(--body);
  line-height: var(--body-lh);
  letter-spacing: var(--body-ls);
  text-align: center;
}

/* ── MENÁ ───────────────────────────────────────────────────── */

/* x 53.2, y 1087 (Figma) — riadkovanie „auto" = 1.235 */
.names {
  position: absolute;
  left: 2.4918%;
  top: 83.873%;
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  font-size: var(--d162);
  font-weight: 500;
  letter-spacing: var(--display-ls);
  line-height: var(--lh-display);
  text-transform: uppercase;
  white-space: nowrap;
}

.names .nm,
.names .rev { display: inline-block; }

/* dopisovaná časť mena — šírku animuje GSAP z 0 na auto,
   tým sa Z a M od seba prirodzene rozostúpia */
.names .rev {
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
}

/* len rezerva miesta pre fotku; samotná fotka je absolútna */
.gap {
  flex: 0 0 auto;
  width: var(--gap-w);
  height: 1px;
}

/* ── MASKY PRE TEXT (efekt ako na jamarea.com) ──────────────────
   Každý znak / riadok sedí v maske s overflow:hidden a vystupuje
   zdola. Odchádzajúci text vyjde von horom.
   ───────────────────────────────────────────────────────────── */

.mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* priestor navrchu, aby maska neodrezala dĺžne a mäkčene */
  padding-top: 0.14em;
  margin-top: -0.14em;
}

.mask--line { display: block; }

.ch,
.ln {
  display: inline-block;
  will-change: transform;
}

/* ── TEXT, KTORÝ SA MENÍ S ROKOM ────────────────────────────── */

/* y 528 (Figma). Blok je širší než v návrhu (456.9) — pri 24 px sa
   texty do neho nezmestia a zalamovali by sa uprostred riadku. */
.stexts {
  position: absolute;
  left: 37%;
  top: 40.741%;
  width: 26vw;
  min-width: 330px;
  height: 7vw;
}

.stext {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0;
  font-size: var(--body);
  line-height: var(--body-lh);
  letter-spacing: var(--body-ls);
  text-align: center;
}

/* ── VEĽKÝ NADPIS DOLE ──────────────────────────────────────── */

/* x 32, y 1038.2, w 2071 (Figma) */
.display {
  position: absolute;
  left: 1.4988%;
  top: 80.108%;
  width: 97.0023vw;
  height: 9.3826vw;                /* 200.3 px = 162.2 × 1.235 */
  text-align: center;
}

.word {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  font-size: var(--d162);
  line-height: var(--lh-display);
  letter-spacing: var(--display-ls);
  text-transform: uppercase;
  white-space: nowrap;
}

/* dátum je väčší a sedí vyššie — x 46, y 998, 250 px (Figma) */
.word--date {
  font-size: var(--d250);
  top: -1.883vw;
}

/* ── ROK: „202" STOJÍ, MENÍ SA LEN POSLEDNÁ ČÍSLICA ───────────
   Roky 2023–2026 sú jeden prvok. Šírka „202" aj šírka slotu pre
   poslednú číslicu sú konštantné, takže sa medzi rokmi neposunie
   nič — vymení sa iba číslica. Na finále sa pred rok dopíše
   „2. OCT" a riadok sa presunie a zväčší na mieru `.word--date`.
   ───────────────────────────────────────────────────────────── */

.word--year { will-change: transform; }

.year {
  position: relative;
  display: inline-block;
}

/* Predpona visí naľavo od roku MIMO toku — kým sa nedopíše, nemá
   na šírku ani na vycentrovanie roku žiaden vplyv. */
.year__pre {
  position: absolute;
  right: 100%;
  bottom: 0;
}

/* Slot pre poslednú číslicu je široký ako NAJŠIRŠIA z nich (6) —
   šírku drží skrytá „6" v ::before. Samotné číslice ležia mimo
   toku a sú zarovnané zľava, takže „202" stojí. */
.year__dig {
  position: relative;
  display: inline-block;
  text-align: left;
}

.year__dig::before {
  content: "6";
  visibility: hidden;
}

.year__d {
  position: absolute;
  left: 0;
  bottom: 0;
}

/* Dátum vo veľkosti z návrhu už nie je samostatné slovo — slúži
   len ako neviditeľná miera, na ktorú rok pri finále dorastie. */
.word--ghost { visibility: hidden; }

/* ELESKO / MODRA / 16:30 — len na finálnej obrazovke s dátumom.
   Pozície x 71 / 972 / 2005, y 987 (Figma). */
.meta {
  position: absolute;
  left: 0;
  right: 0;
  top: 76.157%;
  font-size: var(--meta);
  letter-spacing: -0.01874vw;
  text-transform: uppercase;
  opacity: 0;
}

.meta span { position: absolute; top: 0; white-space: nowrap; }
.meta span:nth-child(1) { left: 3.3255%; }
.meta span:nth-child(2) { left: 45.5269%; }
.meta span:nth-child(3) { left: 93.9110%; }

/* ─────────────────────────────────────────────────────────────
   POSLEDNÁ SEKCIA — program, text, FAQ, localita, záver
   Každý „pane" je jedna obrazovka ako frame v návrhu (2135 × 1296),
   prvky sú absolútne na presných pozíciách z návrhu.
   ───────────────────────────────────────────────────────────── */

/* ── FAQ — veľké slovo vľavo, otázky v pravom stĺpci (Figma) ── */

.faq__title {
  position: absolute;
  left: 1.9672%;                   /* x 42 */
  top: 0;
  width: 38.5480vw;                /* 823 px */
  margin: 0;
  font-size: var(--d300);
  line-height: var(--lh-display);
  letter-spacing: var(--display-ls);
  text-align: center;
  white-space: nowrap;
}

.faq {
  position: absolute;
  left: 54.2857%;                  /* x 1159 */
  top: 41.744%;                    /* y 541 — ako v návrhu */
  width: 40.8431vw;                /* 872 px */
  list-style: none;
  margin: 0;
  padding: 0;
}

.qa { position: relative; }

.qa--tail { height: 0; }

.qa__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: #e0e0e0;
  transform: scaleX(0);
  transform-origin: left center;
}

/* rozteč riadku 112 px — mierne nižšia než v návrhu (132.5), aby sa
   rozbalená odpoveď zmestila do obrazovky */
.qa__q {
  all: unset;
  display: block;
  width: 100%;
  padding: 2.155vw 0 1.934vw;
  cursor: pointer;
  font: inherit;
  color: inherit;
  /* MUSÍ byť tu, za `all: unset` — inak sa pointer-events resetne
     na `inherit` a otázka zdedí `none` z `.phase`, čiže sa na ňu
     nedá kliknúť. */
  pointer-events: auto;
}

.qa__txt {
  font-size: 0.9368vw;             /* 20 px @ 2135 */
  line-height: var(--lh-display);
  text-transform: uppercase;
  transition: opacity 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

.qa__q:hover .qa__txt { opacity: 0.45; }

/* odpoveď sa rozbalí pod otázkou a odtlačí riadky pod ňou */
.qa__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.qa__q[aria-expanded="true"] + .qa__a { grid-template-rows: 1fr; }

.qa__a > p {
  overflow: hidden;
  margin: 0;
  padding-right: 2vw;
  /* menšia než otázka a čierna, nie šedá */
  font-size: 0.9368vw;             /* 20 px @ 2135 */
  line-height: 1.5;
  letter-spacing: var(--body-ls);
  color: var(--ink);
}

.qa__q[aria-expanded="true"] + .qa__a > p { padding-bottom: 1vw; }

/* ── ZÁVER Š Z M (Frame 31) ─────────────────────────────────── */

.end__s,
.end__z,
.end__m {
  position: absolute;
  font-size: var(--d300);
  line-height: var(--lh-display);
  letter-spacing: var(--display-ls);
  text-transform: uppercase;
  white-space: nowrap;
}

/* x 29 / 39 / 1705, y 36 / 934 / 934 (Figma) */
.end__s { left: 1.3583%; top: 2.778%; }
.end__z { left: 1.8267%; top: 72.068%; }
.end__m { left: 79.8595%; top: 72.068%; }

/* slepá razba loga ako podklad záveru — kreslí ju WebGL (.end__gl) len
   tam, kadiaľ prešla myš. SVG určuje iba polohu a tvar, samo sa nezobrazí. */
.end__seal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62vw;
  height: auto;
  transform: translate(-50%, -50%);
  visibility: hidden;
}
.end__gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* x 840, y 616, w 455, 26.8/44 px (Figma) */
.end__text {
  position: absolute;
  left: 39.3443%;
  top: 47.531%;
  width: 21.3115vw;
  min-width: 280px;
  margin: 0;
  font-size: 1.2553vw;
  line-height: 1.6418;
  letter-spacing: -0.02342vw;
  text-align: center;
}

/* ── PROGRAM — pripnutá scéna, mení sa čas, text aj fotka ─────
   Rozloženie podľa návrhu (Frame 27): čas vľavo nahor, text v strede,
   fotka vpravo dole. Vľavo dole zoznam s fajkami, ktorý sa odškrtáva.
   ───────────────────────────────────────────────────────────── */

.prog__times,
.prog__notes { position: absolute; }

/* x 54, y 40, 300 px (Figma) */
.prog__times { left: 2.5293%; top: 3.086%; height: 17.3536vw; }

.prog__time {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  font-size: var(--d300);
  line-height: var(--lh-display);
  letter-spacing: var(--display-ls);
  white-space: nowrap;
}

/* x 836.9, y 708.8, w 427 (Figma) */
.prog__notes { left: 39.1990%; top: 54.691%; width: 19.9953vw; min-width: 280px; height: 7vw; }

/* posledný bod má dlhší text — Martin mu vo Figme dal širší blok
   (x 737, w 479 namiesto 836.9 / 427) */
.prog__note--wide { left: -4.6791vw !important; width: 22.4356vw; }

.prog__note {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  font-size: var(--body);
  line-height: var(--body-lh);
  letter-spacing: var(--body-ls);
}

/* ── INFO — veľká fotka vľavo, praktické info vpravo (Figma) ─── */

/* Zarovnané OPTICKY, nie podľa textového boxu: Blair má pri „I"
   ľavý bočný priestor 0.116em a kresba končí 1.0067em pod vrchom
   riadku. Aby mala kresba vľavo aj dole rovnaký odstup 50 px ako
   fotka, box začína na 15.2 px a top je 944 px. */
.info__big {
  position: absolute;
  left: 0.7120%;
  top: 72.840%;
  margin: 0;
  font-size: var(--d300);
  line-height: var(--lh-display);
  letter-spacing: var(--display-ls);
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.info__col p {
  position: absolute;
  left: 59.9532%;                  /* x 1280 */
  width: 21.6862vw;                /* 463 px */
  margin: 0;
  font-size: 0.8103vw;             /* 17.3 px @ 2135 */
  line-height: 1.6358;             /* 28.3 / 17.3 */
  letter-spacing: var(--body-ls);
}

/* Poradie stĺpca: ubytovanie → outfit → miesto → adresa → tlačidlo,
   aby kolónka končila navigáciou. Odstupy sú rovnomerné: 45 px medzi
   odstavcami, 22 px vnútri skupiny miesto + adresa + tlačidlo. */
.info__b1 { top: 25.231%; }        /* ubytovanie — 4 riadky */
.info__b4 { top: 37.423%; }        /* outfit — 3 riadky */
.info__b2 { top: 47.454%; }        /* miesto obradu */
.info__b3 { top: 53.519%; }        /* adresa */

/* tlačidlo s navigáciou — Rectangle 1, x 1280, y 695, 452 × 49 */
.info__cta {
  position: absolute;
  left: 59.9532%;
  top: 59.583%;
  display: grid;
  place-items: center;
  width: 21.1710vw;
  height: 2.2951vw;
  min-height: 34px;
  border: 1px solid var(--ink);
  font-size: 0.8103vw;
  letter-spacing: var(--body-ls);
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  transition: background 0.35s cubic-bezier(0.19, 1, 0.22, 1),
              color 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

.info__cta:hover { background: var(--ink); color: var(--paper); }

/* ─────────────────────────────────────────────────────────────
   MOBIL — návrh je na šírku (2135 × 1296), telefón na výšku.
   Preto sa fázy neprepočítavajú, ale prekladajú: veľká typografia
   ide na plnú šírku, texty pod ňu a fotky majú vlastné rámce
   v JS (tabuľky `M_*`).
   ───────────────────────────────────────────────────────────── */

/* Mobilné rozloženie platí aj pre okná NA VÝŠKU širšie než telefón
   (tablet na výšku, úzke okno) — desktopový rámec by tam bol príliš
   nízky a text nečitateľne malý. Rovnaká podmienka musí byť v MQ()
   v site.js. */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  :root {
    --d162: 13vw;
    --d250: 17vw;
    --d300: 22vw;
    /* strop na výšku: na tablete na výšku by 4.1vw (≈ 34 px) zabralo
       pásy, v ktorých ležia fotky */
    --body: min(4.1vw, 2.3svh);
    --body-lh: 1.45;
    --body-ls: -0.02vw;
    --meta: 3.2vw;
    --edge: 5vw;
    --logo-w: 34vw;
    --display-ls: -0.28vw;
    --gap-w: 100%;
  }

  .site-logo { top: 4vw; }

  /* mobilné rozloženie je na výšku — rámec nesmie strop 60.7vw použiť */
  .scene__frame { height: 100%; }

  /* ── hero ── */
  .invite {
    left: 5%;
    right: 5%;
    /* logo je vysoké ~26vw (4vw top + 22vw kresba) — na širších oknách
       na výšku by 12 % nestačilo a pozvánka by podliezla pod logo */
    top: max(12%, 28vw);
    width: auto;
    min-width: 0;
  }

  /* Mená zostávajú v riadku a zlomí ich medzera pre fotku — musí
     mať flex-basis 100 %, inak by sa `.nm` a `.rev` rozpadli každý
     na vlastný riadok (Z / UZANA). */
  .names {
    left: 5%;
    right: 5%;
    top: auto;
    bottom: 5vh;
    flex-wrap: wrap;
    align-items: flex-end;
    line-height: 1.1;
  }

  /* strop 35vh: na širších oknách na výšku by 62vw vytlačilo mená
     nahor do pozvánky (fotka sa z výšky pásu odvodí sama v JS) */
  .gap { flex: 0 0 100%; width: 100%; height: min(62vw, 35vh); }

  /* ── príbeh ── */
  .stexts {
    left: 5%;
    right: 5%;
    top: 30%;
    width: auto;
    min-width: 0;
    height: 26vw;
  }

  .display {
    left: 5%;
    top: auto;
    bottom: 7vh;
    width: 90vw;
    height: 14vw;
  }

  /* „OUR STORY" a „2. OCT 2026" sú najdlhšie slová — pri 13vw
     vytečú z 90vw, preto majú vlastnú, menšiu veľkosť */
  .word { font-size: 10.5vw; }
  .word--date { font-size: 10.5vw; top: 0; }

  .meta { top: auto; bottom: 26vh; font-size: var(--meta); }
  .meta span:nth-child(1) { left: 5%; }
  .meta span:nth-child(2) { left: 42%; }
  .meta span:nth-child(3) { left: auto; right: 5%; }

  /* ── program ── */
  .prog__times { left: 5%; top: 6%; height: 27vw; }
  .prog__notes { left: 5%; top: 34%; width: 90vw; min-width: 0; height: 30vw; }
  .prog__note--wide { left: 0 !important; width: 90vw; }

  /* ── info ──
     Na výšku sa nezmestí fotka + štyri odstavce + tlačidlo pod
     veľkým INFO, preto slovo ide hneď pod fotku a text pod neho. */
  .info__big { left: 3%; top: 33%; bottom: auto; font-size: min(22vw, 11svh); }
  /* stĺpec je na mobile v toku — pevné % sa na tablete na výšku
     prekrývali (4 riadky ubytovania vošli do outfitu) */
  .info__col {
    position: absolute;
    left: 5%;
    right: 5%;
    top: 49%;
    display: flex;
    flex-direction: column;
    gap: 2.2svh;
  }
  .info__col p { position: static; width: auto; font-size: min(3.6vw, 2svh); line-height: 1.5; }
  /* padding je zastropovaný, inak na tablete na výšku (6.5vw ≈ 50 px)
     tlačidlo narastie */
  /* v toku stĺpca, pod adresou s väčšou medzerou než medzi odstavcami */
  .info__cta { position: static; width: auto; height: auto; margin-top: 3.5svh;
               padding: min(6.5vw, 30px) 0; font-size: min(3.4vw, 1.9svh); }

  /* ── faq ── */
  .faq__title { left: 5%; width: 90vw; top: 2%; }
  .faq { left: 5%; width: 90vw; top: 30%; }
  .qa__q { padding: 4.2vw 0 3.6vw; }
  .qa__txt { font-size: 3.7vw; }
  .qa__a > p { padding-right: 0; font-size: 3.6vw; }

  /* ── záver ── */
  .end__s { left: 5%; top: 4%; }
  .end__z { left: 5%; top: auto; bottom: 4%; }
  .end__m { left: auto; right: 5%; top: auto; bottom: 4%; }
  .end__seal { top: 46%; width: 94vw; }
  .end__text { left: 5%; right: 5%; top: 44%; width: auto; min-width: 0; font-size: 4.4vw; line-height: 1.5; }
}

/* ─────────────────────────────────────────────────────────────
   STATICKÝ REŽIM — základ, na ktorý sa animácia iba nabaľuje.

   Bez JS aj pri `prefers-reduced-motion` sa `.is-anim` na <body>
   nepridá a web sa zobrazí ako obyčajný jednostĺpcový dokument:
   všetky texty viditeľné, fázy pod sebou, odpovede v FAQ otvorené.
   Fotky sa v ňom nezobrazujú — sú to plochy, ktoré medzi fázami
   cestujú a staticky by nič nepovedali.
   ───────────────────────────────────────────────────────────── */

body:not(.is-anim) .scene__stage {
  height: auto;
  min-height: 0;
  overflow: visible;
  display: block;
}

body:not(.is-anim) .scene__frame { height: auto; }

body:not(.is-anim) .scene__gl,
body:not(.is-anim) .scene__media { display: none; }

/* medzera pre fotku sa staticky zmení na zlom riadku, inak by sa
   mená zliali do „ZUZANAMARTIN" */
body:not(.is-anim) .gap { flex: 0 0 100%; width: 100%; height: 0; }

body:not(.is-anim) .site-logo {
  position: absolute;
  top: 4vh;
}

/* Brány fáz (autoAlpha z JS) existujú len v animovanom režime —
   staticky by po páde stavby scény nechali prázdnu stránku. */
body:not(.is-anim) .phase { opacity: 1 !important; visibility: visible !important; }

body:not(.is-anim) .phase {
  position: relative;
  height: auto;
  display: grid;
  gap: 4vh;
  justify-items: start;
  padding: 8vh var(--edge);
}

body:not(.is-anim) .phase--hero { padding-top: 22vh; }

/* zruší absolútne rozloženie z animovaného režimu */
body:not(.is-anim) .phase :is(p, h1, h2, span, div, ol, a, figure) {
  position: relative;
  inset: auto;
  transform: none;
  opacity: 1;
  visibility: visible;
}

body:not(.is-anim) .phase :is(.invite, .stext, .prog__note, .info__col p, .end__text, .qa__a > p) {
  width: min(56ch, 100%);
  min-width: 0;
  text-align: left;
}

body:not(.is-anim) .names { flex-wrap: wrap; }
body:not(.is-anim) .stexts,
body:not(.is-anim) .display,
body:not(.is-anim) .prog__times,
body:not(.is-anim) .prog__notes,
body:not(.is-anim) .info__col { display: grid; gap: 3vh; width: 100%; height: auto; }

body:not(.is-anim) .word { white-space: normal; }

/* Zo skladaného roku zostane staticky hotový dátum: miera sa
   nekreslí, slot nemá výplň a z číslic ostane posledná. */
body:not(.is-anim) .word--ghost { display: none; }
body:not(.is-anim) .year__dig::before { content: none; }
body:not(.is-anim) .year__d:not(:last-child) { display: none; }
body:not(.is-anim) .meta { display: flex; gap: 2rem; }

/* v statickom režime sú odpovede rozbalené a linky vykreslené */
body:not(.is-anim) .faq { width: 100%; }
body:not(.is-anim) .qa__line { transform: none; }
body:not(.is-anim) .qa__a { grid-template-rows: 1fr; }
body:not(.is-anim) .qa__q { cursor: default; }

body:not(.is-anim) .info__cta { width: min(24rem, 100%); }

/* širší blok posledného bodu programu má v animovanom režime
   negatívny left s !important — staticky ho treba zrušiť */
body:not(.is-anim) .prog__note--wide { left: auto !important; width: auto; }