/* ==========================================================================
   epozvanka.sk — VSTUP „RÝCHLY STRIH" (modul motora js/vstup.js)

   Nie jeden plynulý let, ale titulková sekvencia: päť TVRDÝCH STRIHOV.
   Každý záber má inú kompozíciu aj inú plochu farby, takže oko vidí nový
   obraz, nie ten istý obraz posunutý o kus ďalej. Presne preto pôsobili
   staršie pokusy ako „fps 0" — plynulá interpolácia cez dve sekundy nemá
   čo chytiť.

   JEDNY HODINY NA CELÚ SCÉNU: 12 snímok za sekundu, jedna snímka
   --f1 = 83,33 ms (vlastní ju motor). Medzi pózami sa SKÁČE (steps), nikde
   sa neinterpoluje — a to platí aj pre pokojné slučky pred ťuknutím
   (hojdanie obálky, pulz výzvy, padajúce lupene). Miešanie 12 fps akcie so
   6 fps pozadím je presne tá nekonzistentnosť, ktorá z animácie robí kašu.
   V celej sekcii preto nie je ani jeden ease a každé trvanie je celočíselný
   násobok --f1.

   ODOLNOSŤ VOČI VYPADNUTÝM SNÍMKAM: záber sa nezapína na pár snímok a
   nevypína. Zapne sa a ostane zapnutý (fill-mode: forwards) — prekryje ho
   až nasledujúci záber, ktorý má vyšší z-index a nepriehľadnú plochu. Keď
   na slabšom telefóne pár snímok vypadne, strih sa iba posunie; nikdy
   nevznikne prázdna snímka.

   FÁZY VLASTNÍ MOTOR: data-faza="pokoj" → "hraj" → "koniec" na .vs.
   Akčné animácie sú preto viazané na :not([data-faza="pokoj"]) — prechod
   „hraj → koniec" nesmie prepočítať animation, inak by sa partitúra
   uprostred reštartovala.

   Celé CSS je pod .vs[data-vstup="strih"], nikde na :root — inak by si
   moduly navzájom prepisovali paletu. Farby chodia z --vs-* premenných,
   ktoré motor nastavil na .vs; v SVG sú konkrétne reťazce z JS. Nikde nie
   je miešanie farieb funkciou zo CSS Color 5 (Chrome pod 111 by zahodil
   celú deklaráciu) a animuje sa výhradne transform a opacity.
   ========================================================================== */

/* ── záber = jeden strih ──────────────────────────────────────────────
   Skrytý cez visibility, nie len opacity: skrytý podstrom sa vôbec
   nerastruje, takže ťažký záber s pečaťou nestojí ani pixel, kým nie je
   na obraze. */
