@mkbabb/glass-ui 4.2.0 → 5.0.0

package/src/styles/paper.css

@@ -1,48 +1,99 @@
 /*
- * 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).
+ * paper.css — Paper-texture primitives (BG.W-PAPER-TEXTURE-UNIFY — ONE warm
+ * raster tooth PRIMARY; feTurbulence RETIRED as the primary, DEMOTED to an
+ * `@supports`-gated relief enhancement).
  *
  * 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 HISTORY the design is immune to (KS-PAPER §1.1): the paper register was
+ * built three times on procedural SVG noise; the user rejected the SVG-noise
+ * path TWICE ("disgusting metallic"). The class recurred a third time (D-2): the
+ * grey `saturate=0` tooth borrowed ALL its warmth from the substrate, so once
+ * the universal warm plane was retired, multiply desaturated surfaces below the
+ * C 0.02 warm floor and the tooth read metallic-gray. Two structural causes: (a)
+ * `feDiffuseLighting` computes normals from a noise bump-map → an anisotropic
+ * brushed-metal sheen ("specular IS the metal"); (b) grey-at-source warmth was
+ * borrowed, never baked.
  *
- * 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 FIX — warmth BAKED AT SOURCE, no lighting primitive (KS-PAPER §3.Q1):
+ * `--paper-grain-tooth` is now a WARM RASTER tooth — a deterministic, engine-
+ * invariant, warm-ecru fiber weave composed from crossed `repeating-linear-
+ * gradient` fibers (two fine crossed bands at incommensurate periods + one
+ * coarse raking band; every stop a warm-ecru/umber `oklch()`, mean C ≈ 0.045,
+ * 2-3× the 0.020 warm floor). It reads warm over ANY substrate — bare, dark, or
+ * washed — the D-2 substrate-warmth dependency SEVERED. It has NO lighting
+ * primitive, NO normals, NO specular term: a warm raster cannot read metallic
+ * (KS-PAPER R2). All periods divide the 140px tile evenly → seamless repeat.
  *
- * THE BLEND LAW (the decisive, physically-true move): `multiply` (light — ink
+ * THE DEMOTED feTurbulence — `--paper-grain-relief` (default `none`): the
+ * procedural noise survives ONLY as a capability-gated ENHANCEMENT, layered
+ * ABOVE the raster in the same `background-image` stack, NEVER load-bearing. It
+ * is a WARM-DUOTONE feTurbulence (the grey noise mapped umber→ecru through an
+ * `feComponentTransfer` `table` ramp) with NO `feDiffuseLighting`/lighting term
+ * (the metallic primitive is retired) at a partial layer alpha — a subtle warm
+ * fiber grain, never the sheen. sRGB-pinned, deterministic seed. Gated behind
+ * `@supports (backdrop-filter: blur(1px))` (the library's capable-engine probe)
+ * so a lean engine paints the always-warm raster alone.
+ *
+ * THE BLEND LAW (UNTOUCHED — the 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 always-present `background-image` longhand + opacity-only engage discipline
+ * (design-idioms §12 anti-pop) survives the swap: opacity is the only engaged
+ * channel; the image is never `none → image`.
  *
- * 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 LIBRARY FENCE: `--glass-grain-opacity` (0.025/0.045) is BYTE-UNTOUCHED —
+ * the calm glass whisper stands; paper is warm material, glass is a whisper. That
+ * separation IS the design (the register fence, KS-PAPER §3.Q3).
  */
 
-/* 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. */
+/* The ONE warm-ecru raster tooth — DRY single source, both utilities resolve it.
+   Deterministic, engine-invariant (no procedural noise), warm at SOURCE (every
+   stop a warm-ecru/umber oklch, C ≥ 0.02); the mix-blend-mode carries the
+   darken/lighten. All three fiber periods (2.8px / 3.5px / 7px) divide the 140px
+   tile → seamless repeat; the two fine bands run incommensurate (LCM 14px) so the
+   weave reads organic, not a clean grid. */
 :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-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;
