/* Scena „Sezon to okrążenie” (sekcja Dla atletów, Nuvr)

   Domyślnie (bez skryptu, przy prefers-reduced-motion, bez WebGL2) sekcja jest zwykłą kompozycją:
   nagłówek, zdjęcie z bieżni i lista czterech przystanków.

   Żywa scena: klasa .is-live na sekcji (dodaje ją scena.js) albo, jeszcze zanim moduł się wczyta,
   klasa .sb-live na <html> (jedna linijka w <head>, patrz README). Dzięki temu strona nie skacze,
   gdy moduł przełącza układ. Gdy scena nie może ruszyć, scena.js dodaje .is-rest i wraca kompozycja.
   Klasy mają prefiks sb-, kolory, kroje i stopnie pisma biorą tokeny strony Nuvr (z wartościami zapasowymi).
   Na stronie nuvr (kopia zrodlo/sceny/bieznia/final/scena.css): przyciski przystanków w stopniu --step-small. */

.scene-bieznia {
  --sb-paper: var(--paper, #f1f1ef);
  --sb-ink: var(--ink, #0c0c0c);
  --sb-quiet: var(--ink-soft, #4a4a48);      /* nieaktywne przystanki w nawigacji (7:1 na papierze) */
  --sb-ground: #5a5a58;                       /* średni ton kadru, pod plakatem i canvasem */
  --sb-display: var(--font-display, "Anton", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif);
  --sb-text: var(--font-text, "Work Sans", "Helvetica Neue", Arial, sans-serif);
  --sb-margin: var(--margin, max(16px, clamp(1rem, 2.2vw, 2rem)));
  --sb-ease: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  --sb-step-head: var(--step-head, clamp(2.5rem, 1.2rem + 5vw, 5.5rem));
  --sb-step-head-2: var(--step-head-2, clamp(2rem, 1.4rem + 2.2vw, 3.25rem));
  --sb-step-body: var(--step-body, clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem));
  --sb-step-lead: var(--step-lead, clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem));
  --sb-hold: 3;
  --sb-col: clamp(22rem, 34vw, 35rem);
  --sb-bar: 0px;      /* pasek przeglądarki, który chowa się przy przewijaniu (Safari na telefonie): 100lvh − 100svh */
  --sb-off: 0px;      /* o ile przypięty kadr wysuwa się nad ekran (na telefonie: wysokość nagłówka) */

  position: relative;
  background: var(--sb-paper);
  color: var(--sb-ink);
  font-family: var(--sb-text);
}
@supports (height: 100lvh) {
  .scene-bieznia { --sb-bar: calc(100lvh - 100svh); }
}

/* ---------- kompozycja spokojna (domyślna) ---------- */
.sb-stage {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas:
    "head view"
    "stops view";
  grid-template-rows: auto 1fr;
  column-gap: clamp(2rem, 5vw, 6rem);
  row-gap: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(5rem, 9vw, 8rem) var(--sb-margin);
}
.sb-head { grid-area: head; }
.sb-stops { grid-area: stops; }
.sb-view { grid-area: view; }

.sb-h {
  margin: 0;
  font-family: var(--sb-display);
  font-weight: 400;
  font-size: var(--sb-step-head);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  max-width: 7.5em;
  text-wrap: balance;
}
.sb-lead {
  margin: clamp(1.25rem, 2.2vw, 2rem) 0 0;
  max-width: 34ch;
  font-size: var(--sb-step-lead);
  line-height: 1.35;
  text-wrap: pretty;
}

.sb-stops {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  align-content: end;
}
.sb-stop-h {
  margin: 0;
  font-family: var(--sb-display);
  font-weight: 400;
  font-size: var(--sb-step-head-2);
  line-height: 0.98;
  text-transform: uppercase;
  text-wrap: balance;
}
.sb-stop p {
  margin: 0.6rem 0 0;
  max-width: 44ch;
  font-size: var(--sb-step-body);
  line-height: 1.5;
  text-wrap: pretty;
}

.sb-view {
  position: relative;
  margin: 0;
  align-self: start;
  aspect-ratio: 1 / 1;
  background: var(--sb-ground);
  overflow: hidden;
}
.sb-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sb-canvas,
.sb-poster,
.sb-route { display: none; }

/* pełna lista przystanków dla czytników ekranu (żywa scena pokazuje jeden przystanek naraz) */
.sb-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  margin: 0; padding: 0;
}

