/* Scena „Pieniny” (nuvr Grow, Grow Club Escape). Wszystkie klasy mają prefiks sp- (scena pieniny),
   sekcja ma klasę .scene-pieniny, a <html> dostaje .sp-live, gdy scena działa.

   Bez skryptu, przy ograniczonym ruchu, bez WebGL2 albo po błędzie sekcja jest zwykłą kompozycją:
   tekst na tle studia z lewej, zdjęcie z wyjazdu z prawej (na telefonie zdjęcie nad tekstem).
   Gdy scena działa, sekcja trzyma ekran przez --sp-trzyma ekranów przewijania: wschód słońca nad makietą,
   lot przez mgłę nad jezioro, Czorsztyn ze znakiem. Na końcu wchodzi panel z tekstem: ten sam układ co kompozycja
   statyczna, tylko z widokiem 3D. Płótno i plakaty sięgają 100lvh (bez pasa tła, gdy pasek przeglądarki się schowa),
   tekst zostaje w granicach 100svh.
   Na stronie nuvr (kopia zrodlo/sceny/pieniny/final/scena.css): opisy programu, podpis godziny i nazwy miejsc
   w stopniu --step-small strony zamiast 1rem. */

.scene-pieniny {
  --sp-studio: var(--studio, #cfcfcd);  /* tło studia z portretów = powietrze sceny */
  --sp-tusz: var(--ink, #0c0c0c);
  --sp-jasny: var(--light, #efefed);
  --sp-display: var(--font-display, "Anton", "Arial Narrow", Impact, sans-serif);
  --sp-text: var(--font-text, "Work Sans", "Helvetica Neue", Arial, sans-serif);
  --sp-margin: var(--margin, max(16px, clamp(1rem, 2.2vw, 2rem)));
  --sp-gutter: var(--gutter, clamp(1rem, 2vw, 2rem));
  --sp-ease: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  --sp-pasek: 0px;  /* wysokość paska przeglądarki (100lvh - 100svh), niżej */
  position: relative;
  background: var(--sp-studio);
  color: var(--sp-tusz);
  font-family: var(--sp-text);
}
@supports (height: 100lvh) {
  .scene-pieniny { --sp-pasek: calc(100lvh - 100svh); }
}

:where(.scene-pieniny) :where(h2, p, ul, figure) { margin: 0; }
:where(.scene-pieniny) :where(ul) { padding: 0; list-style: none; }
.sp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- tekst (oba tryby) ---------- */
.sp-h {
  font-family: var(--sp-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--step-head, clamp(2.5rem, 1.2rem + 5vw, 5.5rem));
  line-height: 0.9;
  letter-spacing: -0.005em;
  max-width: 8.5ch;
}
.sp-lead {
  margin-top: clamp(1rem, 0.6rem + 1vw, 1.5rem);
  font-size: var(--step-lead, clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem));
  line-height: 1.25;
  font-weight: 500;
  max-width: 20ch;
}
.sp-program {
  margin-top: clamp(2rem, 1.2rem + 2vw, 3.25rem);
  display: grid;
  gap: clamp(0.85rem, 0.5rem + 0.8vh, 1.25rem);
  max-width: 30rem;
}
.sp-program li { display: grid; gap: 0.1rem; }
.sp-pk { font-weight: 600; font-size: var(--step-body, clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem)); line-height: 1.3; }
.sp-pv { font-size: var(--step-small, 1rem); line-height: 1.45; }
.sp-nw { white-space: nowrap; }

/* ---------- kompozycja statyczna (domyślna) ---------- */
.sp-stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sp-gutter);
  min-height: min(100svh, 58rem);
  padding-left: var(--sp-margin);
}
.sp-cel {
  grid-column: 1 / 6;
  grid-row: 1;
  align-self: center;
  padding: clamp(5rem, 9vw, 8rem) 0;
}
.sp-media {
  grid-column: 6 / 13;
  grid-row: 1;
  position: relative;
  min-height: 26rem;
  overflow: hidden;
  background: var(--sp-studio);
}
.sp-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;  /* pionowy kadr zdjęcia: okno, wzgórza i ergometry */
}
.sp-plakat,
.sp-canvas,
.sp-start,
.sp-czas,
.sp-etykiety { display: none; }