+    /* The demoted feTurbulence relief is DROPPED by default — the everywhere
+       floor is the warm raster ALONE (KS-PAPER §3.Q1: the enhancement is never
+       load-bearing; DROP unless a capable engine warrants it). */
+    --paper-grain-relief: none;
+}
+
+/* feTurbulence DEMOTED — the warm-duotone fine-grain relief, gated behind the
+   library's capable-engine probe (`backdrop-filter`) and layered ABOVE the
+   raster. NO `feDiffuseLighting`/lighting term (the metallic primitive is
+   retired): the grey fractalNoise is mapped umber→ecru through an
+   `feComponentTransfer` `table` ramp and painted at a PARTIAL layer alpha, so it
+   reads as a subtle warm fiber grain over the raster, never a brushed-metal
+   sheen. sRGB-pinned, deterministic seed. On a lean engine the block is skipped
+   and the always-warm raster paints alone. */
+@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 {
@@ -50,7 +101,12 @@
     inset: 0;
     z-index: -1;
     pointer-events: none;
-    background-image: var(--paper-grain-tooth);
+    /* Two ALWAYS-PRESENT layers: the demoted relief (default `none` — paints
+       nothing) ABOVE the warm raster tooth. The layer count is stable (anti-pop);
+       on a lean engine `--paper-grain-relief` stays `none` so only the raster
+       paints, byte-identical in effect to a single-layer raster. A single
+       background-size applies to both layers. */
+    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));
@@ -75,7 +131,10 @@
         inset: 0;
         border-radius: inherit;
         pointer-events: none;
-        background-image: var(--paper-grain-tooth);
+        /* The relief (default `none`) ABOVE the warm raster tooth — two
+           always-present layers, the anti-pop discipline (opacity is the only
+           engaged channel; the image is never `none → image`). */
+        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));
@@ -92,183 +151,27 @@
 }
 
 /* ═══════════════════════════════════════════════════════════════════════
-   BD.W-PAGE-FIELD / BD.W-GLASS-FIELD — the WARM COLORFUL FIELD register
+   BG.W-FIELD-AURORA — the WARM COLORFUL FIELD register is RETIRED here.
    ───────────────────────────────────────────────────────────────────────
-   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 `.paper-field` CSS plane (the per-route four-layer technicolor CEL +
+   base wash + cel-drift) is SUPERSEDED by the ONE shell `<Aurora>` (a
+   recessive vividness:0 painterly field) mounted in AppShell.vue behind every
+   NON-focal route. The grain register (`.paper-underpaint` /
+   `.paper-grain-overlay::after`) below is the SURVIVOR — a clean break, no
+   alias (`.paper-field`, its `.dark` arm, the `::before` cel-drift, the
+   `@keyframes field-cel-drift`, and the `--field-h-raw`/`--field-intensity`
+   @property regs are all DELETED). `proof:no-paper-field` asserts the recipe
+   ABSENT and the grain register PRESENT.
    ═══════════════════════════════════════════════════════════════════════ */
 
-/* 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;
-    }
+    /* The grain drops to 0-alpha under reduced transparency — it is a
+       transmissive enhancement, NEVER a legibility dependency. (The retired
+       `.paper-field` PRT line that shared this block is gone; the grain
+       register is the survivor.) */
     .paper-underpaint,
     .paper-grain-overlay::after {
         opacity: 0;

package/src/styles/scroll-choreography.css

@@ -12,9 +12,10 @@
  * 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-build   — RETIRED (BG.W-ROUTE-TRANSITION). The route-enter page-build
+ *                     is now the bare keyed `<component class="route-enter">` on-mount
+ *                     `@keyframes gl-route-enter` (transitions.css), not a per-child
+ *                     `.scroll-build` stagger.
  *   .scroll-cascade — the orchestrated section cascade (per-child view() timeline,
  *                     the implicit stagger [NO setTimeout], the spring-clocked
  *                     coupled transform+opacity build).
@@ -61,10 +62,11 @@
  * 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));