.vs[data-vstup="strih"] .vss__zaber {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.vs[data-vstup="strih"] .vss__plocha { position: absolute; inset: 0; }
/* Plocha je pozicovaná, takže by podľa poradia maľovania prekryla kresbu.
   Kresbu preto tiež pozicujeme a dvíhame o vrstvu vyššie. */
.vs[data-vstup="strih"] .vss__zaber > svg,
.vs[data-vstup="strih"] .vss__karta { position: relative; z-index: 1; }

/* Tvrdý strih: obe krajné hodnoty rovnaké, takže sa nikdy nič neprelína. */
@keyframes vss-strih { from, to { opacity: 1; visibility: visible; } }

.vs[data-vstup="strih"] .vss__zaber--1 { z-index: 1; }
.vs[data-vstup="strih"] .vss__zaber--2 { z-index: 2; }
.vs[data-vstup="strih"] .vss__zaber--3 { z-index: 3; }
.vs[data-vstup="strih"] .vss__zaber--4 { z-index: 4; }
.vs[data-vstup="strih"] .vss__zaber--5 { z-index: 5; }

/* Zapnúť a nechať zapnuté — pozri poznámku o vypadnutých snímkach hore.
   fill-mode je forwards, NIE both: pri both by backwards výplň zobrazila
   záber už počas oneskorenia, teda hneď na začiatku. */
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__zaber--1 { animation: vss-strih var(--f1) linear 0ms 1 forwards; }
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__zaber--2 { animation: vss-strih var(--f1) linear calc(5 * var(--f1)) 1 forwards; }
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__zaber--3 { animation: vss-strih var(--f1) linear calc(11 * var(--f1)) 1 forwards; }
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__zaber--4 { animation: vss-strih var(--f1) linear calc(16 * var(--f1)) 1 forwards; }
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__zaber--5 { animation: vss-strih var(--f1) linear calc(19 * var(--f1)) 1 forwards; }

.vs[data-vstup="strih"] .vss__zaber--1 .vss__plocha { background: var(--vs-bg); }
.vs[data-vstup="strih"] .vss__zaber--2 .vss__plocha { background: var(--vs-ox3); }
.vs[data-vstup="strih"] .vss__zaber--3 .vss__plocha { background: var(--vs-bg); }
.vs[data-vstup="strih"] .vss__zaber--4 .vss__plocha { background: var(--vs-zlata); }
.vs[data-vstup="strih"] .vss__zaber--5 .vss__plocha { background: var(--vs-bg); }
.vs[data-vstup="strih"] .vss__zaber--5 .vss__plocha::after {
  content: '';
  position: absolute;
  inset: 16px;
  border: 3px solid var(--vs-zlata2);
  opacity: 0.7;
}

/* Jednosnímkový záblesk pri výbuchu — strihačský úder. Zámerne stlmený:
   pozvánku si otvoria stovky ľudí a plná biela cez celú plochu je pri
   fotocitlivosti na hrane. Jedna snímka, papierová (nie čistá biela) a na
   štvrtinovej sile stačí, aby strih „plesol". */
.vs[data-vstup="strih"] .vss__blesk {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: var(--vs-papier);
  opacity: 0;
  pointer-events: none;
}
@keyframes vss-blesk { from, to { opacity: 0.26; } }
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__blesk {
  animation: vss-blesk var(--f1) linear calc(16 * var(--f1)) 1 none;
}

/* ── pokoj (pred ťuknutím) ─────────────────────────────────────────── */
.vs[data-vstup="strih"] .vss__pokoj {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 6% 8%;
}
/* Strih, nie fade — pokoj zmizne v tej istej snímke, v ktorej nabehne
   prvý záber. */
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__pokoj { opacity: 0; visibility: hidden; }

.vs[data-vstup="strih"] .vss__ramik {
  position: absolute;
  inset: 18px;
  border: 3px solid var(--vs-zlata2);
  pointer-events: none;
}
.vs[data-vstup="strih"] .vss__ramik::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--vs-zlata2);
  opacity: 0.55;
}
.vs[data-vstup="strih"] .vss__kicker {
  margin: 0;
  font-family: var(--vs-sans);
  /* 11 px. Je to prvá veta, ktorú hosť na pozvánke uvidí, a stojí sama
     nad nadpisom — nie je to popisok. Spodok je 12 px; pri letter-spacing
     0,42em sa riadok o ten jeden pixel nezalomí. */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.42em;
  /* letter-spacing pridá medzeru aj za posledné písmeno — text by inak
     sedel v strede o kúsok vľavo. */
  text-indent: 0.42em;
  /* Tá istá vec ako pri výzve: ozdobná zlatá je odvodená od dizajnu a na
     podklade scény často splynie. Namerané pri „Čiernej kravate" a
     „Smaragd a krém" presne 1,00 : 1 — text bol na obrazovke, ale nebolo
     ho vidieť vôbec. --vs-vyzva je z čiernej a bielej tá čitateľnejšia. */
  color: var(--vs-vyzva, var(--vs-zlata));
  text-transform: uppercase;
  text-align: center;
}
.vs[data-vstup="strih"] .vss__vyzva {
  margin: 0;
  font-family: var(--vs-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  /* Farba výzvy sa neberie z dizajnu, ale z čitateľnosti — motor ju
     dopočíta ako čiernu alebo bielu podľa toho, ktorá je na podklade scény
     lepšie vidieť (--vs-vyzva v js/vstup.js). Predtým tu stála farba
     odvodená od dizajnu a v mnohých dizajnoch splynula s podkladom: výzva
     na obrazovke bola, ale hosť ju nevidel. */
  color: var(--vs-vyzva, var(--vs-papier2));
  text-transform: uppercase;
}

/* Obálka v pokoji sa hojdá. Osem póz na osem snímok = tých istých 12 fps
   ako akcia; slučka je dlhšia než úder zámerne (úder má prekvapiť, slučka
   nesmie pôsobiť nervózne), ale hodiny sú jedny. */
@keyframes vss-hojd {
  0%    { transform: translateY(0)     rotate(-1deg);  animation-timing-function: steps(1); }
  12.5% { transform: translateY(-4px)  rotate(-.4deg); animation-timing-function: steps(1); }
  25%   { transform: translateY(-7px)  rotate(.4deg);  animation-timing-function: steps(1); }
  37.5% { transform: translateY(-9px)  rotate(.9deg);  animation-timing-function: steps(1); }
  50%   { transform: translateY(-10px) rotate(1.2deg); animation-timing-function: steps(1); }
  62.5% { transform: translateY(-8px)  rotate(.8deg);  animation-timing-function: steps(1); }
  75%   { transform: translateY(-4px)  rotate(.2deg);  animation-timing-function: steps(1); }
  87.5% { transform: translateY(-1px)  rotate(-.6deg); animation-timing-function: steps(1); }
  100%  { transform: translateY(0)     rotate(-1deg); }
}
.vs[data-vstup="strih"] .vss__obalka-pokoj {
  width: calc(var(--vs-sirka) * 0.80);
  max-height: 44svh;
  animation: vss-hojd calc(8 * var(--f1)) infinite;
}

/* Výzva pulzuje — šesť póz na šesť snímok, opäť 12 fps. */
@keyframes vss-pulz {
  0%     { transform: scale(1);          animation-timing-function: steps(1); }
  16.66% { transform: scale(1.06, .96);  animation-timing-function: steps(1); }
  33.33% { transform: scale(1.09, .94);  animation-timing-function: steps(1); }
  50%    { transform: scale(1.02, .99);  animation-timing-function: steps(1); }
  66.66% { transform: scale(.98, 1.03);  animation-timing-function: steps(1); }
  83.33% { transform: scale(1.00, 1.01); animation-timing-function: steps(1); }
  100%   { transform: scale(1); }
}
.vs[data-vstup="strih"] .vss__vyzva { animation: vss-pulz calc(6 * var(--f1)) infinite; }

/* Iskra na pečati: dve kresby, každá presne jednu snímku zo šestnástich.
   Nie je to prechod, je to výmena kresby — preto žiadny easing. */
@keyframes vss-iskra { 0%, 6.25% { opacity: 1; } 6.26%, 100% { opacity: 0; } }
.vs[data-vstup="strih"] .vss__iskra {
  opacity: 0;
  animation: vss-iskra calc(16 * var(--f1)) linear infinite;
}
.vs[data-vstup="strih"] .vss__iskra--b { animation-delay: calc(-8 * var(--f1)); }

/* Padajúce lupene. Počet krokov = počet snímok trvania, takže aj pozadie
   beží na 12 fps a nie na vlastných hodinách. */
@keyframes vss-pad {
  from { transform: translate3d(0, -60px, 0) rotate(0deg); }
  to   { transform: translate3d(26px, 900px, 0) rotate(540deg); }
}
.vs[data-vstup="strih"] .vss__lupen {
  position: absolute;
  top: 0;
  width: 11px;
  height: 11px;
  opacity: 0.85;
  will-change: transform;
  animation: vss-pad calc(72 * var(--f1)) steps(72) infinite;
}
.vs[data-vstup="strih"] .vss__lupen--1 { left: 16%; background: var(--vs-zlata); }
.vs[data-vstup="strih"] .vss__lupen--2 {
  left: 52%;
  background: var(--vs-akcent);
  width: 9px;
  height: 14px;
  animation-duration: calc(90 * var(--f1));
  animation-timing-function: steps(90);
  animation-delay: calc(-30 * var(--f1));
}
.vs[data-vstup="strih"] .vss__lupen--3 {
  left: 81%;
  background: var(--vs-papier2);
  animation-duration: calc(81 * var(--f1));
  animation-timing-function: steps(81);
  animation-delay: calc(-50 * var(--f1));
}

/* ── ZÁBER 1 — obálka zblízka (snímky 0–5) ─────────────────────────── */
.vs[data-vstup="strih"] .vss__obalka-velka {
  width: calc(var(--vs-sirka) * 0.92);
  max-height: 52svh;
}
/* Náraz strihu: obálka dopadne do rámu prescale-ovaná a odpruží.
   Nikde uniformné scale — scaleX ≠ scaleY, inak to nemá hmotnosť. */
@keyframes vss-s1 {
  0%   { transform: scale(1.62, .66) rotate(-3deg);  animation-timing-function: steps(1); }
  20%  { transform: scale(.90, 1.13) rotate(1.4deg); animation-timing-function: steps(1); }
  40%  { transform: scale(1.09, .93) rotate(-.7deg); animation-timing-function: steps(1); }
  60%  { transform: scale(.98, 1.02) rotate(.3deg);  animation-timing-function: steps(1); }
  80%  { transform: scale(1.01, .99) rotate(-.2deg); animation-timing-function: steps(1); }
  100% { transform: scale(1) rotate(0deg); }
}
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__obalka-velka {
  animation: vss-s1 calc(5 * var(--f1)) 0ms both;
}

/* Nápřah chlopne: na poslednej snímke záberu sa chlopňa stiahne hore.
   Je to varovanie pre oko — o snímku neskôr príde strih na pečať. */
@keyframes vss-s1-chlopna {
  0%, 79% { transform: scaleY(1); animation-timing-function: steps(1); }
  80%     { transform: scaleY(.62); }
  100%    { transform: scaleY(.62); }
}
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__chlopna-1 {
  transform-origin: 50% 0%;
  animation: vss-s1-chlopna calc(5 * var(--f1)) 0ms both;
}

/* ── ZÁBER 2 — pečať praská (snímky 5–11) ──────────────────────────── */
.vs[data-vstup="strih"] .vss__pecat-velka {
  width: calc(var(--vs-sirka) * 1.16);
  max-height: 78svh;
}

/* Štyri SAMOSTATNÉ KRESBY. Toto je rozdiel medzi „obrázok, ktorý sa hýbe"
   a animáciou: nie je to tá istá kresba posunutá, sú to štyri rôzne kresby
   za sebou. Každá má presah do ďalšej a posledná drží (forwards), takže
   pri vypadnutej snímke nikdy nezostane diera. */
@keyframes vss-kresba { from, to { opacity: 1; } }
.vs[data-vstup="strih"] .vss__kr { opacity: 0; }
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__kr--1 { animation: vss-kresba calc(2 * var(--f1) + 40ms) linear calc(5 * var(--f1)) 1 none; }
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__kr--2 { animation: vss-kresba calc(1 * var(--f1) + 40ms) linear calc(7 * var(--f1)) 1 none; }
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__kr--3 { animation: vss-kresba calc(1 * var(--f1) + 40ms) linear calc(8 * var(--f1)) 1 none; }
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__kr--4 { animation: vss-kresba var(--f1) linear calc(9 * var(--f1)) 1 forwards; }

@keyframes vss-s2 {
  0%   { transform: scale(1.16, .86); animation-timing-function: steps(1); }
  25%  { transform: scale(.88, 1.14); animation-timing-function: steps(1); }
  50%  { transform: scale(1.06, .95); animation-timing-function: steps(1); }
  75%  { transform: scale(.98, 1.02); animation-timing-function: steps(1); }
  100% { transform: scale(1); }
}
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__pecat-velka {
  animation: vss-s2 calc(4 * var(--f1)) calc(5 * var(--f1)) both;
}

/* ── ZÁBER 3 — papier vyletí z obálky (snímky 11–16) ───────────────── */
.vs[data-vstup="strih"] .vss__let-svg {
  width: calc(var(--vs-sirka) * 0.92);
  max-height: 86svh;
}
/* Posun cez pol výšky karty na jednu snímku by oko prečítalo ako dve
   oddelené kópie, nie ako pohyb. Preto je na 40 % ŠMUH: natiahnutie v smere
   letu, stlačenie naprieč. Presne jedna snímka. */
@keyframes vss-s3-papier {
  0%   { transform: translateY(150px)  scale(.90, 1.14); animation-timing-function: steps(1); }
  20%  { transform: translateY(40px)   scale(.84, 1.22); animation-timing-function: steps(1); }
  40%  { transform: translateY(-140px) scale(.50, 2.20); opacity: .9; animation-timing-function: steps(1); }
  60%  { transform: translateY(-268px) scale(1.16, .86); opacity: 1; animation-timing-function: steps(1); }
  80%  { transform: translateY(-244px) scale(.96, 1.04); animation-timing-function: steps(1); }
  100% { transform: translateY(-252px) scale(1); }
}
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__papier-let {
  animation: vss-s3-papier calc(5 * var(--f1)) calc(11 * var(--f1)) both;
}

/* Sekundárny pohyb: obálka na papier zareaguje o snímku neskôr a slabšie.
   Bez tohto oneskorenia je celý záber jeden tuhý blok. */
@keyframes vss-s3-obalka {
  0%, 19% { transform: scale(1);         animation-timing-function: steps(1); }
  20%     { transform: scale(1.12, .88); animation-timing-function: steps(1); }
  40%     { transform: scale(.95, 1.06); animation-timing-function: steps(1); }
  60%     { transform: scale(1.02, .98); animation-timing-function: steps(1); }
  100%    { transform: scale(1); }
}
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__obalka-mala {
  transform-origin: 50% 100%;
  animation: vss-s3-obalka calc(5 * var(--f1)) calc(11 * var(--f1)) both;
}

/* Rýchlostné čiary — kreslený ekvivalent motion bluru za nula výkonu. */
@keyframes vss-s3-ciary {
  0%   { opacity: 1; transform: translateY(0) scaleY(1);       animation-timing-function: steps(1); }
  50%  { opacity: 1; transform: translateY(-70px) scaleY(1.7); animation-timing-function: steps(1); }
  100% { opacity: 0; transform: translateY(-150px) scaleY(2.1); }
}
.vs[data-vstup="strih"] .vss__ciary { opacity: 0; }
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__ciary {
  animation: vss-s3-ciary calc(2 * var(--f1)) calc(12 * var(--f1)) both;
}

/* ── ZÁBER 4 — výbuch (snímky 16–19) ───────────────────────────────── */
.vs[data-vstup="strih"] .vss__vybuch-svg {
  width: var(--vs-sirka);
  max-height: 86svh;
}
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__kr--5 { animation: vss-kresba calc(var(--f1) + 40ms) linear calc(16 * var(--f1)) 1 none; }
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__kr--6 { animation: vss-kresba var(--f1) linear calc(17 * var(--f1)) 1 forwards; }

@keyframes vss-konf-let {
  0%   { transform: translate(0, 0) scale(.3) rotate(0deg); animation-timing-function: steps(1); }
  33%  { transform: translate(calc(var(--x) * .45), calc(var(--y) * .45)) scale(1.15) rotate(calc(var(--r) * .4)); animation-timing-function: steps(1); }
  66%  { transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r)); animation-timing-function: steps(1); }
  100% { transform: translate(calc(var(--x) * 1.3), calc(var(--y) * 1.3)) scale(.85) rotate(calc(var(--r) * 1.4)); }
}
.vs[data-vstup="strih"] .vss__konf { opacity: 0; }
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__konf {
  animation: vss-kresba calc(3 * var(--f1)) linear calc(16 * var(--f1)) 1 forwards,
             vss-konf-let calc(3 * var(--f1)) calc(16 * var(--f1)) both;
}