/* ---------- żywa scena ---------- */
:is(.scene-bieznia.is-live, .sb-live .scene-bieznia:not(.is-rest)) {
  height: calc(var(--sb-hold) * 100svh + 100svh + var(--sb-bar) + var(--sb-off));
}
:is(.scene-bieznia.is-live, .sb-live .scene-bieznia:not(.is-rest)) .sb-stage {
  position: sticky;
  top: calc(-1 * var(--sb-off));
  height: calc(100svh + var(--sb-bar) + var(--sb-off));
  padding: 0;
  gap: 0;
  grid-template-columns: var(--sb-col) minmax(0, 1fr);
  grid-template-rows: auto minmax(1.5rem, 1fr) auto auto;
  grid-template-areas:
    "head view"
    ".    view"
    "stops view"
    "route view";
  overflow: hidden;
}
:is(.scene-bieznia.is-live, .sb-live .scene-bieznia:not(.is-rest)) .sb-head {
  padding: clamp(2rem, 6svh, 4rem) clamp(1.5rem, 3vw, 3rem) 0 var(--sb-margin);
}
:is(.scene-bieznia.is-live, .sb-live .scene-bieznia:not(.is-rest)) .sb-lead { max-width: 30ch; font-size: var(--sb-step-body); line-height: 1.5; }
:is(.scene-bieznia.is-live, .sb-live .scene-bieznia:not(.is-rest)) .sb-stops {
  padding: 0 clamp(1.5rem, 3vw, 3rem) 0 var(--sb-margin);
  gap: 0;
  align-content: end;
}
:is(.scene-bieznia.is-live, .sb-live .scene-bieznia:not(.is-rest)) .sb-stops > .sb-stop {
  grid-area: 1 / 1;
  align-self: start;
}
/* zanim moduł ruszy, widać pierwszy przystanek; pozostałe są ukryte tylko wizualnie (czytnik ekranu je czyta) */
.sb-live .scene-bieznia:not(.is-rest):not(.is-live) .sb-stops > .sb-stop:not(:first-child) {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* żywa scena: widoczna lista ma aria-hidden, a czytnik dostaje kopię .sb-sr */
.scene-bieznia.is-live .sb-stops > .sb-stop {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 1.5rem, 0);
  transition: opacity 160ms ease, transform 360ms var(--sb-ease), visibility 0s linear 160ms;
}
.scene-bieznia.is-live .sb-stops > .sb-stop.is-past { transform: translate3d(0, -1.25rem, 0); }
.scene-bieznia.is-live .sb-stops > .sb-stop.is-current {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 380ms ease 170ms, transform 700ms var(--sb-ease) 170ms, visibility 0s linear 170ms;
}

.scene-bieznia.is-live .sb-route {
  grid-area: route;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  padding: clamp(1.5rem, 4svh, 2.5rem) clamp(1.5rem, 3vw, 3rem) calc(clamp(1.75rem, 5svh, 3rem) + var(--sb-bar)) var(--sb-margin);
}
.sb-route button {
  font: inherit;
  font-size: var(--step-small, 1rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--sb-quiet);
  background: none;
  border: 0;
  padding: 0.5rem 0;
  min-height: 2.75rem;
  cursor: pointer;
  transition: color 180ms ease, transform 140ms var(--sb-ease);
}
.sb-route button[aria-current="step"] { color: var(--sb-ink); }
.sb-route button:active { transform: translate3d(0, 1px, 0); }
@media (hover: hover) and (pointer: fine) {
  .sb-route button:hover { color: var(--sb-ink); }
}
.sb-route button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