+       (ζ ≈ 0.85, a `springLinearStops` `linear()` stop-set), which SHIPS
+       unconditionally (scheme-motion.css). The Safari < 17.2 `--ease-out` degrade
+       arm was COLLAPSED at BG.NF.2 W-LEGACY-LADDER-COLLAPSE — both targets parse
+       `linear()`, so the spring twin is the sole source. */
+    --ease-scroll-spring: var(--spring-gentle);
     /* 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;
@@ -73,93 +75,20 @@
     --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.
+ * .scroll-build — RETIRED (BG.W-ROUTE-TRANSITION).
  *
- * 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).
+ * The route-enter page-build is no longer a per-child staggered `.scroll-build`
+ * recipe. Under the bare keyed `<component :is :key="route.path" class="route-enter">`
+ * atomic swap, the page entrance is ONE on-mount `@keyframes gl-route-enter` on the
+ * keyed component (transitions.css `.route-enter`) — it reaches EVERY route root
+ * (StoryPage/SectionLanding/hero/intro/auth-shell/NotFound) without a per-beat
+ * `--i` stagger and without the `<Transition>` leave-window the old build raced.
+ * The `gl-page-build`/`gl-page-build-fade` keyframes + the `--scroll-build-rise`/
+ * `--scroll-build-step` tokens are deleted with it (clean break, no alias). The
+ * `.scroll-cascade`/`.scroll-pin`/`.smooth-scroll` registers below are UNTOUCHED —
+ * they are scroll-driven, not the mount-driven page entrance.
  * ─────────────────────────────────────────────────────────────────────────── */
-@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.
@@ -230,12 +159,20 @@
                 transform: translateY(0);
             }
         }