/* ── ZÁBER 5 — mená na papieri, mimo obálky (od snímky 19) ─────────── */
.vs[data-vstup="strih"] .vss__zaber--5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.vs[data-vstup="strih"] .vss__karta {
  width: calc(var(--vs-sirka) * 0.84);
  max-width: 352px;
  background: var(--vs-papier);
  border: 6px solid var(--vs-ink);
  padding: 30px 24px 34px;
  text-align: center;
  will-change: transform;
  z-index: 2;
}
.vs[data-vstup="strih"] .vss__karta::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid var(--vs-zlata2);
  opacity: 0.8;
  pointer-events: none;
}
/* Orezaná otvorená obálka pri spodnej hrane. Mená sú VONKU, mimo obálky —
   to je to jediné, čo zákazník na starších pokusoch pochválil — ale vzťah
   „karta vyšla odtiaľto" ostáva na obraze. */
.vs[data-vstup="strih"] .vss__obalka-spodok {
  width: calc(var(--vs-sirka) * 0.66);
  margin-top: -7%;
  margin-bottom: -9%;
  position: relative;
  z-index: 0;
}
@keyframes vss-s5-spodok {
  0%, 33% { transform: scale(1);         animation-timing-function: steps(1); }
  66%     { transform: scale(1.06, .94); animation-timing-function: steps(1); }
  100%    { transform: scale(1); }
}
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__obalka-spodok {
  transform-origin: 50% 100%;
  animation: vss-s5-spodok calc(3 * var(--f1)) calc(20 * var(--f1)) both;
}

