/* Mechanika przewijania dla static/scroll_story.js (strony landing). Wygląd scen definiuje strona.
   Klasy .is-pinned / .is-hscroll dodaje skrypt — bez niego sekcje są zwykłą listą. */

[data-pin-story].is-pinned{
  height:calc(100svh + (var(--pin-steps, 3) - 1) * 80svh);
  padding-top:0 !important;
  padding-bottom:0 !important;
}
[data-pin-story].is-pinned [data-pin-stage]{
  position:sticky;
  top:var(--pin-top, 0px);
  height:calc(100svh - var(--pin-top, 0px));
  overflow:hidden;
}

[data-hscroll].is-hscroll{
  height:calc(100svh + var(--hs-dist, 0px));
  padding-top:0 !important;
  padding-bottom:0 !important;
}
[data-hscroll].is-hscroll [data-hscroll-stage]{
  position:sticky;
  top:var(--pin-top, 0px);
  height:calc(100svh - var(--pin-top, 0px));
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
[data-hscroll].is-hscroll [data-hscroll-track]{
  display:flex;
  flex-wrap:nowrap;
  width:max-content;
  will-change:transform;
}
/* pasek postępu pasa poziomego */
.hs-progress{height:3px;border-radius:3px;background:rgba(127,140,170,.22);overflow:hidden}
.hs-progress i{display:block;height:100%;width:calc(var(--hs-p, 0) * 100%);background:var(--pin-accent, #ff6a1a);border-radius:inherit}

/* kropki kroków przypiętej sceny */
[data-pin-dots]{display:flex;align-items:center;gap:0}
[data-pin-dots] .pin-dot,
html [data-pin-dots] button.pin-dot[aria-label]{
  -webkit-appearance:none;appearance:none;position:relative;flex:none;
  width:22px;height:28px;min-width:0;min-height:0;padding:0;margin:0;border:0;background:none;box-shadow:none;cursor:pointer;
  transition:width .3s ease;
}
[data-pin-dots] .pin-dot::before{content:"";position:absolute;left:7px;right:7px;top:11px;bottom:11px;border-radius:99px;background:rgba(127,140,170,.35);transition:background .3s ease}
[data-pin-dots] .pin-dot.is-active,
html [data-pin-dots] button.pin-dot.is-active[aria-label]{width:40px}
[data-pin-dots] .pin-dot.is-active::before{background:var(--pin-accent, #ff6a1a)}
[data-pin-dots] .pin-dot:focus-visible{outline:2px solid var(--pin-accent, #ff6a1a);outline-offset:2px;border-radius:6px}

/* tekst czytany przy przewijaniu ([data-read]) */
.is-reading .rw{color:var(--read-dim, rgba(255,255,255,.2));transition:color .25s ease}
.is-reading .rw.is-lit{color:inherit}