@media (max-width: 767px) {
  .sp-stage { grid-template-columns: minmax(0, 1fr); padding-left: 0; min-height: 0; }
  .sp-media { grid-column: 1; grid-row: 1; min-height: 0; aspect-ratio: 4 / 5; }
  .sp-foto img { object-position: 50% 66%; }
  .sp-cel { grid-column: 1; grid-row: 2; padding: 2.75rem var(--sp-margin) 4.5rem; }
}

/* ---------- scena na żywo ---------- */
.sp-live .scene-pieniny:not(.is-static) {
  height: calc((var(--sp-trzyma, 2.5) + 1) * 100vh); /* taste-skill-ignore: zapas dla przeglądarek bez svh */
  height: calc((var(--sp-trzyma, 2.5) + 1) * 100svh);
}
.sp-live .scene-pieniny:not(.is-static) .sp-stage {
  position: sticky;
  top: 0;
  display: block;
  height: 100vh; /* taste-skill-ignore: zapas dla przeglądarek bez lvh */
  height: 100lvh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.sp-live .scene-pieniny:not(.is-static) .sp-media { position: absolute; inset: 0; min-height: 0; aspect-ratio: auto; }
.sp-live .scene-pieniny:not(.is-static) .sp-foto { display: none; }
/* plakaty pod płótnem: pierwsza klatka (zanim scena się wczyta) i ostatnia (gdy kamera doleciała do Czorsztyna);
   płótno je zasłania, widać je tylko przed startem WebGL albo po utracie kontekstu */
.sp-live .scene-pieniny:not(.is-static) .sp-plakat {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-live .scene-pieniny:not(.is-static) .sp-plakat-koniec { opacity: 0; transition: opacity 600ms var(--sp-ease); }
.sp-live .scene-pieniny[data-krok="cel"]:not(.is-static) .sp-plakat-koniec { opacity: 1; }
.sp-live .scene-pieniny:not(.is-static) .sp-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 900ms var(--sp-ease);
}
.sp-live .scene-pieniny.is-ready .sp-canvas { opacity: 1; }

/* krok 1: makieta w studiu, świt. Podpis u góry, godzina słońca u dołu, oba na tle studia */
.sp-live .scene-pieniny:not(.is-static) .sp-start {
  display: block;
  position: absolute;
  left: var(--sp-margin);
  top: clamp(4.5rem, 11vh, 7rem);
  max-width: 27ch;
  font-size: var(--step-statement, clamp(1.5rem, 1.05rem + 1.25vw, 2.125rem));
  line-height: 1.22;
  font-weight: 500;
  text-wrap: pretty;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 500ms var(--sp-ease), transform 800ms var(--sp-ease);
}
/* godzina słońca: poza krokiem startu także visibility (duża cyfra nie leży wtedy pod panelem); to samo zdanie
   o słońcu jest w podpisie danych w stopce */
.sp-live .scene-pieniny:not(.is-static) .sp-czas {
  display: grid;
  gap: 0.5rem;
  position: absolute;
  left: var(--sp-margin);
  bottom: calc(var(--sp-pasek) + clamp(1.75rem, 6vh, 3.5rem));
  max-width: 25ch;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 14px, 0);
  transition: opacity 500ms var(--sp-ease), transform 800ms var(--sp-ease), visibility 0s linear 500ms;
}
.sp-godz {
  font-family: var(--sp-display);
  font-weight: 400;
  font-size: var(--step-head-2, clamp(2rem, 1.4rem + 2.2vw, 3.25rem));
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.sp-czas-t { font-size: var(--step-small, 1rem); line-height: 1.4; font-weight: 500; text-wrap: balance; }
.sp-live .scene-pieniny[data-krok="start"] .sp-start { opacity: 1; transform: none; }
.sp-live .scene-pieniny[data-krok="start"] .sp-czas { opacity: 1; visibility: visible; transform: none; transition-delay: 120ms, 120ms, 0s; }

/* krok 2: lot, nazwy miejsc przypięte do terenu */
.sp-live .scene-pieniny:not(.is-static) .sp-etykiety {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sp-etykiety li {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}
.sp-etykiety span {
  position: absolute;
  left: -5px;
  bottom: -5px;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  font-size: var(--step-small, 1rem);
  font-weight: 600;
  line-height: 1;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 450ms var(--sp-ease), transform 650ms var(--sp-ease);
}
/* kropka w miejscu, nazwa na płaskim tle studia (czytelna na jasnym gipsie, na mgle i na czarnej wodzie) */
.sp-etykiety span::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sp-tusz);
}
.sp-etykiety b {
  font-weight: 600;
  padding: 0.3rem 0.45rem 0.32rem;
  background: var(--sp-studio);
}
.sp-etykiety .sp-na-wodzie b { background: var(--sp-tusz); color: var(--sp-jasny); }
.sp-etykiety .sp-na-wodzie span::before { background: var(--sp-jasny); }
.sp-etykiety li.is-widac span { opacity: 1; transform: none; }
/* nazwa obok dysku w Czorsztynie (sam dysk jest w scenie 3D) */
.sp-etykiety .sp-tu span {
  left: 0;
  bottom: auto;
  top: 0;
  font-size: var(--step-body, clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem));
  transform: translate3d(calc(var(--odsun, 2rem) + 0.75rem), -50%, 0);
}
.sp-etykiety .sp-tu span::before { display: none; }
.sp-etykiety .sp-tu.is-widac span { transform: translate3d(var(--odsun, 2rem), -50%, 0); transition-delay: 450ms; }

