/* DP3D — sekwencja C (v03). Wysokość sekcji = ekran + scrubVh ekranów przewijania. */
.c-scroll { position: relative; background: #131210; height: calc(100vh + var(--c-scrub, 2) * 100vh); }
@supports (height: 100svh) { .c-scroll { height: calc(100svh + var(--c-scrub, 2) * 100vh); } }

/* 100svh: na iOS scena nie wchodzi pod pasek adresu; nadmiar przy schowanym pasku ma ten sam grafit */
.c-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #131210; }
@supports (height: 100svh) { .c-stage { height: 100svh; } }

.c-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Desktop / poziomo: zdania w lewych 40% kadru — render trzyma tę strefę pustą */
.c-lines { position: absolute; z-index: 1; left: 5%; top: 50%; width: 36%; transform: translateY(-50%);
  display: grid; align-items: center; }
.c-line { grid-area: 1 / 1; margin: 0; color: #efece6; font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-weight: 300; font-size: clamp(32px, 4.45vw, 64px); line-height: 1.12; letter-spacing: -0.02em;
  opacity: 0; will-change: opacity; }

/* Telefon / pionowo: zdanie na dole sceny, na przyciemnieniu (render trzyma dół pusty) */
@media (max-aspect-ratio: 9/10) {
  .c-stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 340px; pointer-events: none;
    background: linear-gradient(to bottom, rgba(19,18,16,0) 0%, rgba(19,18,16,.78) 55%, rgba(19,18,16,.94) 100%); }
  .c-lines { left: 24px; right: 24px; width: auto; top: auto; bottom: 64px; transform: none; align-items: end; }
  .c-line { font-size: 40px; line-height: 46px; }
}

/* prefers-reduced-motion: statyczny kadr końcowy, wszystkie zdania widoczne, zwykły przepływ strony.
   Desktop: zdania w pustej lewej strefie kadru. Telefon: zdania pod obrazem. */
.is-static.c-scroll { height: auto; }
.is-static .c-stage { position: relative; height: auto; }
.is-static .c-stage::after { display: none; }
.is-static .c-canvas { display: none; }
.is-static .c-poster { display: block; width: 100%; height: auto; }
.is-static .c-lines { display: block; }
.is-static .c-line { opacity: 1; margin: 0 0 .5em; }
@media (max-aspect-ratio: 9/10) {
  .is-static .c-lines { position: relative; left: auto; right: auto; bottom: auto; padding: 32px 24px 64px; }
}

/* demo strony: scena pod przyklejonym headerem */
.c-stage { top: var(--hh); height: calc(100vh - var(--hh)); }
@supports (height: 100svh) { .c-stage { height: calc(100svh - var(--hh)); } .c-scroll { height: calc(100svh - var(--hh) + var(--c-scrub, 2) * 100vh); } }
.c-lines { left: max(var(--m), calc((100vw - 1440px) / 2 + 72px)); }