:is(.scene-bieznia.is-live, .sb-live .scene-bieznia:not(.is-rest)) .sb-view {
  aspect-ratio: auto;
  align-self: stretch;
  height: 100%;
}
/* zdjęcie atleci-2.jpg leży nad kadrem: na przystanku „Na co dzień” kadr przechodzi w nie (scena.js ustawia opacity) */
:is(.scene-bieznia.is-live, .sb-live .scene-bieznia:not(.is-rest)) .sb-photo {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
/* plakat: pierwsza klatka sceny, leży pod canvasem, zanim WebGL narysuje swoją */
:is(.scene-bieznia.is-live, .sb-live .scene-bieznia:not(.is-rest)) .sb-poster {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scene-bieznia.is-live .sb-canvas {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 700ms ease;
}
.scene-bieznia.is-ready .sb-canvas { opacity: 1; }

/* ---------- telefon ---------- */
@media (max-width: 767px) {
  .sb-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "view" "stops";
    grid-template-rows: auto auto auto;
    padding: 4.5rem var(--sb-margin);
    row-gap: 2rem;
  }
  .sb-view { margin-inline: calc(-1 * var(--sb-margin)); }
}
/* żywa scena na telefonie i tablecie w pionie: nagłówek odjeżdża z przewijaniem nad przypięty kadr,
   a na ekranie zostaje kadr, przystanek i nawigacja (dwa nagłówki w Antonie nie stoją już jeden pod drugim) */
@media (max-width: 767px), (max-width: 1023px) and (orientation: portrait) {
  :is(.scene-bieznia.is-live, .sb-live .scene-bieznia:not(.is-rest)) { --sb-off: var(--sb-head-h, 0px); }
  :is(.scene-bieznia.is-live, .sb-live .scene-bieznia:not(.is-rest)) .sb-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(45svh, 1fr) auto auto;
    grid-template-areas: "head" "view" "stops" "route";
  }
  :is(.scene-bieznia.is-live, .sb-live .scene-bieznia:not(.is-rest)) .sb-view { margin: 0; }
  :is(.scene-bieznia.is-live, .sb-live .scene-bieznia:not(.is-rest)) .sb-head { padding: clamp(4rem, 9svh, 5.5rem) var(--sb-margin) clamp(2rem, 5svh, 3rem); }
  :is(.scene-bieznia.is-live, .sb-live .scene-bieznia:not(.is-rest)) .sb-h { max-width: none; }
  :is(.scene-bieznia.is-live, .sb-live .scene-bieznia:not(.is-rest)) .sb-lead { max-width: 36ch; }
  :is(.scene-bieznia.is-live, .sb-live .scene-bieznia:not(.is-rest)) .sb-stops { padding: 1.25rem var(--sb-margin) 0; align-content: start; }
  :is(.scene-bieznia.is-live, .sb-live .scene-bieznia:not(.is-rest)) .sb-stop p { margin-top: 0.45rem; max-width: 52ch; line-height: 1.45; }
  .scene-bieznia.is-live .sb-route { gap: 0 1.25rem; padding: 0.5rem var(--sb-margin) calc(max(0.75rem, env(safe-area-inset-bottom)) + var(--sb-bar)); }
}

/* spokojna kompozycja na szerokim ekranie: zdjęcie stoi obok listy, gdy się ją czyta */
@media (min-width: 768px) {
  .scene-bieznia:not(.is-live) .sb-view { position: sticky; top: var(--sb-margin); }
  .sb-live .scene-bieznia:not(.is-rest):not(.is-live) .sb-view { position: relative; top: auto; }
}

/* wąskie okno w poziomie: węższa kolumna tekstu, kadr nadal obok */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
  .scene-bieznia { --sb-col: 19rem; }
}

/* niski ekran (laptop z paskami, telefon w poziomie): bez wstępu, żeby przystanek i nawigacja się mieściły */
@media (min-width: 768px) and (max-height: 640px) {
  :is(.scene-bieznia.is-live, .sb-live .scene-bieznia:not(.is-rest)) .sb-lead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  :is(.scene-bieznia.is-live, .sb-live .scene-bieznia:not(.is-rest)) .sb-h { font-size: clamp(2.5rem, 1rem + 3vw, 4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .scene-bieznia .sb-stop,
  .scene-bieznia .sb-canvas,
  .sb-route button { transition: none; }
}