/* wejscie.css - scena 0 (E2-42c). Swiat czarno-bialy; czerwien wylacznie w kwiecie na obrazie/filmie (nie ma jej w zadnym elemencie UI). */
/* Cinzel 500 (OFL) - krój napisu LARARIUM (wybór Kamila 10.10, logo nr 2); latin + latin-ext (polskie znaki) */
@font-face { font-family: "Cinzel"; src: url("../zasoby/Cinzel.woff2") format("woff2"); font-weight: 500; font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Cinzel"; src: url("../zasoby/Cinzel-ext.woff2") format("woff2"); font-weight: 500; font-display: block; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; src: url("../zasoby/InterItalic.woff2") format("woff2"); font-display: block; }
* { box-sizing: border-box; }
html, body { margin: 0; background: #000; color: #f2f2ef; }
body { font-family: "Inter", system-ui, sans-serif; }

/* blokada przewijania przez cale wejscie (klase dodaje js/wejscie.js: zablokuj()) */
html.blok, html.blok body { overflow: hidden; overscroll-behavior: none; }

/* ekran ladowania: znak rysuje js/ladowanie.js; gasnie po dopelnieniu znaku; przy ograniczonym ruchu zaslony nie ma */
/* styl zaslony (#ladowanie, #kanji) jest w index.html - musi dzialac takze wtedy, gdy przegladarka ma w pamieci stara wersje tego pliku */

#scena0 { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #000; }
#zaslepka { height: 200vh; background: #000; }

/* JEDEN kontener o proporcji klatki (cover, --ar ustawia JS z rozmiaru paka): obraz, film i mgla w tym samym ukladzie */
.plansza { --ar: 1.50058617; position: absolute; left: 50%; top: 50%; width: max(100vw, calc(100svh * var(--ar))); aspect-ratio: var(--ar); transform: translate(-50%, -50%); }
.plansza > .zdjecie, .plansza > .film, .plansza > .mgla { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* film jest tylko zrodlem tekstury shadera - nigdy nie widac go bezposrednio */
.plansza > .film { opacity: 0; pointer-events: none; }
.plansza > .mgla { visibility: hidden; }
.plansza.shader > .mgla { visibility: visible; }
.plansza > .zdjecie { visibility: hidden; }
.plansza.statyczny > .zdjecie { visibility: visible; }
.plansza.statyczny > .mgla { display: none; }

/* czern do pierwszej narysowanej klatki (pak); wylanianie robi shader (uV) */
.wejscie-ruch .plansza { opacity: 0; }
.wejscie-ruch .plansza.widac { opacity: 1; }

.napis-blok { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; padding: 0 4vw;
  background: radial-gradient(ellipse 55% 30% at 50% 50%, rgba(0,0,0,.38), rgba(0,0,0,0) 100%); }
.napis { margin: 0; font-family: "Cinzel", serif; font-weight: 500; font-size: clamp(40px, 7vw, 130px); line-height: 1; letter-spacing: .14em; padding-left: .14em; color: #f2f2ef; }
.napis span, .haslo span { display: inline-block; }
.haslo { margin: 1.4vw 0 0; font-family: "Inter", sans-serif; font-style: italic; font-weight: 400; font-size: clamp(16px, 1.8vw, 30px); letter-spacing: .06em; color: #e2e2de; }

/* napis wylania sie z mgly razem z rozkwitem (tylko gdy ruch dozwolony): litery po kolei, potem haslo.
   Ruch robi WAAPI w js/wejscie.js (wzor: makieta efekty-index.html, fill "backwards"); CSS trzyma tylko stan "przed" (ukryte) i "po" (widoczne). */
.wejscie-ruch .napis-blok { background: none; }
.wejscie-ruch .napis-blok::before { content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 55% 30% at 50% 50%, rgba(0,0,0,.38), rgba(0,0,0,0) 100%); }
.wejscie-ruch .napis span, .wejscie-ruch .haslo { opacity: 0; }
.wejscie-ruch .napis-on .napis span, .wejscie-ruch .napis-on .haslo { opacity: 1; }
.wejscie-ruch .napis-on .napis-blok::before { opacity: 1; transition: opacity 1.6s ease .2s; }
/* awaria filmu (error, autoplay, brak danych): napis od razu, bez przejsc (JS nie uruchamia wtedy animacji liter) */
.wejscie-ruch .napis-od-razu .napis-blok::before { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}