/* Karta pribuchne: prilieta stlačená, prestrelí, dosadne na −1,5°.
   Nikdy nezastaví presne na nule — nula je najspoľahlivejší signál
   „toto je počítač, nie pohyb". */
@keyframes vss-s5-karta {
  0%   { transform: scale(1.24, .80) rotate(0deg);    animation-timing-function: steps(1); }
  33%  { transform: scale(.90, 1.13) rotate(-3.2deg); animation-timing-function: steps(1); }
  66%  { transform: scale(1.05, .96) rotate(-.6deg);  animation-timing-function: steps(1); }
  100% { transform: scale(1) rotate(-1.5deg); }
}
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__karta {
  animation: vss-s5-karta calc(3 * var(--f1)) calc(19 * var(--f1)) both;
}

.vs[data-vstup="strih"] .vss__nadpis {
  margin: 0;
  font-family: var(--vs-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--vs-zlata2);
  text-transform: uppercase;
  /* Vyrovnáva medzeru, ktorú preloženie pridá ZA posledné písmeno. */
  text-indent: 0.4em;
}
/* Preloženie leží na SPANE, nie na odseku. Zmenšuje sa totiž span (nadpis
   nesie zákazníkov text a pri dlhej vete mu JS uberá stupeň), a em na
   rodičovi sa počíta z rodičovských 10 px — tracking by tak ostal pri každej
   veľkosti rovnako široký a zožral by celý zisk zo zmenšovania. */
