@mkbabb/glass-ui 4.1.0 → 5.0.0

package/src/styles/scroll-choreography.css

@@ -12,16 +12,19 @@
  * 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).
  *   .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 +34,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/
@@ -46,84 +50,45 @@
  */
 
 /* ─────────────────────────────────────────────────────────────────────────────
- * .scroll-build — the route-enter page-build.
+ * BD.W-SCROLL-LIQUID-ENGINE — the liquid-weight scroll tokens.
  *
- * 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 `--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), 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;
+    --scroll-pin-phase-expand-end-frac: 0.9;
+    /* The volume-preserving squash depth — 1 − 1/φ⁴. */
+    --scroll-pin-squash-floor: 0.944;
 }
 
-/* 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-build — RETIRED (BG.W-ROUTE-TRANSITION).
+ *
+ * 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.
+ * ─────────────────────────────────────────────────────────────────────────── */
 
 /* ─────────────────────────────────────────────────────────────────────────────
  * .scroll-cascade — the orchestrated section cascade.
@@ -160,8 +125,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%);
         }
@@ -187,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) {
@@ -202,83 +182,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));
     }
 }
 

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;
+}