/* moduł ruch-nowa — stany ruchu. Wszystko pod html.ruch (GSAP + brak reduced) albo html.nav-ruch; bez JS strona statyczna. */

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* nawigacja: chowa się przy przewijaniu w dół */
html.nav-ruch .nav{transition:transform .5s var(--ease),background-color .35s,color .35s,border-color .35s}
html.nav-ruch .nav.nav-schowana{transform:translate3d(0,calc(-100% - 2px),0)}
.postep{will-change:transform}

/* zakreślacz: przeciąga się od lewej po dodaniu .on */
html.ruch .zakreslacz::before{transform:scaleX(0);transition:transform .85s cubic-bezier(.65,0,.15,1)}
html.ruch .zakreslacz.on::before{transform:none}

/* nagłówki na linie: maska na każdym słowie (clip-path zamiast overflow, bez zmiany linii bazowej) */
.sl-m,.sl-w{display:inline-block}
.linie:not(.linie-gotowe) .sl-m{clip-path:polygon(-25% -70%,125% -70%,125% calc(100% + .2em),-25% calc(100% + .2em))}
.linie:not(.linie-gotowe) .sl-w{will-change:transform}

/* taśma */
html.ruch .tasma-tor{will-change:transform}

/* oś uruchomienia: kroki zapalają się, gdy linia je minie */
html.ruch .os-kropka{background:var(--papier);border-color:#C9C9C1;transform:scale(.8);transition:transform .55s cubic-bezier(.34,1.56,.64,1),background-color .3s,border-color .3s}
html.ruch .os-kropka::after{background:#C9C9C1;transition:background-color .3s}
html.ruch .os-krok .os-nr,html.ruch .os-krok h3{opacity:.5;transition:opacity .5s var(--ease)}
html.ruch .os-krok.on .os-kropka{background:var(--zolty);border-color:var(--tusz);transform:none}
html.ruch .os-krok.on .os-kropka::after{background:var(--tusz)}
html.ruch .os-krok.on .os-nr,html.ruch .os-krok.on h3{opacity:1}

/* #przyklady na desktopie: tor poziomy (klasę .poziomo stawia JS tylko ≥1024px i bez reduced) */
@media (min-width:1024px){
  .przyklady.poziomo .sytuacje-okno{max-width:none;padding:24px 0 8px;overflow:clip}
  .przyklady.poziomo .sytuacje{display:flex;width:max-content;gap:28px;overflow:visible;padding:0 max(var(--g),calc((100% - var(--max)) / 2 + var(--g)));will-change:transform}
  .przyklady.poziomo .sytuacja{flex:0 0 min(600px,44vw)}
  .przyklady.poziomo .sytuacje-kropki{display:flex;justify-content:center;margin:30px 0 0}
  .przyklady.poziomo .sytuacje-podp{display:none}
}

@media (prefers-reduced-motion:reduce){
  html.nav-ruch .nav.nav-schowana{transform:none}
}