/* ========================================================================== epozvanka.sk — SPOLOČNÁ VRSTVA VSTUPNEJ ANIMÁCIE Tu je len JAVISKO: vrstva, scéna, tlačidlo Preskočiť, hodiny a poistky. Kresba ani partitúra jednotlivých animácií sem NEPATRÍ — každá si ich prinesie sama a celé svoje CSS drží pod `.vs[data-vstup=""]`. PREČO POD SELEKTOROM A NIE NA :root: tri zo štyroch prototypov deklarovali farby na :root. Keby sa portli tak, ako sú, prepisovali by si paletu navzájom — a piata animácia by rozbila štyri existujúce. Farby sem nedotečú po strome (vrstva visí na , mimo pozvánky), preto ich JS nastaví ako --vs-* priamo na .vs. V tomto súbore zámerne NIE SÚ záložné hodnoty: keď paleta chýba, motor vrstvu vôbec nepostaví. Lepšia žiadna obálka než bezfarebná. Nikde nie je miešanie farieb funkciou zo CSS Color 5 — Chrome pod 111 by zahodil celú deklaráciu. Animuje sa výhradne transform a opacity. ========================================================================== */ .vs, .vs *, .vs *::before, .vs *::after { box-sizing: border-box; } .vs { /* Hodiny. Jedna snímka pri 12 fps; celá partitúra každej animácie sa počíta v jej násobkoch — calc(N * var(--f1)). Motor ju prepíše inline, aby bola jedna pravda v JS aj v CSS. */ --f1: 83.33ms; /* Šírka „javiska". Kresby sa merajú od nej, nie od okna — na širokom monitore má pozvánka ostať pozvánkou, nie plagátom cez tri metre. */ --vs-sirka: min(100vw, 430px); position: fixed; inset: 0; z-index: 9990; overflow: hidden; background: var(--vs-bg); color: var(--vs-ink); font-family: var(--vs-serif); cursor: pointer; /* Vlastný stohovací kontext: nič zo stránky pod vrstvou sa nesmie pretlačiť medzi jej vlastné vrstvy. */ isolation: isolate; user-select: none; -webkit-user-select: none; /* Bez toho čaká Safari 300 ms, či nepríde dvojťuk — a prvý úder sekvencie sa o toľko oneskorí. */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; opacity: 1; transition: opacity 0.45s linear; } /* Odchod. Musí sedieť s konštantou ODCHOD v js/vstup.js. */ .vs[data-odchod="ano"] { opacity: 0; pointer-events: none; } /* ── javisko ────────────────────────────────────────────────────────── Výšku vrstvy určuje inset: 0, ale scéna sa riadi tým, čo je NAOZAJ vidieť — iOS rozlišuje tri rôzne „výšky okna" a fixná vrstva sa počíta voči inej, než je viditeľná. Motor preto meria visualViewport a hodnotu sem podá ako --vs-vyska. Keby meranie zlyhalo, 100 % je bezpečný odhad; prípadný pás dole má tak či tak farbu podkladu. */ .vs__scena { position: absolute; inset: 0; height: var(--vs-vyska, 100%); display: grid; place-items: center; overflow: hidden; } /* Prstenec berie tú istú čitateľnú farbu ako výzva. Ozdobná zlatá sa odvodzuje od dizajnu a kontrolné meranie ju našlo nevyhovujúcu na 118 zo 124 dizajnov — na 26 z nich presne 1,00 : 1, čiže neviditeľnú. */ .vs__scena:focus-visible { outline: 3px solid var(--vs-vyzva, var(--vs-zlata)); outline-offset: -3px; } /* KRITICKÉ pre SVG: bez fill-box sa transform-origin počíta z viewBoxu celého SVG, nie z prvku — a všetko sa točí okolo náhodného bodu. */ .vs svg g, .vs svg path, .vs svg rect, .vs svg circle, .vs svg ellipse, .vs svg polygon, .vs svg use, .vs svg text { transform-box: fill-box; transform-origin: 50% 50%; } /* Aby squash & stretch nestenčoval linku. Tenká deformovaná linka je presne ten efekt „zo skicára", ktorý zákazník raz odmietol. */ .vs svg [stroke] { vector-effect: non-scaling-stroke; } .vs svg { overflow: visible; display: block; } /* Keby modul raz priniesol obrázok, nesmie roztiahnuť javisko. */ .vs img, .vs svg { max-width: 100%; } /* ── tlačidlo Preskočiť ─────────────────────────────────────────────── Hore vpravo zámerne. Dole ho na iPhone opakovane prekrývala systémová lišta a hosť sa z vrstvy nedostal inak než obnovením stránky. */ .vs__preskoc { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); z-index: 30; font-family: var(--vs-sans); /* 11 px. Je to jediná cesta, ako sa dá animácia preskočiť — kto ju vidí druhý raz, hľadá presne toto. Pod 12 px nemá čo robiť. */ font-size: 12px; font-weight: 700; letter-spacing: 0.18em; /* letter-spacing pridá medzeru aj za posledné písmeno — text by inak sedel v pilulke o kúsok vľavo. */ text-indent: 0.18em; text-transform: uppercase; /* Vlastná tmavá pilulka, NIE farba z palety. Predtým tu stálo color: var(--vs-ink) na priehľadnom podklade, s tým, že atrament sa obracia so štýlom a čitateľnosť si udrží. Neudržal: scéna pod tlačidlom nie je papier pozvánky, ale čokoľvek, čo tam modul práve kreslí. Namerané kontrasty tlačidla proti tomu, čo je pod ním: čierna kravata 1,00 : 1 (atrament a podklad tá istá farba) brutal 1,00 : 1 konfety 2,03 : 1 zlatá linka 3,02 : 1 Pri „čiernej kravate" bolo tlačidlo doslova neviditeľné — ostal len prázdny zlatý ovál. Tmavá pilulka si podklad nesie so sebou, takže nezávisí od štýlu ani od toho, čo je práve za ňou. Najhorší prípad (biela scéna pod ňou) dáva 6,4 : 1, najlepší 19 : 1. Písmo ostáva malé a nenápadné — únik nemá súperiť s pozvánkou o pozornosť, len musí byť vidieť. */ color: #fff; background: rgba(12, 12, 18, 0.72); border: 1px solid rgba(255, 255, 255, 0.42); border-radius: 999px; padding: 8px 14px; cursor: pointer; /* 0,75 zrážalo najhorší prípad na 4,25 : 1, tesne pod hranicu. */ opacity: 0.92; /* 44 px je najmenší terč, ktorý sa dá na telefóne trafiť palcom. Text je malý zámerne — únik nemá súperiť s pozvánkou o pozornosť. */ min-height: 44px; display: inline-flex; align-items: center; } .vs__preskoc:hover { opacity: 1; } /* Dvojitý prstenec drží nad čímkoľvek: biely vnútorný na tmavej pilulke, tmavý vonkajší na svetlej scéne. Z palety sa neberie nič — z rovnakého dôvodu ako pri samotnom tlačidle. */ .vs__preskoc:focus-visible { opacity: 1; outline: 3px solid #fff; outline-offset: 0; box-shadow: 0 0 0 6px rgba(12, 12, 18, 0.9); } /* ── poistky ────────────────────────────────────────────────────────── Kto má vypnutý pohyb, dostane rovno VÝSLEDOK, nie zrýchlený pohyb. Motor takej vrstve nasadí data-faza="koniec" hneď pri vzniku; toto je druhá poistka pre moduly, ktoré si niečo spúšťajú samy po vložení. */ .vs[data-bez-pohybu="ano"], .vs[data-bez-pohybu="ano"] *, .vs[data-bez-pohybu="ano"] *::before, .vs[data-bez-pohybu="ano"] *::after { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { .vs, .vs *, .vs *::before, .vs *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } } /* Nízke okno = telefón na šírku alebo otvorená klávesnica. Hranica je 560 px zámerne nízko: pri 620 px by sa zmenšená verzia zapla aj na iPhone SE na výšku (568 px), kde sa plná kompozícia pohodlne zmestí. */ @media (max-height: 560px) { .vs { --vs-sirka: min(100vw, 340px); } }