.vs[data-vstup="strih"] .vss__nadpis span { letter-spacing: 0.4em; }
.vs[data-vstup="strih"] .vss__meno { line-height: 0.98; margin: 10px 0 0; }
.vs[data-vstup="strih"] .vss__nadpis span,
.vs[data-vstup="strih"] .vss__meno span,
.vs[data-vstup="strih"] .vss__amp span,
.vs[data-vstup="strih"] .vss__datum span {
  display: inline-block;
  white-space: nowrap;
  opacity: 0;
  will-change: transform;
}
/* Východiskové stupne. Skutočnú veľkosť dosadí JS podľa dĺžky mien —
   toto je len poistka, keby sadzba z akéhokoľvek dôvodu neprebehla. */
.vs[data-vstup="strih"] .vss__meno span { color: var(--vs-ink); font-weight: 400; font-size: 2.2rem; }
.vs[data-vstup="strih"] .vss__amp { margin: 2px 0; }
.vs[data-vstup="strih"] .vss__amp span { color: var(--vs-akcent); font-style: italic; font-size: 1.6rem; }
.vs[data-vstup="strih"] .vss__ciarka {
  width: 54px;
  height: 3px;
  background: var(--vs-zlata2);
  margin: 16px auto 12px;
}
.vs[data-vstup="strih"] .vss__datum {
  margin: 0;
  font-family: var(--vs-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--vs-akcent);
  text-transform: uppercase;
}

