@mkbabb/glass-ui 4.1.0 → 5.0.0

package/src/styles/glass/ladder.css

@@ -38,9 +38,53 @@
        (`tokens/dark-arm.css`), where the tolerant α-mix absorbs the small high-L
        chroma (the gamut-map caveat documented + pinned under the gamut edge there).
        That is the INK derivation, separate from THIS glass-tint mix space. */
+
+    /* BG.W-GLASS-IDIOM-FACTOR — the DRY plate-tint recipe, DECLARED ONCE.
+       The five-rung surface ladder each composed the SAME element-level oklab tint
+       INLINE (5 byte-identical `color-mix(in oklab, var(--glass-bg-<rung>),
+       var(--glass-tint-source) var(--glass-tint-strength))` pastes). The recipe is
+       the W55 adaptive-legibility seam — the rung bg mixed TOWARD the sampled/ink
+       `--glass-tint-source` at the continuous `--glass-tint-strength`; at the `0%`
+       rest default the mix is a no-op (`color-mix(…, X, transparent 0%) ≡ X`),
+       byte-identical to the raw rung bg.
+
+       Factored to ONE declaration: each rung sets only its own `--glass-bg-rung`
+       (the per-rung bg indirection — the EXACT `--glass-border-rung` →
+       `--glass-border-accent` pattern rim.css already runs for the border half) and
+       reads `background: var(--glass-plate-tinted)`. `--glass-plate-tinted` resolves
+       its `var(--glass-bg-rung)` / `--glass-tint-source` / `--glass-tint-strength`
+       at the rung element where it is composed (a custom property substitutes its
+       var() refs against the SAME element's other customs), so the per-rung bg AND
+       the per-element W55 re-points (the `:where()` content-tier + overlay-band tint
+       cascades below) reach it unchanged — net-neutral, dist byte-isomorphic. This
+       single home is the ONE place a later wave (BG.W-GLASS-TINT-UNIFY) adds the
+       bias outer-leg, instead of N pastes.
+
+       BG.W-GLASS-REGISTER-UNIFY — `--glass-plate-tinted` is the LADDER-RUNG spelling
+       of the ONE tint recipe; its applied-at-the-element twin for NON-ladder surfaces
+       is `@utility glass-fill` (glass/surfaces.css, reading `--glass-fill-rung`). Same
+       oklab W55 seam, two delivery seams: the ladder rungs read the token, a Card /
+       button / dock surface APPLIES the utility. A NON-ladder surface never re-spells
+       the `color-mix(in oklab, …)` — it composes `glass-fill`; the `--glass-bg-*-tinted`
+       pre-composed tokens + the `:root --glass-bg-dock` inline tint are the substitution-
+       trap forms the utility supersedes (their DELETE is the sibling-gate-coordinated
+       atomic step). */
+    .glass-wash,
+    .glass-quiet,
+    .glass-resting,
+    .glass-floating,
+    .glass-overlay {
+        --glass-plate-tinted: color-mix(
+            in oklab,
+            var(--glass-bg-rung),
+            var(--glass-tint-source) var(--glass-tint-strength)
+        );
+    }
+
     .glass-wash {
         position: relative;
-        background: color-mix(in oklab, var(--glass-bg-wash), var(--glass-tint-source) var(--glass-tint-strength));
+        --glass-bg-rung: var(--glass-bg-wash);
+        background: var(--glass-plate-tinted);
         backdrop-filter: var(--glass-blur-wash);
         /* BB.W-GLASS-ACCENT — the rung border ink feeds the accent-composed
            `--glass-border-accent` (rim group above); byte-identical at 0%. */
@@ -63,7 +107,8 @@
        Spine tier wires its own rung at instrument-chassis.css. */
     .glass-quiet {
         position: relative;
-        background: color-mix(in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength));
+        --glass-bg-rung: var(--glass-bg-quiet);
+        background: var(--glass-plate-tinted);
         backdrop-filter: var(--glass-blur-quiet);
         --glass-border-rung: var(--glass-border-quiet);
         border: 1px solid var(--glass-border-accent);
@@ -75,7 +120,8 @@
 
     .glass-resting {
         position: relative;
-        background: color-mix(in oklab, var(--glass-bg-resting), var(--glass-tint-source) var(--glass-tint-strength));
+        --glass-bg-rung: var(--glass-bg-resting);
+        background: var(--glass-plate-tinted);
         backdrop-filter: var(--glass-blur-resting);
         --glass-border-rung: var(--glass-border-resting);
         border: 1px solid var(--glass-border-accent);
@@ -102,7 +148,8 @@
            dark-substrate consumer dials in on an ancestor. */
         --glass-backdrop: light;
         position: relative;
-        background: color-mix(in oklab, var(--glass-bg-floating), var(--glass-tint-source) var(--glass-tint-strength));
+        --glass-bg-rung: var(--glass-bg-floating);
+        background: var(--glass-plate-tinted);
         backdrop-filter: var(--glass-blur-floating);
         --glass-border-rung: var(--glass-border-floating);
         border: 1px solid var(--glass-border-accent);
@@ -117,7 +164,8 @@
            (see .glass-floating). */
         --glass-backdrop: light;
         position: relative;
-        background: color-mix(in oklab, var(--glass-bg-overlay), var(--glass-tint-source) var(--glass-tint-strength));
+        --glass-bg-rung: var(--glass-bg-overlay);
+        background: var(--glass-plate-tinted);
         backdrop-filter: var(--glass-blur-overlay);
         --glass-border-rung: var(--glass-border-overlay);
         border: 1px solid var(--glass-border-accent);
@@ -226,7 +274,7 @@
             calc(
                 var(--glass-tint-strength-floor) +
                 (var(--glass-tint-strength-aa) - var(--glass-tint-strength-floor)) *
-                max(0, (var(--glass-backdrop-luma, 0) - var(--glass-backdrop-luma-knee, 0.6)) / (1 - var(--glass-backdrop-luma-knee, 0.6)))
+                max(0, (var(--glass-backdrop-luma, 0) - var(--glass-backdrop-luma-knee)) / (1 - var(--glass-backdrop-luma-knee)))
             ),
             var(--glass-tint-strength-aa)
         );
@@ -282,16 +330,28 @@
            clamp resolves EXACTLY `--glass-tint-strength-floor` (the GLASS-IDENTITY calm
            identity, byte-equal); rising luma ramps the lift CONTINUOUSLY; the clamp floors
            at the 4% identity and ceilings at the bounded AA — never an unconditional 20%
-           slab (the AZ grey-slab is the OPPOSITE of this earned, measured track). This
-           RETIRES the discrete `@container --glass-backdrop: light` bucket as the strength
-           driver — the continuous calc subsumes it (the bucket survives only as a no-
-           `@property` degrade fallback). */
+           slab (the AZ grey-slab is the OPPOSITE of this earned, measured track).
+
+           BG.W-GLASS-SIGNAL-TRUTH (M7) — THE BAND-DRIVER DECISION (reconciled to ONE):
+           the declarative `@container --glass-backdrop: light` bucket below is THE BAND
+           DRIVER (a consumer/shell writes `--glass-backdrop: light` on an ancestor where
+           it KNOWS the backdrop is bright — the AA darken then reaches every descendant
+           content tier), and this CONTINUOUS `--glass-backdrop-luma` clamp is the DYNAMIC
+           REFINEMENT layer that engages WHERE A LUMA WRITER FIRES — the dock (its own
+           `useGlassBackdropLuminance` observer, wired ON) and any band surface a consumer
+           wires the observer to. On a content-tier Card with no wired observer + no
+           ancestor bucket, `--glass-backdrop-luma` reads the registered initial 0 → the
+           clamp resolves the calm floor (the honest calm identity — a plate over an
+           UNKNOWN backdrop stays warm, never a false darken). The prior claim that this
+           clamp "RETIRES the bucket as THE driver" was the contradictory-canon half the
+           M7 audit named (glass-fx.css declared the bucket the default path); the bucket
+           is the band driver, the clamp is the refinement — no double-ownership. */
         --glass-tint-strength: clamp(
             var(--glass-tint-strength-floor),
             calc(
                 var(--glass-tint-strength-floor) +
                 (var(--glass-tint-strength-aa) - var(--glass-tint-strength-floor)) *
-                max(0, (var(--glass-backdrop-luma, 0) - var(--glass-backdrop-luma-knee, 0.6)) / (1 - var(--glass-backdrop-luma-knee, 0.6)))
+                max(0, (var(--glass-backdrop-luma, 0) - var(--glass-backdrop-luma-knee)) / (1 - var(--glass-backdrop-luma-knee)))
             ),
             var(--glass-tint-strength-aa)
         );
@@ -299,6 +359,31 @@
         --muted-foreground-strong: var(--on-glass-muted-strong);
     }
 