/* krok 3: Czorsztyn. Panel z tekstem wchodzi z lewej, obraz 3D przesuwa się w wolną część ekranu */
.sp-live .scene-pieniny:not(.is-static) .sp-cel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh; /* taste-skill-ignore: zapas dla przeglądarek bez svh */
  height: 100svh;
  align-self: stretch; /* bez tego wyrównanie z układu statycznego (align-self: center) ścisnęłoby panel */
  width: calc(var(--sp-margin) + 5 * (100% - var(--sp-margin) - 11 * var(--sp-gutter)) / 12 + 5 * var(--sp-gutter));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(4rem, 9vh, 6.5rem) var(--sp-gutter) clamp(2.5rem, 7vh, 5rem) var(--sp-margin);
  background: var(--sp-studio);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1000ms var(--sp-ease);
}
.sp-live .scene-pieniny:not(.is-static) .sp-program { margin-top: clamp(1.5rem, 4.5vh, 3.25rem); }
.sp-live .scene-pieniny:not(.is-static) .sp-cel > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 600ms var(--sp-ease), transform 900ms var(--sp-ease);
}
.sp-live .scene-pieniny:not(.is-static) .sp-program li {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 600ms var(--sp-ease), transform 900ms var(--sp-ease);
}
.sp-live .scene-pieniny[data-krok="cel"]:not(.is-static) .sp-cel { clip-path: inset(0 0 0 0); }
.sp-live .scene-pieniny[data-krok="cel"]:not(.is-static) .sp-cel > *,
.sp-live .scene-pieniny[data-krok="cel"]:not(.is-static) .sp-program li { opacity: 1; transform: none; }
.sp-live .scene-pieniny[data-krok="cel"] .sp-h { transition-delay: 200ms; }
.sp-live .scene-pieniny[data-krok="cel"] .sp-lead { transition-delay: 280ms; }
.sp-live .scene-pieniny[data-krok="cel"] .sp-program { transition-delay: 340ms; }
.sp-live .scene-pieniny[data-krok="cel"] .sp-program li:nth-child(1) { transition-delay: 380ms; }
.sp-live .scene-pieniny[data-krok="cel"] .sp-program li:nth-child(2) { transition-delay: 450ms; }
.sp-live .scene-pieniny[data-krok="cel"] .sp-program li:nth-child(3) { transition-delay: 520ms; }
.sp-live .scene-pieniny[data-krok="cel"] .sp-program li:nth-child(4) { transition-delay: 590ms; }
.sp-live .scene-pieniny[data-krok="cel"] .sp-program li:nth-child(5) { transition-delay: 660ms; }