+        /* BG.W-SCROLL-SHRINK-UNIFY (D14) — the per-column stagger. The stagger is a
+           range PERCENTAGE (view()-timeline units), NOT a time: the prior
+           `--scroll-cascade-column-stagger` default was `60ms`, so
+           `calc(45% + 60ms * 0)` mixed `%` with `ms` (an INVALID calc — the whole
+           animation-range was dropped) AND multiplied by a literal `0` (every column
+           read the SAME range end, zero stagger). Now the offset is a `%` scaled by the
+           consumer-set `--col` index, so column N ends its build `N × stagger` later —
+           the even/odd column cascade the Codrops nuance intends. */
         .scroll-cascade.scroll-cascade--columns > * {
             animation-range: entry 0%
                 entry
                 calc(
                     var(--scroll-cascade-range-end, 45%) +
-                        var(--scroll-cascade-column-stagger, 60ms) * 0
+                        var(--scroll-cascade-column-stagger, 6%) * var(--col, 0)
                 );
         }
         .scroll-cascade.scroll-cascade--columns > *:nth-child(even) {

package/src/styles/scroll-driven.css

@@ -30,9 +30,23 @@
  */
 
 /* ── Scroll progress (scroll() timeline) — drives a 0..1 scaleX bar.
- * Consumers add `.scroll-progress` on a position:fixed/absolute element; the
- * scroller is the nearest ancestor block scroller (`root` by default; override
- * via `--scroll-progress-scroller`). */
+ * Consumers add `.scroll-progress` on a position:fixed/absolute/sticky element;
+ * the timeline defaults to `scroll(nearest block)` (the nearest ancestor block
+ * scroller), overridable by the FULL-value var `--scroll-progress-timeline`.
+ *
+ * BG.W-SCROLL-PROGRESS-RAIL (D5) — `scroll-origin`+`scaleX(0)` are HOISTED
+ * UNCONDITIONAL so the rest is INVISIBLE (scaleX 0) on ANY unsupported / invalid /
+ * PRM path (NOT an opacity-only rest). The timeline is a FULL-value var — NEVER
+ * `scroll(var(...))`: a `<dashed-ident>` (a named timeline) substituted into
+ * scroll()'s scroller slot is INVALID and silently computes animation-timeline to
+ * `auto`, which resolves the keyframe to scaleX(1) full-width (the HEAD D5 defect).
+ * A consumer that needs a named cross-element timeline writes the WHOLE value
+ * (`--scroll-progress-timeline: --my-timeline` + `timeline-scope` on an ancestor),
+ * never a fragment inside `scroll()`. */
+.scroll-progress {
+    transform-origin: 0 50%;
+    transform: scaleX(0);
+}
 @media (prefers-reduced-motion: no-preference) {
     @supports (animation-timeline: scroll()) {
         @keyframes gl-scroll-grow {
@@ -40,9 +54,8 @@
             to   { transform: scaleX(1); }
         }
         .scroll-progress {
-            transform-origin: 0 50%;
             animation: gl-scroll-grow auto linear;
-            animation-timeline: scroll(var(--scroll-progress-scroller, root) block);
+            animation-timeline: var(--scroll-progress-timeline, scroll(nearest block));
         }
     }
 }

package/src/styles/scroll-progress-rim.css

@@ -0,0 +1,87 @@
+/* Radius-following progress paint: a border-box fill with its padding box cut
+   away. The rim is an overlay, so it never changes its host's layout. */
+.scroll-progress-rim {
+    position: absolute;
+    inset: 0;
+    border-radius: var(--scroll-progress-rim-radius, inherit);
+    pointer-events: none;
+}
+
+.scroll-progress-rim__track {
+    position: absolute;
+    inset: 0;
+    border: var(--scroll-progress-rim-width, 4px) solid transparent;
+    border-radius: inherit;
+    background: conic-gradient(
+        from 0deg,
+        var(--scroll-progress-rim-spectrum, var(--section-color-7)),
+        transparent var(--scroll-progress-rim-fill, 0%),
+        transparent 100%
+    );
+    -webkit-mask:
+        linear-gradient(#fff 0 0) padding-box,
+        linear-gradient(#fff 0 0) border-box;
+    -webkit-mask-composite: xor;
+    mask:
+        linear-gradient(#fff 0 0) padding-box,
+        linear-gradient(#fff 0 0) border-box;
+    mask-composite: exclude;
+}
+
+.scroll-progress-rim[data-coverage="bottom-edge"] .scroll-progress-rim__track {
+    background: linear-gradient(
+        to right,
+        var(--scroll-progress-rim-spectrum, var(--section-color-7)),
+        transparent var(--scroll-progress-rim-fill, 0%),
+        transparent 100%
+    );
+    -webkit-mask:
+        linear-gradient(
+            to top,
+            #fff 0,
+            #fff var(--scroll-progress-rim-width, 4px),
+            transparent var(--scroll-progress-rim-width, 4px)
+        ),
+        linear-gradient(#fff 0 0) padding-box,
+        linear-gradient(#fff 0 0) border-box;
+    -webkit-mask-composite: source-in, xor, source-over;
+    mask:
+        linear-gradient(
+            to top,
+            #fff 0,
+            #fff var(--scroll-progress-rim-width, 4px),
+            transparent var(--scroll-progress-rim-width, 4px)
+        ),
+        linear-gradient(#fff 0 0) padding-box,
+        linear-gradient(#fff 0 0) border-box;
+    mask-composite: intersect, exclude, add;
+}
+
+.scroll-progress-rim[data-coverage="inline-end-edge"] .scroll-progress-rim__track {
+    background: linear-gradient(
+        to bottom,
+        var(--scroll-progress-rim-spectrum, var(--section-color-7)),
+        transparent var(--scroll-progress-rim-fill, 0%),
+        transparent 100%
+    );
+    -webkit-mask:
+        linear-gradient(
+            to left,
+            #fff 0,
+            #fff var(--scroll-progress-rim-width, 4px),
+            transparent var(--scroll-progress-rim-width, 4px)
+        ),
+        linear-gradient(#fff 0 0) padding-box,
+        linear-gradient(#fff 0 0) border-box;
+    -webkit-mask-composite: source-in, xor, source-over;
+    mask:
+        linear-gradient(
+            to left,
+            #fff 0,
+            #fff var(--scroll-progress-rim-width, 4px),
+            transparent var(--scroll-progress-rim-width, 4px)
+        ),
+        linear-gradient(#fff 0 0) padding-box,
+        linear-gradient(#fff 0 0) border-box;
+    mask-composite: intersect, exclude, add;
+}