+    /* F2.R1 W-DARK-READABILITY-REPAIR (paint re-open — the full-route dark census Class-3
+       mustFix) — the on-glass MUTED lift EXTENDS to the mid-tone / tone-tinted / selected-
+       glass surfaces the calm content-tier :where() above does NOT reach. The muted register
+       (--muted-foreground = --neutral-5, calibrated "AA vs the OPAQUE page") COLLAPSES on a
+       composited TINTED / mid-tone glass plate exactly as it does on the calm content tier —
+       but these surfaces are NOT content tiers, so the re-point above never reached them
+       (the census measured the raw page-muted at WCAG 3.3-4.27 dark, BELOW AA): the feedback
+       TONE-TINTED plates (`.feedback-tone` — Alert / Notification / Toast, the AlertDescription
+       caption + mono labels), the selected-glass capsule CHIPS + overflow PUCKS (`.glass-capsule`
+       — selectable-chip / toggle-chip / stacked-icons / tags-input, idle `text-muted-foreground`
+       ink), and the `.metric-badge` mono label. These plates composite BRIGHTER than the calm
+       quiet plate (the quiet content plate lands L≈0.28; a tone-tinted / selected chip plate
+       lands L≈0.30-0.35), so a subordinate light ink loses contrast on them — they need the
+       STRONGER on-glass rung (`--on-glass-muted-strong`, one step more present) to clear the
+       floor while STAYING subordinate to the L90 --foreground ink. ONE register (no new token,
+       no fork — it READS the existing on-glass -strong rung the wave already ships), the SAME
+       substitution-over-redeclaration discipline the content-tier re-point uses. The rung
+       auto-flips per mode (the on-glass tokens carry their own light/dark arms); in light these
+       surfaces already read the on-glass register on their light glass, byte-consistent. Machine-
+       locked by `proof:glass` dark-legibility DL5. */
+    :where(.feedback-tone, .glass-capsule, .metric-badge) {
+        --muted-foreground: var(--on-glass-muted-strong);
+        --muted-foreground-strong: var(--on-glass-muted-strong);
+    }
+
     /* AX.W55 — the `contrast-color()` foreground-ink flip (Chrome 147+/Safari 26+).
        A PROGRESSIVE-ENHANCEMENT layer, NEVER the load-bearing floor (Open-Q #5
        ratified): the declarative bucket above already carries AA on ALL engines (it
@@ -364,126 +449,4 @@
            in the @container bucket with the rest of the bright-condition darken. */
     }
 