/* Dosad textu: prílet → prestrel → protipohyb → pokoj. Klesajúca amplitúda
   34 → 7 → 3 → 0 je to, čo oko číta ako pružinu. */
@keyframes vss-dosad {
  0%   { transform: translateY(34px) scale(.84, 1.18); animation-timing-function: steps(1); }
  33%  { transform: translateY(-7px) scale(1.18, .86); animation-timing-function: steps(1); }
  66%  { transform: translateY(3px)  scale(.97, 1.03); animation-timing-function: steps(1); }
  100% { transform: translateY(0) scale(1); }
}
/* Zjavenie je samostatná animácia na opacite, aby dosad mohol mať
   fill-mode both bez toho, aby prvok blikol v štartovacej póze. */
@keyframes vss-zjav { from, to { opacity: 1; } }

.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__nadpis span { animation: vss-dosad calc(2 * var(--f1)) calc(19 * var(--f1)) both, vss-zjav var(--f1) linear calc(19 * var(--f1)) forwards; }
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__meno--a span { animation: vss-dosad calc(3 * var(--f1)) calc(20 * var(--f1)) both, vss-zjav var(--f1) linear calc(20 * var(--f1)) forwards; }
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__amp span     { animation: vss-dosad calc(2 * var(--f1)) calc(21 * var(--f1)) both, vss-zjav var(--f1) linear calc(21 * var(--f1)) forwards; }
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__meno--b span { animation: vss-dosad calc(3 * var(--f1)) calc(22 * var(--f1)) both, vss-zjav var(--f1) linear calc(22 * var(--f1)) forwards; }
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__datum span   { animation: vss-dosad calc(2 * var(--f1)) calc(24 * var(--f1)) both, vss-zjav var(--f1) linear calc(24 * var(--f1)) forwards; }

