/* Scena pokazów z /laboratorium (DESIGN.md, „Laboratorium”): ciemny tor przewijania z przyklejonym płótnem WebGL, napisy aktów,
   licznik klatek i kropki aktów; bez WebGL2 i bez JS obraz zastępczy i lista aktów pod nim. */
/* scena pokazu ma jeden, świadomie ciemny wygląd w obu motywach (przedmiot jak ciemne pasmo); reszta strony idzie za motywem */
.lab-tor { --lab-tlo: #050505; --lab-tekst: #efede6; --lab-tekst-2: #c4c1b6; --lab-linia: #2f2e29;
  position: relative; background: var(--lab-tlo); color: var(--lab-tekst); }
.lab-scena { position: relative; }
.lab-plakat { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.lab-scena canvas { display: none; }
.lab-akty { box-sizing: border-box; display: grid; gap: 2rem; padding: 2.5rem clamp(1rem, 4vw, 2.5rem) 3.5rem; max-width: 82rem; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.lab-akt { min-width: 0; }
.lab-akt:first-child { grid-column: 1 / -1; }
.lab-akt h1, .lab-akt h2 { font-weight: 850; font-stretch: 112%; line-height: 1; letter-spacing: -.035em; margin: 0 0 .9rem; text-wrap: balance; }
.lab-akt h1 { font-size: clamp(2rem, 1.3rem + 3.6vw, 4.4rem); }
.lab-akt h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.3rem); overflow-wrap: break-word; }
.lab-dziala .lab-akt h2 { font-size: clamp(1.7rem, 1.2rem + 2.6vw, 3.4rem); }
.lab-akt p { margin: 0; max-width: 27em; font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); line-height: 1.55; color: var(--lab-tekst-2); text-wrap: pretty; }
.lab-akt b { color: var(--lab-tekst); font-weight: 700; }
.lab-hud { display: none; }

/* z WebGL2 (klasa z js/lab-*.js): scrollytelling. Scena przyklejona na cały ekran, a kroki historii płyną nad nią przy
   przewijaniu, każdy na wysokość ekranu; etap sceny liczy się ciągle z położenia toru, więc ruch idzie za tekstem.
   Bieżący krok w pełnym kolorze, pozostałe przygaszone kolorem (nie przezroczystością). */
.lab-dziala .lab-scena { position: sticky; top: 0; height: 100svh; overflow: clip; }
.lab-dziala .lab-scena canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--krzywa); touch-action: pan-y; }
.lab-dziala .lab-plakat { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; transition: opacity 1.2s var(--krzywa); }
.lab-dziala .lab-scena.gotowa canvas { opacity: 1; }
.lab-dziala .lab-scena.gotowa .lab-plakat { opacity: 0; }
.lab-dziala .lab-scena::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgb(5 5 5 / .9), rgb(5 5 5 / .45) 32%, transparent 55%); }
.lab-dziala .lab-akty { display: block; position: relative; z-index: 2; max-width: none; margin: -100svh 0 0; padding: 0; pointer-events: none; }
.lab-dziala .lab-akt { box-sizing: border-box; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 clamp(1rem, 5vw, 4rem) clamp(3rem, 10vh, 6rem); text-shadow: 0 1px 18px rgb(5 5 5 / .85); }
.lab-dziala .lab-akt h1, .lab-dziala .lab-akt h2, .lab-dziala .lab-akt p, .lab-dziala .lab-akt b { transition: color .45s var(--krzywa); }
.lab-dziala .lab-akt:not(.jest) h1, .lab-dziala .lab-akt:not(.jest) h2 { color: #8a877e; }
.lab-dziala .lab-akt:not(.jest) p, .lab-dziala .lab-akt:not(.jest) b { color: #6f6d66; }
.lab-dziala .lab-akt:last-child { min-height: 130svh; }
.lab-dziala .lab-hud { display: block; position: absolute; z-index: 3; top: calc(4.6rem + env(safe-area-inset-top, 0px)); right: clamp(1rem, 4vw, 2.5rem); margin: 0;
  font-family: var(--mono); font-size: var(--drobny); color: var(--lab-tekst-2); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  /* na komputerze tekst w lewej kolumnie na środku wysokości, scena po prawej (kamery pokazów przesuwają obiekt w prawo) */
  .lab-dziala .lab-scena::after { background: linear-gradient(to right, rgb(5 5 5 / .82), rgb(5 5 5 / .5) 30%, transparent 52%); }
  .lab-dziala .lab-akt { justify-content: center; padding-bottom: 0; }
  .lab-dziala .lab-akt > * { max-width: min(30rem, 42vw); }
  .lab-dziala .lab-akt:first-child { justify-content: flex-end; padding-bottom: clamp(4rem, 14vh, 8rem); }
}
@media (prefers-reduced-motion: reduce) {
  .lab-dziala .lab-scena canvas, .lab-dziala .lab-plakat, .lab-dziala .lab-akt * { transition: none; }
}

/* ekran wczytywania (js/lab-gl.js, ladowanie()): czarna plansza nad sceną z licznikiem 0–100%. Cyfry rozciągają się na osi szerokości
   z 62% do 125% i rozjaśniają z szarości (stare = ściśnięte, nowe = szerokie), pod nimi rośnie limonkowe cięcie pochylone o 19°;
   na koniec plansza schodzi ukośnym cięciem. Bez animacji w pętli: wszystko idzie za postępem (zmienna --p). */
.lab-wczyt { position: fixed; inset: 0; z-index: 1000; display: grid; place-content: center; justify-items: center; gap: 1.4rem;
  --lab-tlo: #050505; --lab-tekst: #efede6; --lab-tekst-2: #c4c1b6; background: var(--lab-tlo); color: var(--lab-tekst); opacity: 0; transition: opacity .25s; --p: 0; }
.lab-wczyt.widac { opacity: 1; }
.lab-wczyt-liczba { position: relative; margin: 0; display: flex; align-items: flex-start; font-family: var(--font); font-weight: 900; line-height: .86;
  font-size: clamp(5.5rem, 3.5rem + 13vw, 15rem); letter-spacing: -.045em; font-variant-numeric: tabular-nums;
  font-stretch: calc(62% + 63% * var(--p)); color: color-mix(in oklab, #8a877e, #efede6 calc(var(--p) * 100%)); }
.lab-wczyt-liczba::after { content: ""; position: absolute; left: -.04em; right: -.04em; bottom: -.16em; height: .11em; background: #c8f03c;
  transform: skewX(-19deg) scaleX(var(--p)); transform-origin: left center; }
.lab-wczyt-proc { font-size: .3em; font-weight: 700; font-stretch: 100%; letter-spacing: 0; margin: .18em 0 0 .12em; color: #c4c1b6; }
.lab-wczyt-etap { margin: 1.2rem 0 0; font-family: var(--mono); font-size: var(--drobny); color: var(--lab-tekst-2); }
.lab-wczyt.znika { animation: lab-wczyt-wyjscie .8s cubic-bezier(.7, 0, .2, 1) forwards; }
@keyframes lab-wczyt-wyjscie {
  from { clip-path: polygon(0% 0, 140% 0, 140% 100%, -35% 100%); }
  to { clip-path: polygon(140% 0, 140% 0, 140% 100%, 105% 100%); } }
@media (prefers-reduced-motion: reduce) {
  .lab-wczyt-liczba { font-stretch: 100%; }
  .lab-wczyt.znika { animation: none; opacity: 0; transition: opacity .3s; } }