-    /* ── The opaque escape (AX.W54) ───────────────────
-       The level-0 endpoint of the SAME glass machinery — a solid `--card` plate
-       (the opacity seam → 1) with `blur(0)` (the blur seam → 0), routed through
-       the ONE `--glass-level` knob. NOT a parallel solid `background:` recipe:
-       a `.glass-*` surface that ALSO carries `.glass-opaque` keeps its glass edge,
-       rim, and under-shadow (a solid plate with a glass edge, not a bare div), and
-       the @supports fallback + the a11y brackets compose coherently. This is the
-       explicit opt-out from the MAXIMAL glass default (dense data, forced-colors,
-       a consumer that wants a flat surface). */
-    .glass-opaque {
-        --glass-level: 0;
-        /* BA.W-DARK-MATERIAL scope 7 — the opaque escape suppresses the adaptive TINT axis
-           too (not just the opacity/blur level). A solid opaque plate has no translucent
-           backdrop to darken-over, so the self-engage tint is meaningless on it; zeroing the
-           strength keeps the opaque escape bucket-INVARIANT (the unset floor and the bright
-           bucket resolve the SAME solid plate — the byte-identity canary). Without this, the
-           scope-7 unconditional content-tier floor (4%) tinted even the solid plate, breaking
-           the opt-out's "flat surface" contract. */
-        --glass-tint-strength: 0%;
-    }
-
-    /* ── Content-aware under-shadow modifier (AV.W15 M4) ──────────────
-       Apple raises the under-shadow over text (so the glass reads as
-       lifting OFF the text) and drops it over solid light. The modifier
-       is ATTRIBUTE-DRIVEN, no JS: a consumer adds `.glass-over-text`
-       (or `[data-over-content="text"]`) to a text-bearing glass surface to
-       swap it ONE under-shadow rung heavier, or `[data-over-content="solid"]`
-       to lighten it one rung over a solid-light backdrop. It reuses the
-       existing `--glass-under-shadow-{quiet,default,vivid}` rungs (no new
-       shadow value — `vivid` is sufficient over text), redefining only the
-       leading under-shadow layer per tier; the lift stack is untouched.
-
-       The selectors are per-tier so the swap is rung-correct
-       (quiet→default, resting→vivid). `.glass-floating` already sits at the
-       `vivid` ceiling over text, so the heavier variant is a no-op there
-       (the rung saturates) — documented, not an error. */
-    .glass-quiet.glass-over-text,
-    .glass-quiet[data-over-content="text"] {
-        box-shadow: var(--glass-under-shadow-default), var(--glass-shadow-quiet);
-    }
-    .glass-resting.glass-over-text,
-    .glass-resting[data-over-content="text"] {
-        box-shadow: var(--glass-under-shadow-vivid), var(--glass-shadow-resting);
-    }
-
-    /* The inverse — over a solid-light backdrop the under-shadow lightens
-       one rung (the glass need not lift as hard off a flat bright field). */
-    .glass-resting[data-over-content="solid"] {
-        box-shadow: var(--glass-under-shadow-quiet), var(--glass-shadow-resting);
-    }
-    .glass-floating[data-over-content="solid"] {
-        box-shadow:
-            var(--glass-material-rim),
-            var(--glass-under-shadow-default),
-            var(--glass-shadow-floating);
-    }
-
-    /* Grain noise overlay — reuses paper texture SVG, no extra assets.
-       BB.W-LIQUIDHOVER — the disco-grain pop (T8-F6) killed at the COMPOSITION CLASS:
-       the `background-image` is ALWAYS PRESENT (decoded once at rest, NEVER toggled to
-       `none`), and any STATE-driven grain engagement cross-fades the `opacity` ONLY on
-       the thin `--glass-grain-engage-duration` (~120ms linear) clock. A `background-
-       image: none → var(--paper-clean-texture)` engage decodes-and-appears in one frame
-       (the pop); the opacity cross-fade is a compositor-cheap interpolation with the
-       image constant — the only sanctioned grain engage. The `transition` lives HERE so
-       a hover/active grain lift (wherever a glass surface raises grain on interaction)
-       reads as a smooth fade by construction, not a discrete swap. */
-    .glass-wash::after,
-    .glass-quiet::after,
-    .glass-resting::after,
-    .glass-floating::after,
-    .glass-overlay::after {
-        content: '';
-        position: absolute;
-        inset: 0;
-        border-radius: inherit;
-        /* The grain texture is the `background-image` longhand (NOT the `background`
-           shorthand) so the image stays a STABLE always-present layer the engage
-           never re-declares — the structural anti-pop: opacity is the only animated
-           channel, the image is never `none → image`. */
-        background-image: var(--paper-clean-texture);
-        background-repeat: repeat;
-        background-size: var(--paper-texture-size);
-        opacity: var(--glass-grain-opacity);
-        /* The opacity cross-fade engage — plain ~120ms linear direct-write (no spring,
-           no overshoot — instant-but-smooth per the ask). Under the PRM / reduced-
-           transparency brackets the clock collapses to 0ms (the a11y bracket below). */
-        transition: opacity var(--glass-grain-engage-duration, 120ms) linear;
-        pointer-events: none;
-        mix-blend-mode: overlay;
-    }
-
-    /* BB.W-LIQUIDHOVER — the grain engage collapses to INSTANT under reduced motion (a
-       grain that cross-fades on hover under reduce is still motion; accessibility is
-       absolute). The reduced-transparency / forced-colors brackets already zero
-       `--glass-grain-opacity` (a11y-fallback.css), so the grain is inert there; this
-       bracket covers the reduced-MOTION case where the grain still paints but must not
-       animate. */
-    @media (prefers-reduced-motion: reduce) {
-        .glass-wash::after,
-        .glass-quiet::after,
-        .glass-resting::after,
-        .glass-floating::after,
-        .glass-overlay::after {
-            transition: none;
-        }
-    }
-
-    /* The unified rim (AW.W22) + the BB.W-GLASS-ACCENT per-INSTANCE chromatic-RIM
-       tint group (the rim-ink + --glass-material-rim ring + the per-rung
-       --glass-border-accent border, light + dark arms) lives in glass/rim.css
-       (carved at BB.W-CARVE4 — the next adjacent @layer components block, the SOLE
-       writer of --glass-material-rim/--glass-border-accent). */
-
-    .dark .glass-wash::after,
-    .dark .glass-quiet::after,
-    .dark .glass-resting::after,
-    .dark .glass-floating::after,
-    .dark .glass-overlay::after {
-        mix-blend-mode: soft-light;
-    }
-
 }