/* Konfety, ktoré dopadnú na kartu — sekundárny pohyb, dobiehajú za menami
   a majú menšiu amplitúdu. Modul ich nepostaví vôbec, keď si ich zákazník
   vypol; toto je len ich partitúra. */
@keyframes vss-konf-sad {
  0%   { transform: translate(var(--x), -140px) rotate(0deg);   animation-timing-function: steps(1); }
  40%  { transform: translate(var(--x), -30px)  rotate(200deg); animation-timing-function: steps(1); }
  70%  { transform: translate(var(--x), 6px)    rotate(320deg); animation-timing-function: steps(1); }
  100% { transform: translate(var(--x), 0)      rotate(340deg); }
}
.vs[data-vstup="strih"] .vss__sad {
  position: absolute;
  left: 50%;
  width: 10px;
  height: 10px;
  opacity: 0;
  z-index: 7;
  will-change: transform;
}
.vs[data-vstup="strih"] .vss__sad--1 { background: var(--vs-zlata);   --x: -132px; top: 40%; }
.vs[data-vstup="strih"] .vss__sad--2 { background: var(--vs-akcent);  --x: 130px;  top: 57%; width: 8px; height: 13px; }
.vs[data-vstup="strih"] .vss__sad--3 { background: var(--vs-papier2); --x: -124px; top: 66%; }
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__sad--1 { animation: vss-konf-sad calc(4 * var(--f1)) calc(23 * var(--f1)) both, vss-zjav var(--f1) linear calc(23 * var(--f1)) forwards; }
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__sad--2 { animation: vss-konf-sad calc(4 * var(--f1)) calc(24 * var(--f1)) both, vss-zjav var(--f1) linear calc(24 * var(--f1)) forwards; }
.vs[data-vstup="strih"]:not([data-faza="pokoj"]) .vss__sad--3 { animation: vss-konf-sad calc(4 * var(--f1)) calc(25 * var(--f1)) both, vss-zjav var(--f1) linear calc(25 * var(--f1)) forwards; }