/* render plakatu */
.sp-live .scene-pieniny.is-bez-tekstu .sp-start,
.sp-live .scene-pieniny.is-bez-tekstu .sp-czas,
.sp-live .scene-pieniny.is-bez-tekstu .sp-etykiety,
.sp-live .scene-pieniny.is-bez-tekstu .sp-cel { visibility: hidden; }

/* niski ekran laptopa: program bez opisów */
@media (min-width: 768px) and (max-height: 760px) {
  .sp-live .scene-pieniny:not(.is-static) .sp-pv { display: none; }
  .sp-live .scene-pieniny:not(.is-static) .sp-program { gap: 0.6rem; }
}
/* bardzo niski ekran (telefon w poziomie): zwarty panel, program w dwóch kolumnach, bez opisów */
@media (min-width: 768px) and (max-height: 500px) {
  .sp-live .scene-pieniny:not(.is-static) .sp-cel { padding: 1.25rem var(--sp-gutter) 1rem var(--sp-margin); }
  .sp-live .scene-pieniny:not(.is-static) .sp-h { font-size: clamp(2rem, 1.2rem + 3vw, 2.75rem); max-width: none; }
  .sp-live .scene-pieniny:not(.is-static) .sp-lead { font-size: 1.0625rem; margin-top: 0.6rem; max-width: 26ch; }
  .sp-live .scene-pieniny:not(.is-static) .sp-program { margin-top: 0.9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem var(--sp-gutter); }
  .sp-live .scene-pieniny:not(.is-static) .sp-pk { font-size: 1rem; }
  .sp-live .scene-pieniny:not(.is-static) .sp-start { top: 1.25rem; font-size: 1.25rem; max-width: 30ch; }
  .sp-live .scene-pieniny:not(.is-static) .sp-czas { bottom: calc(var(--sp-pasek) + 1rem); gap: 0.25rem; }
  .sp-live .scene-pieniny:not(.is-static) .sp-godz { font-size: 2rem; }
}

/* telefon i ekran w pionie: panel z tekstem wjeżdża od dołu, program w jednej kolumnie, same nazwy */
@media (max-width: 767px), (max-aspect-ratio: 17/20) {
  .sp-live .scene-pieniny:not(.is-static) .sp-start { top: clamp(4.75rem, 10svh, 6rem); right: var(--sp-margin); max-width: 30ch; }
  .sp-live .scene-pieniny:not(.is-static) .sp-czas { right: var(--sp-margin); }
  .sp-live .scene-pieniny:not(.is-static) .sp-cel {
    top: auto;
    bottom: var(--sp-pasek);
    right: 0;
    width: auto;
    height: auto;
    max-height: 72svh;
    justify-content: flex-start;
    padding: 1.75rem var(--sp-margin) 2rem;
    clip-path: inset(100% 0 0 0);
  }
  .sp-live .scene-pieniny:not(.is-static) .sp-h { max-width: none; }
  .sp-live .scene-pieniny:not(.is-static) .sp-lead { margin-top: 0.75rem; max-width: 24ch; }
  .sp-live .scene-pieniny:not(.is-static) .sp-program { margin-top: 1.25rem; gap: 0.5rem; }
  .sp-live .scene-pieniny:not(.is-static) .sp-pv { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-pieniny *,
  .scene-pieniny *::before { transition: none !important; }
}