package/src/styles/glass/liquid-enter.css

@@ -0,0 +1,240 @@
+/* glass/liquid-enter.css
+   BD.W-LIQUID-ENTRANCE-GENERAL — the UNIVERSAL LIQUID-ENTER mount recipe.
+
+   `.glass-reveal`'s four coupled channels (SPATIAL bloom + SQUISH + fade + decongest),
+   promoted from an overlay-only `data-state` TRANSITION to a mount `@keyframes` so a
+   `v-if`-born-at-open surface ANIMATES (a CSS transition needs a state-change a
+   born-at-open element lacks; an `@keyframes` does not). This is the everywhere
+   entrance EVERY mount surface opts into — cards, rows, controls, dock-modules, demo
+   sub-sections — on the `--i` 1/φ time-clock stagger. The flat fade dies.
+
+   THREE registers share ONE grammar (NOT three engines):
+     • MOUNT  — this file (`.liquid-enter`), plain @keyframes-on-mount, the Safari-15
+                floor, the DEFAULT. Zero JS. The route-enter page entrance rides the
+                sibling `.route-enter` on-mount @keyframes (transitions.css, BG.W-ROUTE-
+                TRANSITION — the bare keyed `<component>` swap), not this recipe.
+     • SCROLL — `.scroll-cascade` (scroll-choreography.css), the section cascade; this
+                file does NOT touch it. (The `.scroll-build` page-build recipe is
+                RETIRED — BG.W-ROUTE-TRANSITION — so its `gl-page-build`-clobber fence
+                is moot.)
+     • TRIGGER— `useLiquidReveal`/`useBloomUp` (the JS source-rect bloom).
+
+   THE FOUR CHANNELS (the iOS-27 read, design.md §SPATIAL/EFFECTS split):
+     1. SPATIAL bloom — `translate:` rise (the LONGHAND, composes with a centering
+        transform) on the snappy spring.
+     2. SQUISH volume — the reciprocal `scale:` LONGHAND, born wide+flat (vol-preserving
+        sx·sy ≈ 1), settles square. NEVER a `transform: scale()` shorthand (Bug A: it
+        REPLACES a base centering `transform: translate(-50%,-50%)` → a centered dialog
+        snaps to the corner; AND it composes with a `scale:` longhand → double-scale,
+        born at 78% area). The bloom-from-small GRACE is the coupled rise + blur + fade,
+        NOT an isotropic shrink (a 0.88 multiplier re-introduces the 0.776-area shrink).
+        When a JS clock is present, `--stretch` (useLiquidFlex — the ONE squish engine)
+        is written live and paired reciprocally on THIS longhand.
+     3. EFFECTS fade — `opacity 0→1` (coupled so scale+fade read as ONE coalescing layer).
+     4. EFFECTS decongest — `filter: blur(b)→blur(0)` on the surface's OWN pixels
+        (`filter`, NEVER `backdrop-filter` — the resting glass plate is untouched + the
+        WebKit per-frame-reblur hole is avoided), on the SAME spring clock.
+
+   The four channels are governed by ONE number — `--motion-weight` (rest 1/φ ≈ 0.618,
+   the shipped Band-0 token): weight 0 ⇒ no visible punch (PRM), weight 1 ⇒ the full
+   celebration slam. Co-scaled, never four unrelated tics.
+
+   @import-ed by glass.css in cascade order, in its own @layer components. */
+
+@layer components {
+    /* The channel substrate — the public start knobs, shared with `.glass-reveal`
+       (which keys the same `--lq-enter-*` names so the MOUNT recipe + the reka
+       closed→open TRANSITION speak ONE grammar, no fork). */
+    .liquid-enter {
+        --lq-enter-rise: 0.5rem; /* the SPATIAL rise (the translate: longhand leg) */
+        --lq-enter-blur: 4px; /* the decongest start radius (the filter leg) */
+        --lq-enter-origin: center; /* the bloom anchor (a popper edge overrides) */
+        /* The born squish — wide+flat, vol-preserving (product ≈ 1.002). The settle is
+           1 1. A consumer driving useLiquidFlex writes --lq-stretch-x/-y live. */
+        --lq-stretch-x: 1.06;
+        --lq-stretch-y: 0.945;
+        /* The register's OWN clock — the 1/φ overlap stagger keys off THIS so the
+           "launch beat N+1 as beat N hits 62%" holds on the cel/bouncy clock too
+           (DELTA-ASSAY §3 — not hardcoded to the snappy duration). */
+        --lq-enter-duration: var(--spring-snappy-duration);
+    }
+
+    /* ── BASE register (the graceful floor, GREEN on the bouncy/snappy spring) ──
+       A 2-stop squish-grow: the spring's `linear()` overshoot interior supplies the
+       calibrated iOS bounce. ONE `scale:` longhand (the squish), ONE `translate:`
+       longhand (the rise) — NO `transform:` shorthand (Bug A). */
+    @media (prefers-reduced-motion: no-preference) {
+        .liquid-enter {
+            animation: gl-liquid-enter var(--lq-enter-duration) var(--spring-snappy)
+                both;
+            /* The 1/φ overlap — the per-beat delay is the spring settle × 1/φ ≈ 0.618,
+               so beat N+1 launches as beat N reaches ~62% (Disney follow-through /
+               overlap; the golden proportion). Keyed off THIS register's own clock. */
+            animation-delay: calc(
+                var(
+                    --lq-enter-step,
+                    calc(var(--lq-enter-duration) * 0.618)
+                ) * var(--i, 0)
+            );
+            transform-origin: var(--lq-enter-origin);
+        }
+
+        /* DISPLAY type arrives with GRAVITY, no bounce (a heading must not overshoot —
+           the W-HIERARCHY arrival law). The fade/decongest still ride the recipe. */
+        .liquid-enter.is-display {
+            animation-timing-function: var(--ease-out);
+        }
+
+        @keyframes gl-liquid-enter {
+            0% {
+                opacity: 0;
+                /* SQUISH on the scale: LONGHAND — born wide+flat (vol-preserving), the
+                   short axis pinches, the long swells. NO transform: shorthand here. */
+                scale: var(--lq-stretch-x, 1.06) var(--lq-stretch-y, 0.945);
+                /* SPATIAL rise on the translate: LONGHAND (composes with a base
+                   centering transform — never clobbers it). */
+                translate: 0 var(--lq-enter-rise, 0.5rem);
+                /* DECONGEST — the surface's OWN pixels (filter, not backdrop-filter). */
+                filter: blur(var(--lq-enter-blur, 4px));
+            }
+            100% {
+                opacity: 1;
+                scale: 1 1;
+                translate: 0 0;
+                filter: blur(0);
+            }
+        }
+    }
+
+    /* ── CEL register (`.is-cel`, the audacious cartoon-technicolor upgrade) ──
+       LIVE-PROVEN FINDING (GOLDEN §7e): the cel-slam PUNCH cannot come from
+       ease-overshoot across the narrow `scale: 0.88→1` span (a 0.12 span × a 1.22
+       ease-peak yields only ~2% absolute punch). The punch MUST live in EXPLICIT
+       keyframe STOPS (a 3-stop arc); `--ease-cartoon-punch` (the shipped loud
+       `linear()`) adds the anticipation dip + extra overshoot ON TOP. Same
+       `scale:`/`translate:` LONGHAND discipline — NO `transform:` shorthand.
+
+       The arc: ANTICIPATION (sink + squish DOWN) → PUNCH (lift + stretch UP) →
+       FOLLOW-THROUGH settle. Every magnitude rides `--motion-weight` so PRM
+       (weight 0) flattens the whole arc to the fade in ONE assignment. */
+    @media (prefers-reduced-motion: no-preference) {
+        .liquid-enter.is-cel {
+            animation: gl-cel-slam var(--lq-enter-duration)
+                var(--ease-cartoon-punch, var(--spring-bouncy)) both;
+        }
+
+        @keyframes gl-cel-slam {
+            0% {
+                opacity: 0;
+                /* ── ANTICIPATION — sink + squish DOWN (born flat, tall; vol-preserve) ── */
+                translate: 0
+                    calc(14px * var(--motion-weight, 0.618));
+                scale: calc(1 - 0.12 * var(--motion-weight, 0.618))
+                    calc(1 + 0.06 * var(--motion-weight, 0.618));
+                filter: blur(var(--lq-enter-blur, 4px));
+            }
+            62% {
+                opacity: 1;
+                /* ── PUNCH — lift + stretch UP (sx↑, sy↓; vol-preserve) ── */
+                translate: 0
+                    calc(-3px * var(--motion-weight, 0.618));
+                scale: calc(1 + 0.1 * var(--motion-weight, 0.618))
+                    calc(1 - 0.05 * var(--motion-weight, 0.618));
+                filter: blur(0);
+            }
+            100% {
+                opacity: 1;
+                /* ── FOLLOW-THROUGH settle ── */
+                translate: 0 0;
+                scale: 1 1;
+                filter: blur(0);
+            }
+        }
+    }
+
+    /* ── The lagging cartoon CAST (`.is-cel`, opt-in) — a CHILD layer, never
+       ::after{box-shadow} ──
+       A box-shadow cannot LAG a transform (both repaint on the same element in
+       lockstep), and an animated box-shadow is a WebKit paint hole. So the cast is a
+       child caster layer carrying the STATIC layered `--shadow-cartoon-md` (the proper
+       1940s-technicolor punch, 3-layer ink — NOT the bare single-stamp whisper),
+       animated on its OWN transform clock +`6ms·--motion-weight` later: the object
+       slams in, its bold shadow catches up a beat behind (overlapping action). The
+       cast's TRANSFORM moves (compositor); the box-shadow is static-painted, never
+       animated. Capped to HERO/headline surfaces (perf — never a global .is-cel). */
+    .liquid-enter.is-cel > .cartoon-cast {
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        border-radius: inherit;
+        /* STATIC layered stamp; re-tints per mode via the --cartoon-ink-* cohort
+           (shadow.css / dark-arm.css). NEVER animated. */
+        box-shadow: var(--shadow-cartoon-md);
+        pointer-events: none;
+    }
+    @media (prefers-reduced-motion: no-preference) {
+        .liquid-enter.is-cel > .cartoon-cast {
+            animation: gl-cast-lag var(--lq-enter-duration)
+                var(--ease-cartoon-punch, var(--spring-snappy)) both;
+            /* the LATE arrival — the shadow trails the cel a beat behind */
+            animation-delay: calc(0.006s + 0.06s * var(--motion-weight, 0.618));
+        }
+        @keyframes gl-cast-lag {
+            0% {
+                opacity: 0;
+                translate: 0 calc(10px * var(--motion-weight, 0.618)) 0;
+                scale: 0.92;
+            }
+            100% {
+                opacity: 1;
+                translate: 0 0 0;
+                scale: 1;
+            }
+        }
+    }
+    /* Under prefers-contrast: more the inked edge is a LEGIBILITY asset — floor it on. */
+    @media (prefers-contrast: more) {
+        .liquid-enter.is-cel > .cartoon-cast {
+            opacity: 1;
+        }
+    }
+}
+
+/* The Safari < 17.2 `linear()` cubic-bezier floor was COLLAPSED at BG.NF.2
+   W-LEGACY-LADDER-COLLAPSE — both targets (current Chrome + current Safari)
+   parse `linear()` spring curves, so the `--spring-*` tokens are the sole
+   timing source; the bezier degrade arm served no target engine. */
+
+/* ── REDUCED-MOTION CARVE (the vestibular floor — WCAG 2.3.3 · design.md P6) ──
+   Under `prefers-reduced-motion: reduce` the entrance keeps the FADE and drops the
+   transform + squish + bounce + blur + stagger + cast in ONE arm (opacity is not a
+   vestibular trigger). One calm paint on the short clock, delay → 0. This mirrors the
+   `.glass-reveal` + `.route-enter` PRM precedent. The shipped `--ease-cartoon-punch`
+   already re-aliases to `--ease-standard` under reduce (scheme-motion.css) and
+   `--motion-weight → 0` zeroes the arc — this carve is the belt-and-suspenders floor
+   that also drops the keyframe channels outright. */
+@layer components {
+    @media (prefers-reduced-motion: reduce) {
+        .liquid-enter,
+        .liquid-enter.is-cel {
+            animation: gl-liquid-enter-reduced var(--duration-fast) var(--ease-out)
+                both;
+            animation-delay: 0s;
+        }
+        .liquid-enter.is-cel > .cartoon-cast {
+            /* the cast still appears (its ink is a legibility asset) but does not fly */
+            animation: none;
+            opacity: 1;
+            translate: 0;
+            scale: 1;
+        }
+        @keyframes gl-liquid-enter-reduced {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+    }
+}

package/src/styles/glass/liquid-fill.css

@@ -0,0 +1,65 @@
+/* ════════════════════════════════════════════════════════════════════════
+   .glass-liquid-fill — the ONE shared liquid-fill register (BG.W-LIQUID-FILL).
+
+   The warm glass-cylinder fill — a continuous rounded pill of warm tinted glass
+   over a track — factored ONCE out of the Slider's `.slider-range` composite so
+   EVERY meter/fill consumer COMPOSES it instead of re-forking the
+   backdrop-blur + rim + under-shadow recipe. Fewer-sharper-primitives: ONE
+   liquid-fill recipe, N surfaces.
+
+   ≥2 consumers by construction (the overfitting bar cleared by extraction):
+     · #1  Slider's `.slider-range` RE-READS it (the reference implementation —
+           the glass cylinder you pull; it bridges its own `--slider-range-*`
+           consumer-override tokens onto the register's knobs).
+     · #2  `<Progress variant="liquid">` — the glass meter (the speedtest fill
+           meter consumes it on the 5.0.0 bump).
+
+   PHASE-COLOUR COMPOSABLE, ZERO PER-SITE GLASS KNOWLEDGE. A surface tints the
+   fill by setting the ONE `--liquid-fill-tint` knob (a phase hue, a brand colour,
+   the warm-cream default) — it never touches `backdrop-filter`, the rim, or the
+   under-shadow. The register owns every glass mechanic; the surface owns only the
+   colour. The four knobs (all optional, warm-glass defaults):
+     · --liquid-fill-tint      — the fill hue (default the warm-cream capsule amber).
+     · --liquid-fill-strength  — the tint mix % against the warm 0-alpha leg (88%).
+     · --liquid-fill-blur      — the backdrop blur rung (the quiet ~2px-equiv radius).
+     · --liquid-fill-shadow    — the under-shadow leg (the glass-thickness floor).
+
+   @layer components, @import-ed in glass.css AFTER the glass-capsule register (so
+   the `--glass-bg-*`/`--glass-*-rim`/`--glass-under-shadow-*`/`--glass-capsule-warm`
+   tokens resolve) and BEFORE the consuming slider/progress recipes.
+
+   Compositor-only + Safari-native by construction (the §7 floor): the blur routes
+   `--glass-blur-quiet` (which SCALES by `--glass-level`, so the opaque escape /
+   prefers-reduced-transparency / forced-colors flatten it with the rest of the
+   band); no `backdrop-filter: url()`, no SVG goo, no WebGL. The 0-alpha mix leg is
+   a WARM `oklch(… / 0)`, NEVER bare `transparent` (the WebKit black-premultiply
+   hole, build-trap-(d)).
+   ════════════════════════════════════════════════════════════════════════ */
+
+@layer components {
+    .glass-liquid-fill {
+        border-radius: var(--radius-pill);
+        /* The warm tinted glass fill — the tint mixes against a warm 0-alpha leg so
+           the cylinder is a warm tinted `.glass-atom` over the field, not a flat bar.
+           `--liquid-fill-tint` is the ONE phase-colour knob (default the warm-cream
+           capsule amber — the lib identity; the brand/phase hue is the consumer's). */
+        background: color-mix(
+            in oklab,
+            var(--liquid-fill-tint, var(--glass-capsule-warm))
+                var(--liquid-fill-strength, 88%),
+            oklch(0.9 0.05 75 / 0)
+        );
+        /* The blur routes the `--glass-blur-quiet` rung (the ~2px-equivalent radius
+           that SCALES by `--glass-level`), not a literal blur off the level knob. */
+        backdrop-filter: var(--liquid-fill-blur, var(--glass-blur-quiet));
+        -webkit-backdrop-filter: var(--liquid-fill-blur, var(--glass-blur-quiet));
+        /* The unified edge rim (W52) reads the cylinder's curvature; the under-shadow
+           lays the glass-thickness floor at the leading edge. */
+        box-shadow:
+            var(--glass-material-rim),
+            var(--liquid-fill-shadow, var(--glass-under-shadow-quiet));
+        transition:
+            background var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard);
+    }
+}