/* scena1.css - sceny 0–1 strony lararium.eu wg scenariusza v5 (Kamil 10.10); nazwy elementow: notatka „Slownik systemu”.
   Swiat czarno-bialy; czerwien tylko w kwiecie na obrazie/filmie - zaden element UI nie jest czerwony. */
@font-face { font-family: "Inter"; src: url("../zasoby/Inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: block; }

/* ---------- uklad: wejscie i scena 1 dziela przyklejona plansze; dlugosc sceny 1 ok. 2 ekranow przewijania przy predkosci 0,5 ---------- */
#scena01 { position: relative; height: 420vh; height: 420svh; background: #000; }
#scena0.scena-stoj { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #000; }
#scena2 { position: relative; height: 100vh; height: 100svh; background: #dbdbd8; }   /* = kolor sciany mgly na koncu sceny 1 (scena 2 w budowie) */
#zaslepka { display: none; }

/* ---------- Napis wejscia: ciemny na jasnej mgle (jak logo jasne nr 2), na prawo od kwiatu ---------- */
.napis-blok { padding-left: 36vw; background: none; }   /* napis na prawo od kwiatu - nie zaslania go (Kamil 10.10) */
.napis-blok::before, .wejscie-ruch .napis-blok::before { display: none; }
.napis { color: #161616; font-size: clamp(44px, 6vw, 104px); transform-origin: 50% 50%; will-change: transform; }
/* haslo H2 (Kamil 10.10): Cinzel, kapitaliki z kropkami rzymskimi miedzy slowami - jak inskrypcja; 15 px przy 1920 */
.haslo { color: #262626; margin-top: 22px; font: 500 clamp(12px, .78vw, 16px)/1 "Cinzel", serif; letter-spacing: .42em; padding-left: .42em; }

/* ---------- czasteczki napisu (js/czastki.js): plotno nad strona i paskiem, nie lapie myszy ---------- */
#czastki { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 60; pointer-events: none; }

/* ---------- Aura (mysz): biala kropka zamiast strzalki - takze nad linkami i przyciskami ---------- */
html.aura-mysz, html.aura-mysz *, html.aura-czeka, html.aura-czeka * { cursor: none !important; }   /* przed pierwszym przewinieciem kursor schowany */
#kropka { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 100; pointer-events: none; display: none; will-change: transform; }
html.aura-mysz:not(.aura-czeka) #kropka { display: block; }
#kropka i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }

/* ---------- tekst sceny 1 — typografia A (Kamil 10.10): nagłówek Cinzel (kapitaliki jak logo) + tekst Inter; dwa kroje na stronie ----------
   analiza: ~/praca-brygady/analizy/2026-10-10-typografia-strony.md; miekka poswiata pod tekstem dla kontrastu na mgle (druga opinia) */
/* Kamil 10.10 ~21:30: tekst w MIEJSCU napisu LARARIUM (ten sam srodek co .napis-blok: od 36vw do 96vw, w pionie srodek), wysrodkowany;
   tytul w dwoch liniach („Zobacz tylko to,” / „co ważne.”), pod nim akapity jak w probie P3, zaraz pod nimi „Przewiń”.
   Poswiata mocniejsza (proba P11, pomiar kontrastu: narzedzia-testow/kontrast_t7.sh) - przy wysrodkowanym tekscie slabsza dawala akapit 2,6:1. */
/* srodek tytulu na wysokosci srodka napisu LARARIUM (47,6% wysokosci - zrzut wejscia: litery 478–550 px przy 1080); tytul ma 2 linie po 1,25 em */
.tekst1 { position: absolute; inset: 0; isolation: isolate; padding: calc(47.6vh - 1.25 * clamp(32px, 3vw, 54px)) 4vw 0 36vw; padding-top: calc(47.6svh - 1.25 * clamp(32px, 3vw, 54px));
  display: grid; place-items: start center; color: #141414; pointer-events: none; text-align: center; }
.tekst1 .warstwa { grid-area: 1 / 1; position: relative; width: min(800px, 56vw); transition: opacity .8s ease .3s, filter .8s ease .3s, visibility 0s .3s; }
/* Kamil 11.10: poswiata CSS usunieta - lezala na napisie LARARIUM i hasle przez cale wejscie (napis 22 -> 124 jasnosci); za tekstem jest teraz chmura z shadera mgly */
html[lang=pl] [data-l=en], html[lang=en] [data-l=pl] { opacity: 0; filter: blur(14px); visibility: hidden; transition: opacity .7s ease, filter .7s ease, visibility 0s .7s; }
.tytul1 { margin: 0 0 28px; font: 500 clamp(32px, 3vw, 54px)/1.25 "Cinzel", serif; letter-spacing: .06em; }
.tytul1 .s { display: inline-block; white-space: nowrap; }
.tytul1 .z { display: inline-block; white-space: pre; opacity: 0; }
/* T7 (Kamil 10.10): Inter Light, „Przewiń” wersalikami z opadajaca kreska pod spodem */
.akapit1 { margin: 0 auto 12px; max-width: 46ch; font: 300 clamp(16px, 1.05vw, 19px)/var(--interlinia, 1.75) "Inter", sans-serif; color: #111; opacity: 0; }
.cicho1 { margin: 26px auto 0; font: 500 clamp(10px, .6vw, 11px)/1.6 "Inter", sans-serif; letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; color: #1c1c1c; opacity: 0; }
.tekst1.akapit-on .akapit1, .tekst1.cicho-on .cicho1 { opacity: 1; }

/* ---------- Pigulka (Gooey): szklo jasne szronione z ciemnym tekstem (Kamil 10.10) ---------- */
/* Kamil 11.10: pasek na cala szerokosc ekranu (szklo przydymione jak oryzo, ostre rogi); wskaznik Gooey przy najechaniu zostaje; wieksze odstepy */
.pigulka-host { position: fixed; top: 0; left: 50%; width: 100vw; z-index: 40; transform: translateX(-50%) translateY(-90px); opacity: 0; pointer-events: none; }
.pigulka-host.aktywna { pointer-events: auto; }
.g-grupa { padding-bottom: 190px; pointer-events: none; }                   /* rezerwa na rozwiniete okno logowania: filtr rysuje tylko w ramce grupy */
.g-grupa > svg[data-gooey-svg] { opacity: .68; }                           /* biel 68% (Kamil 10.10: wyglad jak przy wjezdzie — przy ciemniejszym kadrze 50% wygladalo szaro) */
.g-pigulka { pointer-events: auto; padding: 9px 5px; border-radius: 0; overflow: hidden; display: flex; justify-content: center;
  backdrop-filter: blur(14px) brightness(1.18); -webkit-backdrop-filter: blur(14px) brightness(1.18);   /* rozjasnione tlo pod szklem: stala jasnosc pigulki na kazdym kadrze */ border: 1px solid rgba(255,255,255,.3); }
.g-wew { display: flex; align-items: center; height: 38px; }
.g-wew > svg[data-gooey-svg] { opacity: .1; filter: invert(1); }           /* wskaznik: lekko przyciemnione szklo */
.g-wew a { position: relative; z-index: 1; display: grid; place-items: center; height: 38px; color: #151515; text-decoration: none;
  font: 500 11px "Inter", sans-serif; letter-spacing: .3em; text-transform: uppercase; padding: 0 19px; white-space: nowrap; }   /* kroj nr 3 (wybor Kamila 11.10): Inter wersaliki rozstrzelone, jak „Przewin” */
.g-wew a.ikona { padding: 0 14px; }
.g-wew a:focus-visible { outline: 2px solid #151515; outline-offset: -4px; border-radius: 999px; }
.g-sep { width: 1px; height: 18px; margin: 0 9px; background: rgba(0,0,0,.25); flex: none; }
.g-wskaznik { position: absolute; left: 0; top: 3px; height: 32px; border-radius: 999px; transform-origin: 50% 50%;
  transition: transform .38s cubic-bezier(.25,.8,.3,1), width .38s cubic-bezier(.25,.8,.3,1); }
.g-lot { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }   /* kropla przelotu napisu (ksztalt dla filtra Gooey) */
/* Kamil 11.10 ~14:20: pozycje paska stoja w tym samym miejscu w kazdym jezyku - obie wersje leza w jednej komorce (szerokosc = dluzsza z nich),
   wiec zmiana jezyka niczego nie przesuwa; stary napis zanika w pasku, potem w tym samym miejscu pojawia sie nowy */
.j { grid-area: 1 / 1; text-align: center; transition: opacity .28s ease .26s, filter .28s ease .26s, visibility 0s .26s; }
html[lang=pl] .j[data-l=en], html[lang=en] .j[data-l=pl] { opacity: 0; filter: blur(3px); visibility: hidden; transition: opacity .24s ease, filter .24s ease, visibility 0s .24s; }
.logo-zestaw { display: inline-flex; align-items: center; gap: 8px; }
.logo-zestaw img { height: 26px; width: auto; display: block; opacity: 0; }   /* znak, jak slowo, pojawia sie dopiero, gdy uloza go czasteczki */
.logo-slowo { font: 500 15px "Cinzel", serif; letter-spacing: .14em; line-height: 1; opacity: 0; }   /* widoczne po przelocie napisu */
/* Okno logowania: samo szklane okno jest kropla - ksztalt i polozenie animuje JS (wariant f) */
.g-panel { position: absolute; right: 8px; top: 6px; width: 38px; height: 38px; border-radius: 19px; overflow: hidden; opacity: 0;
  pointer-events: none; color: #151515; font: 14px "Inter", sans-serif;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.3); }
.g-panel.otw { pointer-events: auto; }
.g-panel .tresc { width: 272px; padding: 14px 10px 12px; opacity: 0; }
.g-panel .tyt { font: 500 14px "Cinzel", serif; letter-spacing: .08em; padding: 0 12px 10px; display: grid; }
.g-panel .opcja { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; white-space: nowrap; transition: background .2s; }
.g-panel .opcja + .opcja { margin-top: 4px; }
.g-panel .opcja:hover, .g-panel .opcja:focus-visible { background: rgba(0,0,0,.06); outline: none; }
.g-panel .opcja svg { flex: none; }
.g-panel .opcja > span.etyk { display: grid; }
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {   /* ustawienie systemowe: pelne tlo zamiast szkla */
  .g-grupa > svg[data-gooey-svg] { opacity: .95 !important; filter: none !important; }
  .g-wew a, .g-panel { color: #111 !important; }
}

/* ---------- ograniczony ruch: tekst i pigulka od razu, bez przelotu, liter, aury i najazdu ---------- */
@media (prefers-reduced-motion: reduce) {
  .pigulka-host { transform: translateX(-50%); opacity: 1; pointer-events: auto; }
  .logo-slowo, .logo-zestaw img, .tytul1 .z, .akapit1, .cicho1 { opacity: 1; }
  .napis-blok { display: none; }
  /* 11.10 wieczór: bez ruchu nie ma przelotu przez mgłę - scena to jeden ekran, dół przechodzi miękko w kolor ściany mgły (#scena2),
     zamiast ostrej krawędzi zdjęcia i 320 vh pustego beżu pod nią */
  #scena01 { height: auto; }
  #scena0::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22vh; z-index: 5; pointer-events: none; background: linear-gradient(rgba(219,219,216,0), #dbdbd8); }
}

/* ---------- test szkla oryzo.ai (?szklo=oryzo, Kamil 11.10): szklo rysuje WebGL (js/mgla.js), tu tylko jasny tekst i wylaczenie szkla CSS ---------- */
html.szklo-oryzo .g-pigulka { backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent; }
html.szklo-oryzo .g-grupa > svg[data-gooey-svg] { opacity: 0; }
html.szklo-oryzo .g-wew a, html.szklo-oryzo .logo-slowo { color: #111; }   /* Kamil 11.10 (druga uwaga): napisy paska czarne, zeby pasowaly do kolorowego logo */
html.szklo-oryzo .g-sep { background: rgba(0,0,0,.28); }
html.szklo-oryzo .g-panel { backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent; color: #141414; }
/* okno logowania jako karta oryzo (Kamil 11.10 po poludniu): ostre rogi, szklo paska; ksztalt i polozenie ustawia JS (ksztaltKarty) */
html.szklo-oryzo .g-panel { border-radius: 0; border: 0; }
html.szklo-oryzo .g-panel .tresc { width: 296px; padding: 22px 16px 16px; }
html.szklo-oryzo .g-panel .tyt { font: 500 12px "Cinzel", serif; letter-spacing: .3em; text-transform: uppercase; padding: 0 12px 14px; }
html.szklo-oryzo .g-panel .opcja { border-radius: 0; font: 400 14px "Inter", sans-serif; padding: 12px 12px; }
html.szklo-oryzo .g-panel .opcja + .opcja { margin-top: 0; border-top: 1px solid rgba(0,0,0,.10); }
html.szklo-oryzo .g-panel .opcja:hover, html.szklo-oryzo .g-panel .opcja:focus-visible { background: rgba(0,0,0,.07); }
html.szklo-oryzo .g-wew > svg[data-gooey-svg] { opacity: .12; filter: invert(1); }   /* wskaznik przy najechaniu: ciemna kropla na jasnym szkle (Kamil 11.10 ~05:15: szklo jasne) */
html.szklo-oryzo:not(.tekst1-chmura) .tekst1 .warstwa { width: min(760px, 52vw); padding: 44px 48px 40px; color: #141414; }
html.szklo-oryzo .tekst1 .warstwa::before { display: none; }
html.szklo-oryzo:not(.tekst1-chmura) .tekst1 .akapit1, html.szklo-oryzo:not(.tekst1-chmura) .tekst1 .cicho1 { color: #1c1c1c; }

/* ---------- TELEFON (pion) — 13.10, błędy H37 z analizy Awwwards: kwiat ucięty, „LARARI/UM”, tekst przy prawej krawędzi ----------
   Kadr przesunięty tak, by środek kwiatu (x ≈ 0,27 szerokości zdjęcia) był na środku ekranu; napisy nad kwiatem, wyśrodkowane, z marginesem 6vw. */
@media (max-aspect-ratio: 4/5) {
  .plansza { left: calc(50vw + .23 * 100svh * var(--ar)); }
  .napis-blok { padding: 15svh 6vw 0; justify-content: flex-start; }
  .napis { font-size: 10.5vw; white-space: nowrap; }
  .tekst1 { padding: 7svh 6vw 0; }
  .tekst1 .warstwa { width: 88vw; }
  .tytul1 { font-size: 7.8vw; margin-bottom: 14px; }
  .akapit1 { font-size: 15.5px; }
}
/* Kamil 13.10: szklo paska znikalo od sceny torii - szklo WebGL rysuje plotno mgly sceny 0-1, ktore odjezdza z ekranu.
   Za scena 0-1 (klasa poza-mgla z js/scena1.js, przelacza sie, gdy pasek lezy jeszcze w calosci nad mgla) pasek dostaje szklo przegladarki
   wiernie odtwarzajace szklo WebGL (js/mgla.js FS_SZKLO, DYM z js/scena1.js): biel .95 krycie .22, rozmycie (dysk 4% wysokosci ~ gauss 2vh),
   ziarno z tego samego szumu niebieskiego (zasoby/szklo-ziarno.png, +-.008 - rozrzut jasnosci jak w WebGL: 1,3), jasna krawedz 2 px slabnaca od lewego gornego rogu.
   Bez brightness: w 1013f rozjasnienie dawalo skok jasnosci paska 224 -> 250 (pomiar zrzutow 13.10). */
html.szklo-oryzo.poza-mgla .g-pigulka, html.szklo-oryzo.poza-mgla .g-panel {
  backdrop-filter: blur(2vh); -webkit-backdrop-filter: blur(2vh); border-color: transparent; background-origin: border-box; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-image: linear-gradient(to right, rgba(255,255,255,.58), rgba(255,255,255,.3)), linear-gradient(to right, rgba(255,255,255,.5), rgba(255,255,255,0)),
    linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.4)), linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.1)), url("../zasoby/szklo-ziarno.png");
  background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%, 128px 128px; background-position: 0 0, 0 100%, 0 0, 100% 0, 0 0; background-color: rgba(242,242,240,.22); }