/* ── prispôsobenia ────────────────────────────────────────────────────
   Nízke okno = telefón na šírku alebo otvorená klávesnica. Orezaná obálka
   pod kartou je prvá, čo ide preč — je to doplnok spojitosti, nie obsah. */
@media (max-height: 560px) {
  .vs[data-vstup="strih"] .vss__pokoj { gap: 14px; }
  .vs[data-vstup="strih"] .vss__obalka-pokoj { width: calc(var(--vs-sirka) * 0.62); max-height: 40svh; }
  /* Selektor je zámerne celý — pravidlo `.vs svg { display: block }` v
     motore by nad holou triedou vyhralo špecifickosťou. */
  .vs[data-vstup="strih"] .vss__obalka-spodok { display: none; }
  .vs[data-vstup="strih"] .vss__karta { padding: 18px 20px 22px; }
  .vs[data-vstup="strih"] .vss__ramik { inset: 10px; }
}
@media (min-width: 760px) {
  .vs[data-vstup="strih"] { --vs-sirka: 460px; }
}

/* ══════════════════════════════════════════════════════════════════════
   BEZ POHYBU — hosť dostane rovno VÝSLEDOK, nie zrýchlený pohyb.
   Motor takej vrstve nasadí data-bez-pohybu="ano" a data-faza="koniec",
   čím vypne všetky animácie. Zábery sú ale skryté cez opacity a visibility,
   takže bez tohto bloku by ostala prázdna obrazovka.
   ══════════════════════════════════════════════════════════════════════ */
.vs[data-vstup="strih"][data-bez-pohybu="ano"] .vss__pokoj,
.vs[data-vstup="strih"][data-bez-pohybu="ano"] .vss__zaber--1,
.vs[data-vstup="strih"][data-bez-pohybu="ano"] .vss__zaber--2,
.vs[data-vstup="strih"][data-bez-pohybu="ano"] .vss__zaber--3,
.vs[data-vstup="strih"][data-bez-pohybu="ano"] .vss__zaber--4,
.vs[data-vstup="strih"][data-bez-pohybu="ano"] .vss__blesk { display: none; }
.vs[data-vstup="strih"][data-bez-pohybu="ano"] .vss__zaber--5 { opacity: 1; visibility: visible; }
.vs[data-vstup="strih"][data-bez-pohybu="ano"] .vss__karta,
.vs[data-vstup="strih"][data-bez-pohybu="ano"] .vss__obalka-spodok { transform: none; }
.vs[data-vstup="strih"][data-bez-pohybu="ano"] .vss__nadpis span,
.vs[data-vstup="strih"][data-bez-pohybu="ano"] .vss__meno span,
.vs[data-vstup="strih"][data-bez-pohybu="ano"] .vss__amp span,
.vs[data-vstup="strih"][data-bez-pohybu="ano"] .vss__datum span { opacity: 1; transform: none; }
.vs[data-vstup="strih"][data-bez-pohybu="ano"] .vss__sad,
.vs[data-vstup="strih"][data-bez-pohybu="ano"] .vss__lupen { display: none; }