/* The panel frame: header, progress line, the window with its sliding tape, one "beat" per step, the shared reveal maths, reduced motion and the light phone version. */
.motion-stage { display: flex; flex-direction: column; overflow: hidden; padding: 18px 20px 0; border: 1px solid var(--ink-line); border-radius: var(--radius); background: var(--stage-ground); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08); } /* the dark violet card */
.stage-head { flex: none; padding-bottom: 12px; } /* title block */
.stage-kicker { color: var(--world-tint); font: 500 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; } /* "1 of 4 · inside the model" */
.stage-title { margin-top: 4px; font: 700 clamp(21px, 2vw, 26px)/1.12 var(--display); letter-spacing: -0.02em; } /* panel name */
.stage-facts { margin-top: 6px; color: var(--paper-faint); font: 500 12px/1.4 var(--mono); } /* the real model size */
.stage-progress { display: none; height: 3px; margin-top: 12px; border-radius: 3px; background: var(--ink-line); overflow: hidden; } /* scroll progress track, only while scrubbing */
.is-scrubbing .stage-progress { display: block; } /* shown when the scroll plays the panel */
.stage-progress i { display: block; height: 100%; background: var(--amber); transform: scaleX(0); transform-origin: left; } /* filled by the script */
.stage-view { position: relative; flex: 1; min-height: 0; } /* the window */
.is-scrubbing .stage-view { overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18px, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 18px, #000 calc(100% - 26px), transparent); } /* content fades at the window edges */
.stage-tape { position: relative; display: grid; gap: 4px; padding: 6px 0 20px; } /* all steps in one tall strip */
.is-scrubbing .stage-tape { will-change: transform; } /* slides behind the window */
.beat { padding: 14px 0 8px; border-top: 1px solid var(--ink-line); } /* one step */
.beat:first-child { border-top: 0; } /* no line above the first step */
.is-scrubbing .beat { opacity: calc(0.14 + 0.86 * var(--q, 1)); transform: translate3d(0, calc((1 - var(--q, 1)) * 20px), 0); } /* each step fades and rises as the scroll reaches it (q = 0 to 1, set by the script) */
.beat-title { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font: 600 15px/1.3 var(--body); } /* step name */
.beat-title b { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--world-background); font: 600 12px var(--mono); } /* step number */
.beat-note { margin-top: 8px; color: var(--paper-soft); font-size: 13.5px; line-height: 1.45; } /* one short line of explanation */
.mini-label { margin-top: 5px; color: var(--paper-faint); font: 500 12px/1.3 var(--mono); } /* small caption under a figure */
[style*="--i:"] { --r: clamp(0, calc(var(--q, 1) * var(--steps, 1) - var(--i, 0)), 1); } /* parts inside a step appear one after another: r runs 0 to 1 for item i */
.wipe { position: relative; overflow: hidden; } /* a picture that is uncovered from left to right */
.wipe::after { content: ""; position: absolute; inset: 0 0 0 -2px; background: var(--stage-ground); transform: translate3d(calc(var(--r, 1) * 102%), 0, 0); pointer-events: none; } /* the cover slides away to the right as r grows */
@media (prefers-reduced-motion: reduce) { /* visitors who asked for less motion */
  .stage-progress { display: none; } /* no moving line */
  .beat, .wipe::after { transition: none; } /* nothing eases in */
}
@media (max-width: 859px) { /* phones: fewer layers, no masks */
  .motion-stage { padding: 14px 14px 0; } /* tighter card */
  .is-scrubbing .stage-view { -webkit-mask-image: none; mask-image: none; } /* no edge mask on a phone */
  .beat-extra { display: none; } /* optional detail skipped on a phone */
  .beat-title { font-size: 14px; } /* smaller step names */
}