@mkbabb/glass-ui 4.1.0 → 4.2.0

package/src/styles/paper.css

@@ -1,29 +1,68 @@
 /*
- * paper.css — Paper-texture primitives
+ * 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 SVG turbulence at z-index -1
- *   - paper-grain-overlay: ::after overlay for individual surfaces
+ *   - paper-underpaint: fixed, app-root, fullscreen tooth texture at z-index -1
+ *   - paper-grain-overlay: ::after tooth overlay for individual surfaces
  *
- * Texture: feTurbulence baseFrequency 0.65, 4 octaves, desaturated via
- * feColorMatrix, blended multiply (light) / soft-light (dark). Tiles ~60px.
+ * 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: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeBlend mode='multiply' in2='SourceGraphic'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
+    background-image: var(--paper-grain-tooth);
     background-repeat: repeat;
-    background-size: 60px 60px;
-    opacity: var(--glass-grain-opacity);
+    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 {
-    mix-blend-mode: soft-light;
+    /* 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 {
@@ -36,23 +75,200 @@
         inset: 0;
         border-radius: inherit;
         pointer-events: none;
-        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeBlend mode='multiply' in2='SourceGraphic'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
+        background-image: var(--paper-grain-tooth);
         background-repeat: repeat;
-        background-size: 60px 60px;
-        opacity: var(--glass-grain-opacity);
-        mix-blend-mode: overlay;
+        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 {
-    mix-blend-mode: soft-light;
+    /* 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;

package/src/styles/scroll-choreography.css

@@ -19,9 +19,11 @@
  *                     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 + a named scroll-timeline linked via
- *                     timeline-scope; the stage's internal phases advance with
- *                     scroll progress, compositor channels only).
+ *                     (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).
@@ -31,9 +33,10 @@
  * 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
- * scroll-driven recipes sit under a second `@supports (animation-timeline: …)`
- * gate so a non-supporting engine gets the STATIC layout (the .scroll-pin stage
- * is a correct non-pinned read, never a broken silent stage).
+ * `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/
@@ -45,6 +48,39 @@
  * 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.
  *
@@ -160,8 +196,15 @@
                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). */
-            animation: gl-cascade-build auto linear both;
+               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%);
         }
@@ -202,83 +245,97 @@
 }
 
 /* ─────────────────────────────────────────────────────────────────────────────
- * .scroll-pin — the fixed-stage-advances-time scroll-pinned register.
+ * .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 SOTA "scrolling does not move the scene, it advances time inside it" model:
- * a `.scroll-pin` tall container (the `--scroll-pin-stage-height` temporal space)
- * holds a `.scroll-pin-stage` `position: sticky` element. The container declares
- * a named `scroll-timeline`; the stage's internal phase animations bind to that
- * named timeline via `timeline-scope` (so the stage animates against the
- * CONTAINER'S scroll progress — the fixed stage advances time). The phase
- * animations are compositor-only (transform/opacity/clip-path over the
- * `animation-range` phase windows — the Codrops phased sequence: a reveal phase
- * 0..45%, an expand phase 45..90%, a settle phase 90..100%).
+ * 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.
  *
- * `timeline-scope` is the newest primitive — the `@supports` gate probes it (NOT
- * just `scroll()`), so an engine with `scroll()`/`view()` but not `timeline-scope`
- * gets the STATIC layout (a correct non-pinned read: the stage is a plain sticky
- * element at its terminal phase, never a broken silent stage). In 2026
- * `timeline-scope` ships alongside `scroll()`/`view()` (the universal-support
- * convergence), so the CSS-only register is the ship; the JS fallback leaf (mirror
- * useScrollProgress's dual-path single-writer) is BOOKED only on a material
- * engine-gap reveal (the §Triumvirate support-matrix trigger) — never a JS scroll
- * lib (the no-net-dep fence is binding either way).
+ * 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.
  * ─────────────────────────────────────────────────────────────────────────── */
-@media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: scroll()) and (timeline-scope: --gl-pin) {
-        @keyframes gl-pin-reveal {
-            from {
-                opacity: 0;
-                transform: translateY(var(--scroll-pin-lift, 2.5rem)) scale(0.96);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0) scale(1);
-            }
-        }
-        @keyframes gl-pin-settle {
-            from {
-                transform: scale(1);
-                opacity: 1;
-            }
-            to {
-                /* The settle phase — a gentle compositor drift, never a layout move. */
-                transform: scale(1.02) translateY(calc(-1 * var(--scroll-pin-lift, 2.5rem)));
-                opacity: 1;
-            }
-        }
 
-        /* The tall temporal container declares a named scroll-timeline + exposes it
-           to descendants via timeline-scope (the fixed-stage-advances-time link). */
-        .scroll-pin {
-            position: relative;
-            block-size: var(--scroll-pin-stage-height, 320vh);
-            scroll-timeline-name: --gl-pin;
-            scroll-timeline-axis: block;
-            timeline-scope: --gl-pin;
-        }
+/* 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;
+}
 
-        /* The sticky stage — pinned to the viewport while the container scrolls
-           past; its phases advance against the container's --gl-pin timeline. */
-        .scroll-pin-stage {
-            position: sticky;
-            inset-block-start: 0;
-        }
+.scroll-pin {
+    position: relative;
+    block-size: var(--scroll-pin-stage-height, 320vh);
+}
 
-        /* Phase 1 — the reveal (0..45% of the container scroll). */
-        .scroll-pin-stage .scroll-pin-phase-reveal {
-            animation: gl-pin-reveal auto linear both;
-            animation-timeline: --gl-pin;
-            animation-range: 0% var(--scroll-pin-phase-reveal-end, 45%);
-        }
+.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;
+}
 
-        /* Phase 2 — the settle/expand (the reveal-end..expand-end window). */
-        .scroll-pin-stage .scroll-pin-phase-settle {
-            animation: gl-pin-settle auto linear both;
-            animation-timeline: --gl-pin;
-            animation-range: var(--scroll-pin-phase-reveal-end, 45%)
-                var(--scroll-pin-phase-expand-end, 90%);
-        }
+@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));
     }
 }