/* Scroll-linked motion primitives for motion.js (docs/DESIGN.md §7). Everything lives under html.fx, which the script sets
 * only when it runs and the visitor allows motion: without it pins are ordinary blocks and nothing moves.
 *
 * --p   scene progress 0…1, written by motion.js on [data-scene] and inherited by its content.
 * .seg  a segment of the scene: give it --a and --b (where in --p it plays) and use --t (linear 0…1) or --e (smoothstep).
 * .seg-each  its children are segments one after another: child k plays from --from + k × --stagger for --len (defaults 0, .08, .4).
 * .pin  a tall wrapper (--pin: its height) with a sticky .pin-stage that fills the screen under the header, styled only while
 *       motion.js keeps it a pin (data-mode="pin"): on small screens the same markup can be an ordinary section.
 * Rules: animate transform, opacity and clip-path only; never transform a [data-scene] element itself and never put one inside a
 * .pin-stage (motion.js measures scenes once, a sticky stage moves). */

.fx .seg, .fx .seg-each > * { --t: clamp(0, (var(--p) - var(--a, 0)) / (var(--b, 1) - var(--a, 0)), 1); --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t))); }

.fx .seg-each > * { --a: calc(var(--from, 0) + var(--k, 0) * var(--stagger, .08)); --b: calc(var(--a) + var(--len, .4)); }
.seg-each > :nth-child(2) { --k: 1; } .seg-each > :nth-child(3) { --k: 2; } .seg-each > :nth-child(4) { --k: 3; } .seg-each > :nth-child(5) { --k: 4; }
.seg-each > :nth-child(6) { --k: 5; } .seg-each > :nth-child(7) { --k: 6; } .seg-each > :nth-child(8) { --k: 7; } .seg-each > :nth-child(9) { --k: 8; }
.seg-each > :nth-child(10) { --k: 9; } .seg-each > :nth-child(11) { --k: 10; } .seg-each > :nth-child(12) { --k: 11; }

/* Rise into place: 28px lower and faint at --a, settled at --b. The translate property leaves transform free for hover. */
.fx .rise { opacity: calc(.08 + .92 * var(--e)); translate: 0 calc((1 - var(--e)) * 28px); }
/* The same for every child of a .seg-each block, one after another (an info panel: heading, text, button). */
.fx .rise-each > * { opacity: calc(.1 + .9 * var(--e)); translate: 0 calc((1 - var(--e)) * 20px); }

/* Pinned stage */
.fx .pin[data-mode="pin"] { position: relative; height: var(--pin, 260vh); }
.fx .pin[data-mode="pin"] > .pin-stage { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); overflow: clip; }

/* Words that light up as the scene plays (data-words, motion.js wraps them in .w). */
.fx [data-words] .w { opacity: clamp(.16, calc((var(--p) * (var(--n) + 6) - var(--i)) / 4), 1); transition: none; }

/* A thin bar that fills with the scene. */
.scene-bar { display: block; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.scene-bar::after { content: ''; display: block; height: 100%; background: linear-gradient(90deg, var(--violet), var(--lime)); transform-origin: left; transform: scaleX(1); }
.fx .scene-bar::after { transform: scaleX(var(--p)); }

@media print {
  .fx .pin[data-mode="pin"] { height: auto; }
  .fx .pin[data-mode="pin"] > .pin-stage { position: static; height: auto; }
}