@mkbabb/glass-ui 4.2.0 → 5.0.0

package/dist/styles/paper.css

@@ -1,284 +1 @@
-/*
- * paper.css — Paper-texture primitives (BD.W-PAPER-MORPHISM, the texture+blend
- * redesign — the grain/grit must be PLAINLY VISIBLE; if you squint, it FAILS).
- *
- * Two composable Tailwind `@utility` declarations:
- *   - paper-underpaint: fixed, app-root, fullscreen tooth texture at z-index -1
- *   - paper-grain-overlay: ::after tooth overlay for individual surfaces
- *
- * THE FIX (the headline): the prior `feTurbulence bf=0.65 4-oct` + `feBlend
- * multiply in2=SourceGraphic` cloud was a self-cancelling no-op — a fine cloud
- * averaged to grey on hiDPI, and `overlay`/`soft-light` collapse to IDENTITY
- * against a near-white cream wash (L≈0.98) / near-black ink wash (the blends only
- * bite mid-grey backdrops; the paper register lives on the poles). Measured std
- * 0.02–0.86 — invisible by math.
- *
- * THE TEXTURE — `--paper-grain-tooth`: a COARSE anisotropic grey-RGB speckle
- * (`baseFrequency='0.04 0.09'` = grain direction, 2 octaves), KEEP the RGB
- * (`feColorMatrix saturate=0` → grey, never zero it), per-channel
- * `feComponentTransfer` slope-1.8/intercept-(-0.4) CONTRAST-STRETCH (the
- * letterpress bite) + `feFuncA slope=0 intercept=1` (FULL OPAQUE alpha — the
- * grey speckle is painted straight, the blend carries the darken/lighten; NOT the
- * lens-A luminance→alpha matrix that gives a near-empty texture). `<filter
- * color-interpolation-filters='sRGB'>` pins sRGB (identical Chrome↔Safari,
- * deterministic seed). NO `feBlend` mud op. Tile 140px (coarse tooth reads as
- * STRUCTURE, survives hiDPI, divides cleanly DPR 1/2/3).
- *
- * THE BLEND LAW (the decisive, physically-true move): `multiply` (light — ink
- * sinks into the paper's pits → darken) / `screen` (dark — fiber catches light →
- * lighten). Baseline, sRGB-safe, identical both engines. Plain per-mode arms.
- *
- * THE ALPHA: `--paper-grain-opacity` re-calibrated to the JND floor (light 0.22 /
- * dark 0.16 — glass-fx.css / dark-arm.css; the inversion the measurements force:
- * multiply on cream is gentle → MORE, screen on ink bites hard → LESS).
- *
- * The LIBRARY FENCE: `--glass-grain-opacity` (0.025/0.045) is BYTE-UNTOUCHED — the
- * calm glass identity stands; paper is loud, glass is a whisper. That separation
- * IS the design.
- */
-
-/* The ONE coarse-tooth texture — DRY single source, both utilities resolve it.
-   Painted onto a rect at full alpha (`feFuncA slope=0 intercept=1`); the
-   mix-blend-mode carries the visibility. sRGB-pinned, deterministic seed. */
-:root {
-    --paper-grain-tooth: url("data:image/svg+xml,%3Csvg width='140' height='140' viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04 0.09' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.8' intercept='-0.4'/%3E%3CfeFuncG type='linear' slope='1.8' intercept='-0.4'/%3E%3CfeFuncB type='linear' slope='1.8' intercept='-0.4'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E");
-    --paper-grain-tile: 140px;
-}
-
-@utility paper-underpaint {
-    position: fixed;
-    inset: 0;
-    z-index: -1;
-    pointer-events: none;
-    background-image: var(--paper-grain-tooth);
-    background-repeat: repeat;
-    background-size: var(--paper-grain-tile) var(--paper-grain-tile);
-    opacity: var(--paper-grain-opacity, var(--glass-grain-opacity));
-    /* LIGHT: ink sinks into the cream → multiply darkens the valleys. */
-    mix-blend-mode: multiply;
-}
-
-:where(.dark) .paper-underpaint,
-.dark .paper-underpaint {
-    /* DARK: fiber catches light off the ink → screen lifts (NOT soft-light, which
-       collapses to identity on the near-black pole — the self-cancelling defect). */
-    mix-blend-mode: screen;
-}
-
-@utility paper-grain-overlay {
-    position: relative;
-    isolation: isolate;
-
-    &::after {
-        content: "";
-        position: absolute;
-        inset: 0;
-        border-radius: inherit;
-        pointer-events: none;
-        background-image: var(--paper-grain-tooth);
-        background-repeat: repeat;
-        background-size: var(--paper-grain-tile) var(--paper-grain-tile);
-        opacity: var(--paper-grain-opacity, var(--glass-grain-opacity));
-        /* LIGHT tooth: multiply — the physically-true ink-into-pits darken (NOT
-           overlay, which is identity on the L≈0.98 cream pole). */
-        mix-blend-mode: multiply;
-    }
-}
-
-:where(.dark) .paper-grain-overlay::after,
-.dark .paper-grain-overlay::after {
-    /* DARK tooth: screen — fiber catches light off the ink (NOT soft-light). */
-    mix-blend-mode: screen;
-}
-
-/* ═══════════════════════════════════════════════════════════════════════
-   BD.W-PAGE-FIELD / BD.W-GLASS-FIELD — the WARM COLORFUL FIELD register
-   ───────────────────────────────────────────────────────────────────────
-   The single highest-leverage piece: it turns the gray storybook WARM. A
-   per-route four-layer technicolor CEL (amber key → terracotta mid → sand
-   bounce + a warm over-glaze toward the --glass-key corner) PLUS a wide
-   low-chroma BASE WASH that raises the floor everywhere, painted at FIELD
-   lightness (L 0.90-0.93 light / 0.28-0.34 dark — where the gamut admits
-   REAL chroma, NOT the gamut-bound L0.98 plate) OVER the decoupled
-   --neutral-0 floor (KEEP-NEUTRAL, untouched, never deleted).
-
-   ONE primitive, TWO acceptance floors (glass-floor ~0.012 composite-behind-
-   glass + field-floor 0.045 ground). The library glass material is BYTE-
-   UNTOUCHED — it finally has a backdrop worthy of it.
-
-   THE WARM-BOUND IS A PAINT INVARIANT: --field-h clamps the route's
-   --field-h-raw to [25,95] IN THE CSS calc, so an inline raw:210 CANNOT
-   paint teal/navy. The teal/navy purge is enforced at the paint layer.
-
-   OPT-IN: the warm stops only render under `[data-paper-field]` (the demo
-   chassis sets it per glass route) — the calm neutral underpaint stays the
-   default for solid-chrome routes; --neutral-0 stays decoupled + calm.
-
-   CROSS-ENGINE: pure compositor CSS — radial/conic-gradient + oklch() +
-   transform only. NO backdrop-filter:url, NO SVG goo, NO trig. oklch ≥ Safari
-   15.4, @property ≥ 16.4, gradients/transform forever. The WebKit premultiply-
-   toward-black desaturation hole is dodged: every warm 0-alpha stop is an
-   explicit `oklch(L C H / 0)` warm color, NEVER bare `transparent`.
-   ═══════════════════════════════════════════════════════════════════════ */
-
-/* The warm-bound: clamp the route's raw hue request to [25,95]. A DISTINCT
-   var (NOT self-referential `--field-h: max(var(--field-h),…)` which is a
-   no-op) — the route writes --field-h-raw, the field resolves --field-h.
-   Set on the field element itself so the clamp resolves even when the chassis
-   writes --field-h-raw on an ancestor. */
-.paper-field {
-    --field-h: clamp(25, var(--field-h-raw, 62), 95);
-}
-
-/* The warm-cel GROUND — a dedicated fixed plane the chassis mounts UNDER the
-   grain (the grain `.paper-underpaint` rides on top at its 0.22 multiply
-   opacity; the field paints true at full opacity / normal blend, so the grain
-   does NOT crush the pigment). ONE <PaperBackdrop field> component emits both,
-   stacked — one backdrop mount, grain on top, warm field below. */
-.paper-field {
-    position: fixed;
-    inset: 0;
-    /* one step BELOW the grain underpaint (the chassis mounts the grain at
-       -z-10) so the grain rides ON TOP of the warm field — one backdrop, two
-       stacked planes. Still above the page floor (content is z 0+). */
-    z-index: -11;
-    pointer-events: none;
-    /* L4 warm over-glaze — a faint cel sheen brightest toward the upper-right
-       --glass-key corner (cel coherence: field + glass rim/cast share ONE key).
-       --glass-key is a KEYWORD (upper-right), so the glaze is positioned by a
-       fixed `at`/`from` matching it — NEVER a `-58deg`/keyword-as-angle bug. */
-    background:
-        conic-gradient(
-            from -45deg at 78% 22%,
-            oklch(0.96 0.05 calc(var(--field-h) + 6) / calc(0.30 * var(--field-intensity))),
-            oklch(0.96 0.05 calc(var(--field-h) + 6) / 0) 28%,
-            oklch(0.96 0.05 calc(var(--field-h) + 6) / 0) 72%,
-            oklch(0.96 0.05 calc(var(--field-h) + 6) / calc(0.18 * var(--field-intensity)))
-        ),
-        /* the wide warm BASE WASH — raises the floor EVERYWHERE (no flat gap). */
-        radial-gradient(
-            120% 100% at 50% 50%,
-            oklch(0.91 0.075 calc(var(--field-h) + 8) / calc(0.50 * var(--field-intensity))),
-            oklch(0.91 0.075 calc(var(--field-h) + 8) / 0) 100%
-        ),
-        /* L3 sand fill-light bounce (bottom-right). */
-        radial-gradient(
-            95% 80% at 80% 88%,
-            oklch(0.88 0.115 calc(var(--field-h) + 30) / calc(0.90 * var(--field-intensity))),
-            oklch(0.88 0.115 calc(var(--field-h) + 30) / 0) 70%
-        ),
-        /* L2 terracotta saturated mid (right band, where the cards sit). */
-        radial-gradient(
-            95% 78% at 78% 30%,
-            oklch(0.85 0.145 calc(var(--field-h) - 24) / calc(0.90 * var(--field-intensity))),
-            oklch(0.85 0.145 calc(var(--field-h) - 24) / 0) 72%
-        ),
-        /* L1 amber key mass (densest pigment, top-left toward the key-light). */
-        radial-gradient(
-            100% 84% at 24% 20%,
-            oklch(0.87 0.155 calc(var(--field-h)) / calc(0.95 * var(--field-intensity))),
-            oklch(0.87 0.155 calc(var(--field-h)) / 0) 75%
-        ),
-        var(--neutral-0); /* L0 the KEEP-NEUTRAL solid floor — decoupled. */
-}
-
-/* DARK: warm-LUMINOUS — lower L, KEEP chroma; NEVER gray-charcoal. Plain
-   ancestor `.dark .x` (a scoped :global(.dark) silently drops; this is a
-   non-scoped global stylesheet so a plain `.dark` ancestor is correct). */
-.dark .paper-field {
-    background:
-        conic-gradient(
-            from -45deg at 78% 22%,
-            oklch(0.42 0.05 calc(var(--field-h) + 6) / calc(0.30 * var(--field-intensity))),
-            oklch(0.42 0.05 calc(var(--field-h) + 6) / 0) 28%,
-            oklch(0.42 0.05 calc(var(--field-h) + 6) / 0) 72%,
-            oklch(0.42 0.05 calc(var(--field-h) + 6) / calc(0.18 * var(--field-intensity)))
-        ),
-        radial-gradient(
-            120% 100% at 50% 50%,
-            oklch(0.30 0.055 calc(var(--field-h) + 8) / calc(0.50 * var(--field-intensity))),
-            oklch(0.30 0.055 calc(var(--field-h) + 8) / 0) 100%
-        ),
-        radial-gradient(
-            95% 80% at 80% 88%,
-            oklch(0.34 0.085 calc(var(--field-h) + 30) / calc(0.90 * var(--field-intensity))),
-            oklch(0.34 0.085 calc(var(--field-h) + 30) / 0) 70%
-        ),
-        radial-gradient(
-            95% 78% at 78% 30%,
-            oklch(0.33 0.10 calc(var(--field-h) - 24) / calc(0.90 * var(--field-intensity))),
-            oklch(0.33 0.10 calc(var(--field-h) - 24) / 0) 72%
-        ),
-        radial-gradient(
-            100% 84% at 24% 20%,
-            oklch(0.36 0.11 calc(var(--field-h)) / calc(0.95 * var(--field-intensity))),
-            oklch(0.36 0.11 calc(var(--field-h)) / 0) 75%
-        ),
-        var(--neutral-0);
-}
-
-/* The CARTOON DRIFT — liquid-weight on the ground: anticipation (pull-back) →
-   arc sweep (translate + rotate on ONE curve) → follow-through overshoot, baked
-   by --ease-cartoon-punch (DEPEND on BD.W-CARTOON-PUNCH, no literal-cubic dup).
-   Rides a `::before` copy of the bg (the field plane has a FREE ::before, no
-   collision with the grain). The warm stops survive PRM; only the drift
-   freezes. */
-.paper-field::before {
-    content: "";
-    position: absolute;
-    inset: -28%;
-    background: inherit;
-    opacity: 0.72;
-    pointer-events: none;
-    animation: field-cel-drift 42s
-        var(--ease-cartoon-punch, cubic-bezier(0.5, -0.2, 0.4, 1.2)) infinite
-        alternate;
-    will-change: transform;
-    content-visibility: auto;
-}
-
-@keyframes field-cel-drift {
-    /* independent translate:/scale:/rotate: LONGHANDS — a `transform: scale()`
-       shorthand would clobber the translate centering (build-trap e). */
-    from {
-        translate: -1.5% 1%;
-        scale: 1;
-        rotate: -1.2deg;
-    }
-    to {
-        translate: 2.5% -2.5%;
-        scale: 1.07;
-        rotate: 2.4deg;
-    }
-}
-
-/* ═══════════════════════════════════════════════
-   A11y — respect user motion + transparency preferences
-   ═══════════════════════════════════════════════ */
-@media (prefers-reduced-motion: reduce) {
-    /* the drift freezes — the warm field STAYS (it is content, not motion). */
-    .paper-field::before {
-        animation: none;
-    }
-}
-
-@media (prefers-reduced-transparency: reduce) {
-    /* the warm stops drop to 0-alpha; the decoupled --neutral-0 floor shows
-       (the calm opaque legibility floor). The field is a transmissive
-       enhancement, NEVER a legibility dependency. */
-    .paper-field {
-        --field-intensity: 0;
-    }
-    .paper-underpaint,
-    .paper-grain-overlay::after {
-        opacity: 0;
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .paper-underpaint {
-        /* Static noise is fine at rest; only kill animated grain shimmer if any.
-           The underpaint is currently a still texture, but guard future motion. */
-        animation: none !important;
-    }
-}
+:root { --paper-grain-tooth: repeating-linear-gradient( 28deg, oklch(0.9 0.045 84 / 0.5) 0, oklch(0.62 0.052 60 / 0.5) 1.4px, oklch(0.9 0.045 84 / 0.5) 2.8px ), repeating-linear-gradient( -64deg, oklch(0.88 0.04 82 / 0.38) 0, oklch(0.6 0.05 58 / 0.38) 1.75px, oklch(0.88 0.04 82 / 0.38) 3.5px ), repeating-linear-gradient( 10deg, oklch(0.85 0.05 78 / 0.28) 0, oklch(0.7 0.055 66 / 0.28) 3.5px, oklch(0.85 0.05 78 / 0.28) 7px ); --paper-grain-tile: 140px; --paper-grain-relief: none; } @supports (backdrop-filter: blur(1px)) { :root { --paper-grain-relief: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='r' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='table' tableValues='0.31 0.96'/%3E%3CfeFuncG type='table' tableValues='0.25 0.9'/%3E%3CfeFuncB type='table' tableValues='0.15 0.78'/%3E%3CfeFuncA type='linear' slope='0.42' intercept='0.12'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E"); } } @utility paper-underpaint { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--paper-grain-relief), var(--paper-grain-tooth); background-repeat: repeat; background-size: var(--paper-grain-tile) var(--paper-grain-tile); opacity: var(--paper-grain-opacity, var(--glass-grain-opacity)); mix-blend-mode: multiply; } :where(.dark) .paper-underpaint, .dark .paper-underpaint { mix-blend-mode: screen; } @utility paper-grain-overlay { position: relative; isolation: isolate; &::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: var(--paper-grain-relief), var(--paper-grain-tooth); background-repeat: repeat; background-size: var(--paper-grain-tile) var(--paper-grain-tile); opacity: var(--paper-grain-opacity, var(--glass-grain-opacity)); mix-blend-mode: multiply; } } :where(.dark) .paper-grain-overlay::after, .dark .paper-grain-overlay::after { mix-blend-mode: screen; } @media (prefers-reduced-transparency: reduce) { .paper-underpaint, .paper-grain-overlay::after { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .paper-underpaint { animation: none !important; } }

package/dist/styles/scroll-choreography.css

@@ -1,357 +1 @@
-/*
- * scroll-choreography.css — the SOTA scroll-driven CHOREOGRAPHY register
- * (BB.W-SCROLL-MOTION).
- *
- * Cascade rung AFTER scroll-driven.css. glass-ui owns the native scroll-driven
- * SUBSTRATE (scroll-driven.css `scroll()`/`view()` + the `--demo-main-progress`
- * named timeline + the `supportsCssTimeline` harden) but composes none of the
- * CHOREOGRAPHY — the page-load BUILD, the section CASCADE, the scroll-PINNED
- * fixed-stage-advances-time reveals + the smooth-scroll register. The award-winners
- * hand-roll these on Lenis+GSAP (a 20-40KB JS dependency); glass-ui ships the
- * NATIVE register — the platform now ships `scroll()`/`view()`/`timeline-scope`
- * natively, off the compositor at 60fps (the no-net-dep fence; the 2026
- * universal-support convergence). NO Lenis/GSAP/Locomotive dependency, ever.
- *
- *   .scroll-build   — the route-enter page-build (chrome -> hero -> body, a
- *                     spring-clocked coupled-fade, @keyframes-on-mount [NOT a
- *                     scroll timeline — the build fires on mount], PRM-snapped).
- *   .scroll-cascade — the orchestrated section cascade (per-child view() timeline,
- *                     the implicit stagger [NO setTimeout], the spring-clocked
- *                     coupled transform+opacity build).
- *   .scroll-pin     — the fixed-stage-advances-time scroll-pinned register
- *                     (position: sticky stage; the stage's internal phases advance
- *                     against a spring-damped `--pin-t` the keyframes.js scroll spine
- *                     `useScrollPin` writes per scroll tick — EVERY engine, no
- *                     `animation-timeline`. The dead `--gl-pin` named scroll-timeline
- *                     is EXCISED — BD.W-SCROLL-LIQUID-ENGINE).
- *   .smooth-scroll  — the native scroll-behavior: smooth opt-in (PRM-gated,
- *                     zero runtime — a smooth-scroll under reduce is a vestibular
- *                     concern, so the smooth interpolation is dropped under PRM).
- *
- * THE DISCIPLINE (mirrors scroll-driven.css EXACTLY — the exemplary outer-gate):
- * the whole register sits under `@media (prefers-reduced-motion: no-preference)`
- * so under PRM no scroll/build animation attaches at all and content renders in
- * its terminal state (the `from` keyframe never applies because the animation
- * never binds; the .scroll-pin stage shows its terminal phase, no sweep). The
- * `view()`-cascade recipe sits under a second `@supports (animation-timeline: …)`
- * gate so a non-supporting engine gets the STATIC cascade layout. The .scroll-pin
- * register needs NO `@supports` gate — its `--pin-t` is JS-written by `useScrollPin`
- * on every engine; under PRM the composable zeroes the scrub (1:1, no drift).
- *
- * COMPOSITOR-ONLY (the proof:no-layout-animation floor BB.W-CARD-COMPOSITE): every
- * @keyframes step + transition animates ONLY transform/translate/scale/opacity/
- * clip-path — NEVER a layout-triggering property (no height/padding/inline-size/
- * top/grid-template). The SPATIAL (transform) legs ride the per-spring `--spring-*`
- * + the matching `--spring-*-duration` settle clock (P2/P4); the EFFECTS (opacity)
- * legs ride the no-overshoot `--ease-out` bezier (P1/P3 — a fade must never
- * overshoot). The spring tokens are READ-ONLY (the W-GLASS-CAL clock fence — this
- * register THREADS them, it never re-tunes a spring value or a duration).
- */
-
-/* ─────────────────────────────────────────────────────────────────────────────
- * BD.W-SCROLL-LIQUID-ENGINE — the liquid-weight scroll tokens.
- *
- * The `--ease-scroll-spring` is the compositor spring-scrub the cascade rides
- * (ZERO JS). The pin-phase fractions are the calc-friendly window bounds the
- * `--pin-t` recipes read (a NUMBER, not the `%` the dead `animation-range` used).
- * All golden-proportioned (1/φ family). The liquid-weight scrub itself is a JS-side
- * param of `useScrollScene`/`useScrollPin` (the φ-derived defaults live in the
- * composables, PRM → 0 inside them). The cartoon-punch deps
- * (`--motion-weight`/`--ease-cartoon-punch`/`--shadow-cartoon-md`) SHIP today and are
- * consumed via `var(…, fallback)` so the recipes stay GREEN. */
-:root {
-    /* The spring-shaped compositor cascade ease — the `--spring-gentle` twin
-       (ζ ≈ 0.85, a `springLinearStops` `linear()` stop-set). Degrades to the
-       no-overshoot `--ease-out` where `linear()` is unsupported (Safari < 17.2 —
-       the house precedent). `--spring-gentle` SHIPS (scheme-motion.css). */
-    --ease-scroll-spring: var(--spring-gentle, var(--ease-out, ease-out));
-    /* The pin reveal/expand windows as 0..1 fractions (the `--pin-t` recipes read
-       a NUMBER for the calc, not the `%` the dead timeline used). 1/φ² + 0.9. */
-    --scroll-pin-phase-reveal-end-frac: 0.382;
-    --scroll-pin-phase-expand-end-frac: 0.9;
-    /* The volume-preserving squash depth — 1 − 1/φ⁴. */
-    --scroll-pin-squash-floor: 0.944;
-}
-
-@supports not (animation-timing-function: linear(0, 1)) {
-    :root {
-        /* Where `linear()` is unsupported the spring twin cannot resolve — fall to
-           the no-overshoot settle bezier (a scrubbed spring without the stop-set). */
-        --ease-scroll-spring: var(--ease-out, ease-out);
-    }
-}
-
-/* ─────────────────────────────────────────────────────────────────────────────
- * .scroll-build — the route-enter page-build.
- *
- * A MOUNT-driven entrance (route-enter), NOT a scroll-driven one — so it rides a
- * plain `@keyframes ... animation` (NOT a `view()`/`scroll()` timeline; the build
- * fires on first paint of the new route, not on scroll). It sits under the PRM
- * no-preference gate ALONE (no `@supports (animation-timeline)` — it does not use a
- * timeline, so it runs on every engine; under PRM it never binds, so the page
- * mounts at its terminal state).
- *
- * The coordinated stagger: the .scroll-build container's direct children are the
- * BEATS (chrome, hero, body), each delayed by `--scroll-build-step * --i` (the
- * per-beat coordinated stagger — the page assembles chrome-first, then the hero,
- * then the first section). `--i` is the beat index a consumer sets per child
- * (0-based); the chassis sets it on the chrome/hero/section in reading order
- * (W-HIERARCHY2 owns the ORDER; this register threads the entrance ON it).
- * ─────────────────────────────────────────────────────────────────────────── */
-@media (prefers-reduced-motion: no-preference) {
-    @keyframes gl-page-build {
-        from {
-            opacity: 0;
-            /* SPATIAL leg — the build rise (a transform, compositor-only). */
-            transform: translateY(var(--scroll-build-rise, 1.5rem));
-        }
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
-
-    /* The page-build container marks the entrance; the beats are its children. */
-    .scroll-build > * {
-        /* The coupled build: the SPATIAL transform rides the snappy spring settle
-           clock (P2/P4 — the page parts arrive with crisp gravity); the opacity is
-           a coupled leg in the SAME keyframe on the SAME clock so the fade tracks
-           the rise as ONE coherent glide (P3 — fade coupled to transform). The
-           no-overshoot bezier governs the FADE channel where the spring's
-           overshoot is not wanted: `--ease-out` is named on the build's title beat
-           (the hero <h1> — audacious type arrives with GRAVITY, not bounce, per
-           W-HIERARCHY2); the other beats ride the snappy spring. */
-        animation: gl-page-build var(--spring-snappy-duration, 0.34s)
-            var(--spring-snappy) both;
-        animation-delay: calc(var(--scroll-build-step, 90ms) * var(--i, 0));
-    }
-
-    /* The hero/title beat: the audacious-type-arrives-with-gravity register — the
-       no-overshoot `--ease-out` bezier (a strictly monotone settle, NO overshoot
-       past the terminal transform), the existing .story-hero-title--enter
-       discipline folded into the ONE entrance system. A consumer marks the hero
-       beat `.scroll-build-hero`. */
-    .scroll-build > .scroll-build-hero {
-        animation: gl-page-build 0.62s var(--ease-out, ease-out) both;
-    }
-}
-
-/* The EXPLICIT P6 carve — under prefers-reduced-motion: reduce the page-build DROPS
-   the spatial transform (no movement — the vestibular floor) but KEEPS a gentle
-   terminal fade-in (the EFFECTS channel survives per P6: fade-keeps, transform-
-   drops). This sits OUTSIDE the no-preference gate as the reduce-arm of the
-   coordinated build (mirroring the transitions.css fade-slide PRM arm — the
-   opacity leg alone under reduce). The build is mount-driven, so the no-preference
-   gate above never binds under reduce; this arm gives PRM users the coupled-FADE
-   terminal entrance with ZERO motion frames (no translateY), the genuine P6 read. */
-@media (prefers-reduced-motion: reduce) {
-    @keyframes gl-page-build-fade {
-        from {
-            opacity: 0;
-        }
-        to {
-            opacity: 1;
-        }
-    }
-    .scroll-build > * {
-        /* fade-keeps (opacity only), transform-DROPS (no translateY) — P6. */
-        animation: gl-page-build-fade var(--duration-fast, 0.16s) var(--ease-out, ease-out)
-            both;
-        animation-delay: 0s; /* no coordinated stagger under reduce — a single calm paint */
-    }
-}
-
-/* ─────────────────────────────────────────────────────────────────────────────
- * .scroll-cascade — the orchestrated section cascade.
- *
- * Extends the bare `[data-scroll-reveal] > *` 6px fade into the SOTA coordinated
- * build: the per-child `view()` timeline stays the implicit-stagger mechanism (each
- * child owns its own timeline — NO setTimeout cascade), but the entrance is the
- * spring-clocked coupled build (a deeper rise + a tighter reveal window). It sits
- * under the PRM no-preference gate + the `@supports (animation-timeline: view())`
- * gate (the scroll-driven.css discipline) — under PRM/non-support the sections
- * render at their terminal state.
- * ─────────────────────────────────────────────────────────────────────────── */
-@media (prefers-reduced-motion: no-preference) {
-    @supports ((animation-timeline: view()) and (animation-range: entry)) {
-        @keyframes gl-cascade-build {
-            from {
-                /* EFFECTS leg — the coupled fade (no overshoot). */
-                opacity: 0;
-                /* SPATIAL leg — the build rise (a transform, compositor-only). */
-                transform: translateY(var(--scroll-cascade-rise, 1.25rem));
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        .scroll-cascade > * {
-            /* The view()-timeline drives the build off each child's OWN entry into
-               the viewport (the implicit stagger). The progress-bound timeline maps
-               the entrance across the `animation-range` window; the keyframe's
-               coupled transform+opacity build is the orchestrated cascade (vs the
-               bare 6px reveal). `linear` is the right easing for a SCROLL-bound
-               progress map (the spring shaping lives in the section's own settle
-               where the build is mount-driven; a scroll-bound timeline reads
-               1:1 with scroll position — a spring on a scrubbed timeline reads as
-               a scrubbed spring, which is correct here as the linear progress map).
-
-               BD.W-SCROLL-LIQUID-ENGINE: the easing is the spring-shaped
-               `--ease-scroll-spring` (a `springLinearStops` `linear()` twin of
-               `--spring-gentle`, ζ ≈ 0.85) — each card's scroll-scrubbed entrance
-               reads with spring WEIGHT (a hair of overshoot at the end of its
-               range), ZERO JS (the platform carries it on the compositor). The
-               Safari-degrade-to-cel-slam arm lives in the entrance-reveal scope. */
-            animation: gl-cascade-build auto var(--ease-scroll-spring, linear) both;
-            animation-timeline: view(block);
-            animation-range: entry 0% entry var(--scroll-cascade-range-end, 45%);
-        }
-
-        /* The horizontal-scroller variant — a `view(inline)` axis. */
-        .scroll-cascade.scroll-cascade--inline > * {
-            animation-timeline: view(inline);
-        }
-
-        /* The OPT-IN column-stagger variant (the Codrops nuance — even columns
-           from top, odd from below). A GRID-surface flourish, NOT the default (the
-           proportion fence: a uniform vertical cascade is the calm StoryPage
-           default; the column-stagger is the front-door grid showcase). A consumer
-           sets `--col` (the column index) per child; even/odd rise from opposite
-           directions, offset by `--scroll-cascade-column-stagger`. */
-        @keyframes gl-cascade-build-col-even {
-            from {
-                opacity: 0;
-                transform: translateY(calc(-1 * var(--scroll-cascade-rise, 1.25rem)));
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        .scroll-cascade.scroll-cascade--columns > * {
-            animation-range: entry 0%
-                entry
-                calc(
-                    var(--scroll-cascade-range-end, 45%) +
-                        var(--scroll-cascade-column-stagger, 60ms) * 0
-                );
-        }
-        .scroll-cascade.scroll-cascade--columns > *:nth-child(even) {
-            animation-name: gl-cascade-build-col-even;
-        }
-    }
-}
-
-/* ─────────────────────────────────────────────────────────────────────────────
- * .scroll-pin — the fixed-stage-advances-time scroll-pinned register, RE-INVENTED
- * on a JS-written `--pin-t` (BD.W-SCROLL-LIQUID-ENGINE).
- *
- * THE DEFECT (excised, no alias): the prior register bound the phase reveals to a
- * named `scroll-timeline: --gl-pin` declared on `.scroll-pin` + `timeline-scope:
- * --gl-pin`. A named scroll-timeline measures the DECLARING element's OWN scroll
- * progress — but `.scroll-pin` is `overflow: visible` with zero internal scroll
- * extent, so it is NOT a scroll port: `--gl-pin`'s `currentTime` was permanently
- * `null` and the bound `gl-pin-reveal` animation parked at its `from` keyframe
- * forever (dead on EVERY engine, including those that fully support the native
- * feature — structural deadness, not a Safari degrade).
- *
- * THE FIX (every engine, no `animation-timeline`, no `@supports` gate): the stage
- * is plain `position: sticky` + `contain: layout paint` (bounded recalc); the
- * phases read a SPRING-DAMPED `--pin-t ∈ [0, 1]` that `useScrollPin` (the
- * keyframes.js scroll spine — `SpringProgress` over the ONE `createScrollReader`)
- * writes off the REAL scroll port per coalesced tick. The reveal arrives with
- * inertia, overshoots (ζ ≈ 0.85), then settles — the cartoon-slam felt register.
- * Works on Safari 15+ with no timeline primitive.
- *
- * Liquid weight is the DEFAULT here (the §L4 no-stiff-snap law): `useScrollPin`'s
- * `SpringProgress` keeps converging AFTER the finger lifts. PRM zeroes the scrub
- * (the pin scrub → 0 under reduce inside the composable) so `--pin-t` tracks
- * scroll 1:1 with no interpolated drift — the vestibular floor.
- * ─────────────────────────────────────────────────────────────────────────── */
-
-/* The typed pin progress register — `inherits: true` so the sticky stage + the
-   phase children read the `--pin-t` written on the `.scroll-pin` container; a typed
-   `@property` makes the calc cheaper + lets an optional native cosmetic-parallax leg
-   composite it. Registered OUTSIDE the PRM gate (a custom property is inert — it only
-   drives motion through the recipes below, which ARE PRM-gated). */
-@property --pin-t {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 0;
-}
-
-.scroll-pin {
-    position: relative;
-    block-size: var(--scroll-pin-stage-height, 320vh);
-}
-
-.scroll-pin-stage {
-    position: sticky;
-    inset-block-start: 0;
-    /* Bounded main-thread recalc — the `--pin-t` write is a style recalc on this
-       isolated subtree, NOT a reflow (translate/scale/opacity don't reflow). */
-    contain: layout paint;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-    /* Phase 1 — the reveal. Reads `--pin-t` mapped across the reveal window
-       (0 .. --scroll-pin-phase-reveal-end-frac). The lift + squash ride the
-       compositor longhands (`translate`/`scale` — NEVER the `transform` shorthand,
-       which would fold a centering translate; the longhands stack independently).
-       The squash floor is volume-preserving (a hair of squash on entry). */
-    .scroll-pin-stage .scroll-pin-phase-reveal {
-        --t: clamp(
-            0,
-            calc(var(--pin-t, 0) / var(--scroll-pin-phase-reveal-end-frac, 0.382)),
-            1
-        );
-        opacity: var(--t);
-        translate: 0 calc((1 - var(--t)) * var(--scroll-pin-lift, 2.5rem));
-        scale: calc(
-            var(--scroll-pin-squash-floor, 0.944) +
-                (1 - var(--scroll-pin-squash-floor, 0.944)) * var(--t)
-        );
-        /* will-change scoped to the active phase — added while the pin is in range,
-           never the full 320vh lifetime (the audit's transient-promotion rule). */
-        will-change: transform, opacity;
-    }
-
-    /* Phase 2 — the settle/drift. Reads the reveal-end..expand-end window of
-       `--pin-t`; a gentle compositor drift as the reader continues past, never a
-       layout move. */
-    .scroll-pin-stage .scroll-pin-phase-settle {
-        --t: clamp(
-            0,
-            calc(
-                (var(--pin-t, 0) - var(--scroll-pin-phase-reveal-end-frac, 0.382)) /
-                    (
-                        var(--scroll-pin-phase-expand-end-frac, 0.9) -
-                            var(--scroll-pin-phase-reveal-end-frac, 0.382)
-                    )
-            ),
-            1
-        );
-        opacity: 1;
-        translate: 0 calc(var(--t) * -1 * var(--scroll-pin-lift, 2.5rem));
-        scale: calc(1 + 0.02 * var(--t));
-    }
-}
-
-/* ─────────────────────────────────────────────────────────────────────────────
- * .smooth-scroll — the native smooth-scroll opt-in.
- *
- * The native `scroll-behavior: smooth` (CSS-first, zero runtime — NOT a JS rAF
- * momentum loop, which IS Lenis and is the fence). An OPT-IN class the scroller
- * (`<main>`, a `.scroll-pin` container) applies. PRM-GATED: under
- * `prefers-reduced-motion: reduce` the smooth interpolation is DROPPED and the
- * jump-scroll is correct (a smooth-scroll over an anchor-jump is a vestibular
- * concern). A consumer wanting Lenis-grade momentum brings it in THEIR app (the
- * presets-in-consumers discipline); the library ships the native register.
- * ─────────────────────────────────────────────────────────────────────────── */
-@media (prefers-reduced-motion: no-preference) {
-    .smooth-scroll {
-        scroll-behavior: smooth;
-    }
-}
+:root { --ease-scroll-spring: var(--spring-gentle); --scroll-pin-phase-reveal-end-frac: 0.382; --scroll-pin-phase-expand-end-frac: 0.9; --scroll-pin-squash-floor: 0.944; } @media (prefers-reduced-motion: no-preference) { @supports ((animation-timeline: view()) and (animation-range: entry)) { @keyframes gl-cascade-build { from { opacity: 0; transform: translateY(var(--scroll-cascade-rise, 1.25rem)); } to { opacity: 1; transform: translateY(0); } } .scroll-cascade > * { animation: gl-cascade-build auto var(--ease-scroll-spring, linear) both; animation-timeline: view(block); animation-range: entry 0% entry var(--scroll-cascade-range-end, 45%); } .scroll-cascade.scroll-cascade--inline > * { animation-timeline: view(inline); } @keyframes gl-cascade-build-col-even { from { opacity: 0; transform: translateY(calc(-1 * var(--scroll-cascade-rise, 1.25rem))); } to { opacity: 1; transform: translateY(0); } } .scroll-cascade.scroll-cascade--columns > * { animation-range: entry 0% entry calc( var(--scroll-cascade-range-end, 45%) + var(--scroll-cascade-column-stagger, 6%) * var(--col, 0) ); } .scroll-cascade.scroll-cascade--columns > *:nth-child(even) { animation-name: gl-cascade-build-col-even; } } } @property --pin-t { syntax: "<number>"; inherits: true; initial-value: 0; } .scroll-pin { position: relative; block-size: var(--scroll-pin-stage-height, 320vh); } .scroll-pin-stage { position: sticky; inset-block-start: 0; contain: layout paint; } @media (prefers-reduced-motion: no-preference) { .scroll-pin-stage .scroll-pin-phase-reveal { --t: clamp( 0, calc(var(--pin-t, 0) / var(--scroll-pin-phase-reveal-end-frac, 0.382)), 1 ); opacity: var(--t); translate: 0 calc((1 - var(--t)) * var(--scroll-pin-lift, 2.5rem)); scale: calc( var(--scroll-pin-squash-floor, 0.944) + (1 - var(--scroll-pin-squash-floor, 0.944)) * var(--t) ); will-change: transform, opacity; } .scroll-pin-stage .scroll-pin-phase-settle { --t: clamp( 0, calc( (var(--pin-t, 0) - var(--scroll-pin-phase-reveal-end-frac, 0.382)) / ( var(--scroll-pin-phase-expand-end-frac, 0.9) - var(--scroll-pin-phase-reveal-end-frac, 0.382) ) ), 1 ); opacity: 1; translate: 0 calc(var(--t) * -1 * var(--scroll-pin-lift, 2.5rem)); scale: calc(1 + 0.02 * var(--t)); } } @media (prefers-reduced-motion: no-preference) { .smooth-scroll { scroll-behavior: smooth; } }