body{--hero-panel-min:680px}
body[data-hero-mode="video"] .hero-track{height:calc(200svh + var(--slajdy,1) * 120svh - max(100svh, var(--hero-panel-min)))}
body[data-hero-mode="video"] .hero{position:sticky;top:0;height:100svh;min-height:680px;max-height:none}
.scroll-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% center;display:none}
body[data-hero-mode="video"] .scroll-film{display:block}
/* Trzy plansze: filmy i warstwy tekstu leza jedna na drugiej, a JS steruje
   przezroczystoscia wedlug postepu scrolla. Grid zamiast pozycjonowania
   absolutnego, zeby tekst zachowal swoje naturalne rozmiary i przeplyw. */
.hero-words-stack{display:grid;grid-template-columns:minmax(0,1fr)}
.hero-words{grid-area:1/1;min-width:0}
/* Wstawka filmowa w sekcji — zloty podzial, mniejsza czesc na film (61,8 / 38,2).
   JEDEN mechanizm, dwie instancje: .split--prawo ma film po prawej
   ("Co chcesz zrealizowac?"), .split--lewo lustrzanie po lewej
   ("Rozne doswiadczenia"). Tekst zostaje PIERWSZY w DOM w obu - kolejnosc
   czytania sie nie odwraca, przestawia sie tylko kolumny w siatce.
   Film jest przyklejony, wiec zostaje w kadrze przy przewijaniu tresci obok. */
.split-art{display:none}
body[data-split-film="1"] .split .wrap{display:grid;gap:6%;align-items:start}
body[data-split-film="1"] .split--prawo .wrap{grid-template-columns:61.8fr 38.2fr}
body[data-split-film="1"] .split--lewo .wrap{grid-template-columns:38.2fr 61.8fr}
body[data-split-film="1"] .split--lewo .split-art{grid-area:1/1}
body[data-split-film="1"] .split--lewo .split-copy{grid-area:1/2}
body[data-split-film="1"] .split-art{display:block;align-self:stretch}
.split-art-inner{position:sticky;top:12vh;height:76vh;overflow:hidden;background:#d6ded6}
.split-film{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:900px){
  body[data-split-film="1"] .split .wrap{grid-template-columns:1fr;gap:36px}
  body[data-split-film="1"] .split--lewo .split-art,
  body[data-split-film="1"] .split--lewo .split-copy{grid-area:auto}
  .split-art-inner{position:static;height:46vh}
}
@media(prefers-reduced-motion:reduce){.split-art-inner{position:static}}
body[data-hero-mode="video"] .hero-slide,body[data-hero-mode="video"] .hero-switch{display:none}
.scroll-cue{display:none;position:absolute;bottom:104px;left:3.4%;font-size:12px;letter-spacing:.06em;align-items:center;gap:20px}
body[data-hero-mode="video"] .scroll-cue{display:flex}
.scroll-meter{width:115px;height:2px;background:#26312f30;overflow:hidden}
.scroll-meter span{display:block;width:100%;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:left}
/* Kolor tekstu i aureola pod nim wynikaja z JASNOSCI KLATKI, mierzonej ~10 razy
   na sekunde (motion.js rysuje aktywne filmy do maleńkiego canvasu i liczy
   luminancje wzgledna). Zmierzone na piatce klipow: srednia z calego kadru
   wystarcza, bo lewa i prawa polowa zawsze ladowaly po tej samej stronie progu
   (najwieksza roznica 35,6 przy progach 0,42 / 0,55). Gdyby wpadl klip jasny
   z jednej strony a ciemny z drugiej - wtedy dopiero siatka komorek.
   Aureola jest w ZMIERZONYM KOLORZE TLA: wyplaszcza teksture tuz przy literach,
   wiec krawedz glifu siedzi na plaskim polu zamiast na detalu.
   Tylko tryb filmowy - w sliderze tlo jest statyczne i dobrane recznie. */
.hero{--atrament:var(--ink);--halo1:transparent;--halo2:transparent;--halo3:transparent}
body[data-hero-mode="video"] .hero-words .hero-label,
body[data-hero-mode="video"] .hero-words h1,
body[data-hero-mode="video"] .hero-words h2,
body[data-hero-mode="video"] .hero-aside,
body[data-hero-mode="video"] .hero-footer,
body[data-hero-mode="video"] .scroll-cue{
  color:var(--atrament);
  text-shadow:0 0 5px var(--halo1),0 0 16px var(--halo2),0 0 38px var(--halo3);
  transition:color .4s ease;
}
/* akapit zostaje stopien ciszej niz naglowek - hierarchia nie ma znikac */
body[data-hero-mode="video"] .hero-words .hero-bottom p{
  color:color-mix(in srgb,var(--atrament) 76%,transparent);
  text-shadow:0 0 5px var(--halo1),0 0 16px var(--halo2),0 0 38px var(--halo3);
  transition:color .4s ease;
}
body[data-hero-mode="video"] .round-link{
  color:var(--atrament);border-color:color-mix(in srgb,var(--atrament) 55%,transparent);
  transition:color .4s ease,border-color .4s ease;
}
body[data-hero-mode="video"] .hero-aside a{border-bottom-color:color-mix(in srgb,var(--atrament) 60%,transparent)}
body[data-hero-mode="video"] .scroll-meter{background:color-mix(in srgb,var(--atrament) 22%,transparent)}
body[data-hero-mode="video"] .scroll-meter span{background:var(--atrament)}