/* ============================================================
   Scroll story — a pinned two-column walkthrough, after the
   "How I built it" section on input-otp.rodz.dev.
   Scrolling advances the story on the left; the stage on the
   right holds ONE scene that keeps changing to tell it.

   Markup:
     <section class="ss" data-scrollstory>
       <div class="ss-pin">
         <ol class="ss-steps"><li class="ss-step">…</li>…</ol>
         <div class="ss-stage"><div class="ss-scene" data-w="520" data-h="560">…</div></div>
       </div>
     </section>
   Inside the scene, scrollstory.js toggles `.on` on:
     [data-at="0 3"]  — on only at those steps
     [data-from="2"]  — on from that step onward
   and sets data-step on .ss-stage so scene CSS can key off it.
   ============================================================ */
.ss { --n: 6; --ss-head: 5rem; position: relative; height: calc(var(--n) * 70vh + 100vh); }
.ss-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  padding: var(--ss-head) 0 2rem; }

/* steps + progress rail */
.ss-steps { position: relative; list-style: none; padding-left: 1.6rem; display: grid; gap: clamp(.9rem, 2.4vh, 1.5rem); }
.ss-steps::before, .ss-steps::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--line); }
.ss-steps::after { background: var(--ink); transform-origin: top; transform: scaleY(var(--ss-p, 0)); }
.ss-step { max-width: 30ch; font-family: var(--sans); font-weight: 500; font-size: clamp(1.05rem, 1.55vw, 1.4rem); line-height: 1.3;
  color: rgba(18,18,18,.16); cursor: pointer; transition: color .5s var(--ease); }
.ss-step.past { color: rgba(18,18,18,.42); }
.ss-step.on { color: var(--ink); }
.ss-step em { font-style: normal; color: var(--accent); }
.ss-step.on em { color: var(--accent); }
.ss-step:not(.on) em { color: inherit; }
.ss-step code { font-family: var(--mono); font-size: .82em; background: rgba(18,18,18,.06); padding: .05em .35em; border-radius: 4px; }

/* stage: the scene is authored at a fixed size (data-w × data-h) and scaled to fit */
.ss-stage { position: relative; height: 100%; min-height: 0; display: grid; place-items: center; overflow: clip; }
.ss-scene { position: relative; flex: none; transform-origin: center; }

/* hand-written annotations with a drawn arrow */
.ss-note { position: absolute; font-family: var(--hand); font-size: 13px; line-height: 1.5; color: var(--ink); white-space: nowrap;
  opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .6s var(--ease); pointer-events: none; z-index: 20; }
.ss-note svg { position: absolute; overflow: visible; }
.ss-note path { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .8s var(--ease) .25s; }
.ss-note.on { opacity: 1; transform: none; transition-delay: .2s; }
.ss-note.on path { stroke-dashoffset: 0; transition-delay: .55s; }

/* autoplay variant: an ordinary block at one screen's height; the rail fills step by step */
.ss[data-autoplay] { height: auto; }
.ss[data-autoplay] .ss-pin { position: relative; height: min(100svh, 820px); padding: 2rem 0; }
.ss[data-autoplay] .ss-steps::after { transition: transform .6s var(--ease); }

@media (max-width: 860px) {
  .ss { height: calc(var(--n) * 85vh + 100vh); --ss-head: 4.4rem; }
  .ss-pin { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 1rem; padding-bottom: 1.5rem; }
  .ss-stage { order: -1; }
  .ss-steps { padding-left: 1rem; min-height: 6.5em; align-content: start; }
  .ss-step { display: none; font-size: 1.1rem; }
  .ss-step.on { display: block; }
  .ss[data-autoplay] .ss-pin { height: min(100svh, 760px); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-step, .ss-note, .ss-note path { transition: none; }
  .ss-scene * { transition-duration: 0s !important; animation: none !important; }
}