@mkbabb/glass-ui 4.2.0 → 6.0.0

package/src/styles/typography/utilities.css

@@ -103,10 +103,10 @@
     /* Responsive pane title */
     .text-pane-title {
         font-family: var(--font-display);
-        font-size: clamp(2.4rem, 1.8rem + 2vw, 3.33rem);
+        font-size: var(--type-display-2);
         line-height: var(--type-leading-display);
-        letter-spacing: var(--type-tracking-tight);
-        font-weight: 600;
+        letter-spacing: var(--type-tracking-display);
+        font-weight: var(--type-weight-display);
         font-optical-sizing: auto;
     }
 
@@ -146,16 +146,39 @@
         color: var(--section-label-accent, var(--section-color-7));
     }
 
-    /* Font-feature helpers */
+    /* BG.W-GATE-FIELD-AURORA (EYEBROW-LIGHT-POLISH, +3.12) — the light-arm twin
+       of the dark eyebrow fix (b3d65eec). The mono-caption eyebrow reads
+       `--muted-foreground` (= `--neutral-5`, L40, calibrated AA-vs-PAGE), which
+       composites to only ~4.15:1 over the recessive warm shell field
+       (`[data-paper-field]`, BG.W-FIELD-AURORA) in LIGHT mode — below the
+       10-14px 4.5 bar (dark already clears 6.73, Safari 4.80). Over the warm
+       field ONLY + LIGHT ONLY, warm-mix the eyebrow ink toward `--foreground`
+       (the SAME 22%-toward-`--foreground` recipe the demo header-cluster twin
+       runs, mixed off the RAW `--neutral-5` so a cluster re-point of
+       `--muted-foreground` never double-darkens) so the neutral eyebrow clears
+       AA 4.5 within the warm-no-gray identity. Dark (`.dark`), non-field
+       contexts, the page-muted calibration, AND the `--tinted` accent eyebrow
+       (its own `--section-color-7` identity) are BYTE-UNTOUCHED. */
+    :root:not(.dark)
+        [data-paper-field]
+        .section-label:not(.section-label--tinted) {
+        color: color-mix(in oklab, var(--neutral-5), var(--foreground) 22%);
+    }
+
+    /* Numeric role — a size-agnostic modifier for values, counters, and tables. */
     .tabular-nums {
-        font-variant-numeric: tabular-nums;
+        font-variant-numeric: tabular-nums lining-nums;
     }
 
-    /* Kinetic: per-character stagger */
+    /* Kinetic: per-character stagger. The per-glyph increment is the single-
+       source `--char-stagger-step` token (scheme-motion.css, 30ms) — DRY with
+       the demo's `.story-section__heading` reveal (story-hero.css); a `:root`
+       override retimes both. (BG.W-SECTION-TYPEWRITER-FADEUP — off the hardcoded
+       `* 30ms` literal.) */
     .char-stagger > .char {
         display: inline-block;
         animation: fade-in var(--spring-smooth-duration) var(--spring-smooth, ease) backwards;
-        animation-delay: calc(var(--char-index, 0) * 30ms);
+        animation-delay: calc(var(--char-index, 0) * var(--char-stagger-step));
     }
 
     /* Letter-pressed treatment — reads as text engraved into the panel

package/src/styles/utilities/a11y-overrides.css

@@ -108,12 +108,12 @@ html.no-transition *:not([data-allow-motion])::after {
    coarse pointers the small icon-button/trigger surfaces OUTSIDE the dock lift
    to the WCAG 2.5.5 (44px) minimum — ONE amendment retiring the per-consumer
    `min-h-[44px]` one-liners. Token-driven (`--touch-target`); fine-pointer
-   byte-identical. Targets `Button size="icon"` (via the `data-size="icon"`
+   byte-identical. Targets `Button iconOnly` (via the `data-icon-only`
    attr Button.vue reflects), ExpandableContainer + SegmentedTabs (responsive
    mobile Select) triggers.
    `min-block/inline-size` only RAISES — a larger explicit size is never lost. */
 @media (pointer: coarse) {
-    [data-size="icon"],
+    [data-icon-only],
     [data-part="trigger"],
     .segmented-tabs__trigger {
         min-block-size: var(--touch-target, 2.75rem);

package/src/styles/utilities/base.css

@@ -103,7 +103,7 @@
         inline-size: 100%;
         min-inline-size: 0;
     }
-    .labeled-field:has(:user-invalid),
+    .labeled-field:has(:where(:user-invalid, [aria-invalid="true"])),
     .labeled-field.has-error {
         --field-label-color: var(--destructive);
     }
@@ -119,12 +119,12 @@
         color: var(--destructive);
         margin-block-start: 0.25rem;
     }
-    .labeled-field:has(:user-invalid) .labeled-field-error,
+    .labeled-field:has(:where(:user-invalid, [aria-invalid="true"])) .labeled-field-error,
     .labeled-field.has-error .labeled-field-error {
         display: block;
     }
     /* Hide the error text once the field reads valid (the user corrected it). */
-    .labeled-field:has(:user-valid) .labeled-field-error,
+    .labeled-field:has(:where(:user-valid, [aria-invalid="false"])) .labeled-field-error,
     .labeled-field.has-valid .labeled-field-error {
         display: none;
     }
@@ -205,7 +205,11 @@
             color var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard),
-            scale var(--duration-fast) var(--ease-standard);
+            /* BG.W-LIQUID-WEIGHT-DEFAULT (F5.2) — the SPATIAL scale leg rides the
+               spring-derived `--transition-liquid-spatial` DEFAULT (the inversion:
+               weight is now the vocabulary, not a per-site --motion-weight opt-in;
+               was the bare `--ease-standard` bezier). `.motion-calm` opts back out. */
+            scale var(--duration-fast) var(--transition-liquid-spatial);
     }
     .interactive-item:hover {
         background-color: color-mix(in srgb, var(--accent) 50%, transparent);
@@ -272,14 +276,18 @@
             box-shadow var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard),
             opacity var(--duration-fast) var(--ease-standard),
-            scale var(--duration-fast) var(--spring-smooth);
+            /* BG.W-LIQUID-WEIGHT-DEFAULT (F5.2) — the scale leg reads the shared
+               `--transition-liquid-spatial` vocabulary token (byte-identical at the
+               default — it resolves to `--spring-smooth` — but now `.motion-calm`
+               opts the press out of overshoot in lockstep with the atoms above). */
+            scale var(--duration-fast) var(--transition-liquid-spatial);
         transform-origin: center center;
     }
-    .tap-squish:active {
+    .tap-squish:not([data-press-armed]):active {
         scale: var(--scale-press);
     }
     @media (prefers-reduced-motion: reduce) {
-        .tap-squish:active {
+        .tap-squish:not([data-press-armed]):active {
             /* Reset to the longhand identity (not `transform: none`) so the
                press scale is neutralized under PRM. */
             scale: 1;
@@ -287,7 +295,9 @@
     }
 
     /* ── Glass-press — the interactive press register (BB.W-PRESS-UNIFY) ──
-       The CSS half of the `<Card :pressable>` / interactive-glass press. Two
+       The CSS half of the interactive-glass press (an interactive Card at
+       `motion !== "off"` per BH.W-MOTION-AXIS — the `pressable` boolean's successor
+       is interactivity + the motion axis). Two
        coupled legs on ONE `--card-press-t` drive (the `useLiquidPress` writes the
        JS-driven value; the CSS `:active` is the no-JS / SSR floor):
 

package/src/styles/utilities/btn.css

@@ -79,19 +79,41 @@
     transition-property: height, opacity;
 }
 
+/* ── Disclosure chevron register (BG.W-DISCLOSURE-ROTATE) ────────────────
+   ONE canonical chevron-rotate gesture — the SAME settle clock + arrival curve
+   across EVERY disclosure caret (Accordion / Select / Configurator). The three
+   diverged: Accordion rode a flat `transition-transform duration-200` bezier
+   (zero weight), Select the snappy-clock cartoon-punch, Configurator a scoped
+   `--duration-fast` snappy on the WRONG property (a `transition: transform`
+   never covers the `rotate` Tailwind v4's `rotate-*` writes, so its chevron
+   SNAPPED). This register collapses them onto ONE (substitution over
+   re-declaration): the `rotate` property (the longhand the toggle actually
+   writes), the spring's OWN settle clock `--spring-snappy-duration` (the
+   W-GLASS-CAL per-spring-duration doctrine, not a generic `--duration-*`), and
+   the weighty `--ease-cartoon-punch` arrival (the liquid-weight "morph more on
+   move" register — a small quick control that still carries inertia). PRM:
+   `--ease-cartoon-punch` self-re-aliases to the no-overshoot `--ease-standard`
+   under `prefers-reduced-motion: reduce` (scheme-motion.css), so the caret still
+   flips its state with zero overshoot frames — the vestibular floor. */
+@utility transition-disclosure {
+    transition: rotate var(--spring-snappy-duration) var(--ease-cartoon-punch);
+}
+
 /* ── Sheet/drawer slide-out animation grammar ──
    The sheet/drawer-panel analogue of the overlay enter (the popover-class
    surfaces now ride the spring-clocked `.glass-reveal`, BB.W-LIQUID-REVEAL).
    Pairs with
    `slide-in-from-{top,right,bottom,left}-N` to compose side-keyed entries.
-   The open path uses --duration-panel (slow, deliberate); the close path
-   uses --duration-fast so dismiss feels snappy. R5 vocab.γ gap row 6;
+   The open path uses --duration-panel (slow, deliberate); the close path uses
+   --duration-fast so dismiss feels snappy. Both base clocks multiply the ONE
+   inherited --motion-tempo reader here, so portaled panels and scrims co-scale
+   without a story/consumer bridge or a second duration alias. R5 vocab.γ gap row 6;
    consumed by W2.A sheet/drawer migration. */
 @utility sheet-animate {
     @apply data-[state=open]:animate-in data-[state=closed]:animate-out
            data-[state=open]:fade-in data-[state=closed]:fade-out
-           data-[state=open]:duration-[var(--duration-panel)]
-           data-[state=closed]:duration-[var(--duration-fast)];
+           data-[state=open]:duration-[calc(var(--duration-panel)*var(--motion-tempo))]
+           data-[state=closed]:duration-[calc(var(--duration-fast)*var(--motion-tempo))];
 }
 
 /* ── Calm CTA register (BA.W-GLASS-CAL, H2a — the disco retired) ──────────
@@ -228,29 +250,6 @@
     );
 }
 
-/* ── Text-highlight paint (CSS Custom Highlight API) ─────────────────────
-   The default `::highlight()` paint for the `useTextHighlight` composable
-   (composables/motion; the `/motion-core` subpath, AX.W37). A named `Highlight`
-   registered in `CSS.highlights`
-   under one of these keys paints its `Range` set without a `<mark>` wrapper.
-   Token-bridged: the search mark reads the canonical pastel-yellow rainbow
-   token at a soft alpha; the equation/variable mark reads `--primary`. Both
-   axes are overridable via the `--text-highlight-*` custom properties. */
-::highlight(glass-search-mark) {
-    background-color: var(
-        --text-highlight-search-bg,
-        color-mix(in srgb, var(--rainbow-pastel-yellow) 55%, transparent)
-    );
-    color: var(--text-highlight-search-fg, inherit);
-}
-::highlight(glass-mark) {
-    background-color: var(
-        --text-highlight-bg,
-        color-mix(in srgb, var(--primary) 18%, transparent)
-    );
-    color: var(--text-highlight-fg, inherit);
-}
-
 /* ── Interactive-button four-state recipe ────────────────────────────────
    `.btn-interactive` carries the canonical "Button-with-spring-hover"
    four-state contract — transition + hover-scale + active-press + disabled-
@@ -263,14 +262,20 @@
    button scale register the §6 doctrine records and the gate asserts across
    `.btn-pill`/`.tap-squish`/`.glass-btn`/`btn-interactive`. The surface legs
    stay on the bezier `--ease-standard` (a colour cross-fade reads as a wobble
-   on a spring); only the `scale` transform leg springs. */
+   on a spring); only the `scale` transform leg springs.
+
+   BG.W-LIQUID-WEIGHT-DEFAULT (F5.2) — the `scale` leg now reads the shared
+   `--transition-liquid-spatial` vocabulary token (byte-identical at the default —
+   it resolves to `--spring-smooth` — while the settle clock stays `--spring-smooth-
+   duration`), so a `.motion-calm` scope opts the button lift out of overshoot in
+   lockstep with the base interactive atoms. */
 @utility btn-interactive {
     /* AQ.W3 §W3.2 identity base */
     scale: 1;
     transition:
         background-color var(--duration-fast) var(--ease-standard),
         color var(--duration-fast) var(--ease-standard),
-        scale var(--spring-smooth-duration) var(--spring-smooth),
+        scale var(--spring-smooth-duration) var(--transition-liquid-spatial),
         opacity var(--duration-fast) var(--ease-standard);
 
     &:hover {
@@ -294,7 +299,7 @@
         transition:
             background-color var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard),
-            scale var(--spring-smooth-duration) var(--spring-smooth),
+            scale var(--spring-smooth-duration) var(--transition-liquid-spatial),
             opacity var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard);
     }

package/src/styles/utilities/components.css

@@ -135,22 +135,22 @@
        register for densely-packed dock clusters. The selectors compose with
        `.metric-badge--label-stacked` so the inline ladder remains untouched
        — these are stacked-only refinements. */
-    .metric-pill[data-density="spacious"].metric-badge--label-stacked {
+    .metric-pill:not([data-dense]).metric-badge--label-stacked {
         --metric-badge-padding-block-stacked: 0.5rem;
         --metric-badge-padding-inline: 0.75rem;
     }
 
-    .metric-pill[data-density="comfortable"].metric-badge--label-stacked {
+    .metric-pill[data-dense].metric-badge--label-stacked {
         --metric-badge-padding-block-stacked: 0.25rem;
         --metric-badge-padding-inline: 0.5rem;
     }
 
-    /* AS.W4 — @container style(--density) companion. A pill nested under a host
-       that sets `--density: comfortable | spacious` on a wrapping element picks
-       up the matching padding register with no `data-density` markup contract;
+    /* BH.W-SIZE-UNIFY — the metric-pill padding density is the `dense` boolean
+       (was the `density` axis); the two `[data-dense]`/`:not([data-dense])`
+       attribute rules above are the SOLE register (the `@container style(--density)`
        the attribute rules above stay the SOLE fallback (inv 47).
        The inner `.metric-pill.metric-badge--label-stacked` selector (0,2,0) sits
-       just BELOW the `.metric-pill[data-density]…` attribute rules (0,3,0) — so a
+       just BELOW the `.metric-pill[data-dense]` attribute rules — so a
        pill carrying BOTH the attribute and a `--density` ancestor lands on the
        attribute rule (same tokens, identical paint), while a pill with only the
        ancestor token still resolves the right register (no competing rule sets
@@ -163,21 +163,9 @@
        clean declaration test for style-query support. This relies on
        `@container style()`'s own graceful degradation: an engine without
        style-query support parses the unknown at-rule as invalid, drops the
-       block, and keeps the `[data-density]` attribute base. (The earlier
+       block, and keeps the `[data-dense]` attribute base. (The earlier
        `@supports (container-type: inline-size)` wrapper was wrong — it probed
        SIZE-query support, a distinct feature with a distinct support timeline.) */
-    @container style(--density: spacious) {
-        .metric-pill.metric-badge--label-stacked {
-            --metric-badge-padding-block-stacked: 0.5rem;
-            --metric-badge-padding-inline: 0.75rem;
-        }
-    }
-    @container style(--density: comfortable) {
-        .metric-pill.metric-badge--label-stacked {
-            --metric-badge-padding-block-stacked: 0.25rem;
-            --metric-badge-padding-inline: 0.5rem;
-        }
-    }
 
     .metric-badge__label {
         letter-spacing: 0.18em;
@@ -202,7 +190,7 @@
         letter-spacing: 0.1em;
     }
 
-    /* Q.W3 Lane A — the `.glass-dock[data-density="…"]` density rungs that
+    /* Q.W3 Lane A — the `.glass-dock[data-size="…"]` size rungs that
        set `--dock-tab-h` + `--dock-label-size` were consolidated into
        `dock.css` (their canonical dock-styles home). They formerly lived
        here and resolved only by the index.css import order (utilities.css
@@ -244,7 +232,14 @@
     }
 
     .input-bar-field {
-        font-family: var(--font-mono, monospace);
+        /* BI.W-SURFACE-EXTRACT (value.js P3 — the seated field-chrome `.input-bar`
+           rung ADMIT): the field font family reads a token-first `--input-bar-font`
+           seam so a consumer retunes the seated-field face in ONE write, defaulting
+           byte-identical to the prior `var(--font-mono, monospace)`. The seat rung
+           itself (`.input-bar`, above) is already the P3 "seated field-chrome rung"
+           — reading the shared `--control-pill-*` cohort + the floating glass rung;
+           this token completes the ask's `--input-bar-font` half. */
+        font-family: var(--input-bar-font, var(--font-mono, monospace));
         /* BC.W-SEARCH-CUSTOM — the field font reads the shared `--control-pill-text`
            seam (the SAME rung `.input-pill` reads), DEFAULTING to `--control-text`
            (≈ the prior `--type-small` register at scale 1 — byte-near-identical). The

package/src/styles/utilities/metal.css

@@ -11,7 +11,9 @@
        base, light, dark)` band off the bound metal quad, `background-clip: text`.
      • `.metal-{gold,silver,bronze}-border` — the swept metallic RIM (the §N6
        selected-item-border consumer): the SAME `--metal-shimmer-color`-bound
-       gradient on a `border-image`-sliced rim, swept by the SAME keyframe.
+       gradient painted as a MASKED BAND on a `::before` overlay (the house
+       border-ring idiom, BI.W-METAL-RIM-BAND), swept by the SAME keyframe — so the
+       rim FOLLOWS `border-radius` (a `border-image` squared the corners).
      • `.metal-rainbow-rim` — the prismatic gilt-figure / record-badge rim: it
        COMPOSES W-GLASS-ACCENT's `--glass-accent` rim seam (it does NOT re-author
        the rim) by binding the accent channel to a swept rainbow hue.
@@ -105,43 +107,94 @@
         --metal-stop-base: var(--color-bronze);
     }
 
-    /* ── The swept metallic RIM (the §N6 selected-item-border consumer) ───────
-       The SAME `--metal-shimmer-color`-bound gradient applied to a `border-image`
-       slice — a swept metallic RIM, not a text fill. `border-image` reads the same
-       `background`-position-swept gradient (the metal-shimmer-sweep keyframe drives
-       the `background-position`; the `border-image-source` references the SAME
-       gradient via the stop slots), so ONE keyframe drives both registers. The rim
-       sits over the surface's own background (no `background-clip: text`). */
+    /* ── The swept metallic RIM — a MASKED BAND on a dedicated ::before overlay ──
+       (BI.W-METAL-RIM-BAND — the ruling-10 band-on-overlay reform.)
+
+       `border-image` SQUARES the corners on a rounded host (UF-A7 / FAM-4 — the
+       exact defect BorderProgress's masked-conic avoided), so the swept rim is
+       re-expressed as the house border-ring idiom (the in-repo precedent at
+       border-progress.css:55-66): a `--metal-shimmer-color`-bound gradient painted
+       on a `::before` OVERLAY whose `mask-composite: exclude` cuts a border-box
+       fill AGAINST a padding-box fill, leaving ONLY the border band — which FOLLOWS
+       `border-radius` exactly. The band lives on the OVERLAY, never the host
+       (ruling 10): the host's own content/backdrop is untouched (a glass card
+       keeps its interior; the rim hugs its radii — the pass-4b direct-host
+       application was the regression pass-5 re-forms).
+
+       The `metal-shimmer-sweep` keyframe (pure `background-position`, animations.css)
+       rides the ::before band UNCHANGED — ONE keyframe, both registers (text-clip +
+       rim). `border-image` is DELETED (clean break, no alias). */
     .metal-gold-border,
     .metal-silver-border,
     .metal-bronze-border {
         --metal-stop-dark: var(--color-gold-dark);
         --metal-stop-light: var(--color-gold-light);
         --metal-stop-base: var(--color-gold);
-        border: var(--metal-border-width, 2px) solid transparent;
-        border-image: linear-gradient(
+    }
+
+    /* ── The masked-band overlay — MANDATORY @supports gate ──────────────────
+       Without the gate a mask-composite gap engine would paint the gradient as a
+       FULL BOX fill (a real break). With it the rim reads on the genuine band; the
+       `@supports not (…)` fall (below) keeps a solid metal inset ring so the rim
+       still READS (only the travelling sheen is lost — an honest degrade, the
+       primary rim present; NOT a masking fallback). Safari 26 takes this path. */
+    @supports (mask-composite: exclude) {
+        .metal-gold-border,
+        .metal-silver-border,
+        .metal-bronze-border {
+            /* the positioning context the inset:0 overlay resolves against. */
+            position: relative;
+        }
+        .metal-gold-border::before,
+        .metal-silver-border::before,
+        .metal-bronze-border::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+            /* the `border` width IS the band thickness the mask cuts out. */
+            border: var(--metal-border-width, 2px) solid transparent;
+            pointer-events: none;
+            /* the swept metal gradient — the SAME --metal-stop-* slots the
+               text-clip metals resolve, off the host's --metal-shimmer-color quad
+               (custom properties inherit onto the ::before). */
+            background: linear-gradient(
                 90deg,
                 var(--metal-stop-dark),
                 var(--metal-stop-light),
                 var(--metal-stop-base),
                 var(--metal-stop-light),
                 var(--metal-stop-dark)
-            )
-            1;
-        /* The sweep rides a backing gradient `background-position` on the same band
-           (the `border-image` slice tracks the host's background extent); the
-           250% size + the position sweep give the rim its travelling sheen. */
-        background-image: linear-gradient(
-            90deg,
-            var(--metal-stop-dark),
-            var(--metal-stop-light),
-            var(--metal-stop-base),
-            var(--metal-stop-light),
-            var(--metal-stop-dark)
-        );
-        background-size: 250% 100%;
-        background-clip: border-box;
+            );
+            background-size: 250% 100%;
+            /* THE RADIUS-FOLLOWING CUT-OUT — paint a border-box fill, EXCLUDE a
+               padding-box fill, leaving only the border band (follows radius; a
+               border-image cannot). The house border-ring idiom. */
+            -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;
+        }
     }
+
+    /* ── The honest degrade (metal-base inset ring) ──────────────────────────
+       On a gap engine (no `mask-composite`) the rim paints a SOLID inset ring in
+       the metal's OWN base hue — it follows the host `border-radius` (box-shadow
+       inset does) and still READS as a metal rim; only the travelling sheen is
+       lost. The primary rim is present — this is NOT a masking fallback. */
+    @supports not (mask-composite: exclude) {
+        .metal-gold-border,
+        .metal-silver-border,
+        .metal-bronze-border {
+            box-shadow: inset 0 0 0 var(--metal-border-width, 2px)
+                var(--metal-stop-base);
+        }
+    }
+
     .metal-gold-border {
         --metal-shimmer-color: gold;
         --metal-stop-dark: var(--color-gold-dark);
@@ -202,13 +255,17 @@
        metal READS for PRM users); the `animation:` is the sole thing gated. The
        slow `--duration-metal` (6s) clock — the calm dignified pass. */
     @media (prefers-reduced-motion: no-preference) {
+        /* the text-clip metals + the rainbow rim sweep on the HOST background; the
+           `-border` metals sweep on their `::before` band overlay (BI.W-METAL-RIM-
+           BAND — the band now lives on the overlay, so the sweep does too). ONE
+           keyframe, both registers. */
         .metal-gold,
         .metal-silver,
         .metal-bronze,
-        .metal-gold-border,
-        .metal-silver-border,
-        .metal-bronze-border,
-        .metal-rainbow-rim {
+        .metal-rainbow-rim,
+        .metal-gold-border::before,
+        .metal-silver-border::before,
+        .metal-bronze-border::before {
             animation: metal-shimmer-sweep var(--duration-metal) linear infinite;
         }
     }

package/src/styles/utilities.css

@@ -3,11 +3,11 @@
  * ── Thin @import ROOT (cohesion-aware carve) ───────────────────────────────
  * The utility body is carved into cohesive `utilities/*.css` partials (each
  * under the 500-line no-god-module bound), @import-ed below in CASCADE ORDER.
- * The leading @utility animation pair, the @layer components base block (split
- * at the metric-badge seam into base/components AND, at BB.W-CARVE3, at the
+ * The @layer components base block (split at the metric-badge seam into
+ * base/components AND, at BB.W-CARVE3, at the
  * post-tap-squish seam into base/base-misc — all adjacent same-layer blocks,
- * isomorphic), the @utility button cluster, and the a11y @media overrides keep
- * their source order so the cascade is unchanged. See
+ * isomorphic), and the @utility button cluster keep their source order.
+ * Accessibility modes load once at the end of styles/index.css. See
  * docs/precepts/design-idioms.md §cohesion-aware partials.
  */
 
@@ -17,10 +17,8 @@
    the cascade is unchanged). BB.W-METAL-SHIMMER homes `metal.css` right after
    `base-misc.css` (its `.gold-shimmer` sibling — both `@layer components` metal
    registers; the metal family is cohesive with the re-pointed gold-shimmer): */
-@import "./utilities/animate.css";
 @import "./utilities/base.css";
 @import "./utilities/base-misc.css";
 @import "./utilities/metal.css";
 @import "./utilities/components.css";
 @import "./utilities/btn.css";
-@import "./utilities/a11y-overrides.css";

package/src/styles/viz-reveal.css

@@ -0,0 +1,63 @@
+/* BI.W-E10-AURORA-ENTRANCE (value.js T-60) — the PALETTE-HONEST one-shot
+ * cold-first-VISIBLE procedural-viz entrance.
+ *
+ * A procedural-viz CANVAS materializes: it fades in from transparent (`opacity`) with
+ * a gentle warm LIFT (`filter: brightness()/saturate()` PULSES up and settles). The
+ * whole ramp is PALETTE-HONEST — brightness and saturate NEVER dip below 1, so the
+ * entrance never transits a `brightness<1`/`saturate<1` GRAY VEIL over the chromatic
+ * field (the T-60 condemned form: the prior `from { brightness(0.4) saturate(0.7) }`
+ * dim floor, which — stamped while the canvas still sat at the consumer's `opacity:0`
+ * — opened the visible arrival INSIDE a `brightness 0.54–0.83` desaturated stage: the
+ * "pulses to gray" the owner named). The field's OWN colors carry the entrance; the
+ * bloom only lifts their light, it never dims or desaturates them.
+ *
+ * A FIELD bloom — the canvas rect stays scale(1) (no box-zoom gutter). Compositor-only
+ * (opacity + filter, the W-MOTION-CANON P5 EFFECTS channel). The peak is EXPLICIT in
+ * the keyframe (the 55% stop), so the animation rides a monotone `--ease-out` (NOT the
+ * extrapolating `--ease-cartoon-punch`, whose overshoot would dip the settle segment
+ * BELOW 1 and re-introduce the condemned dim tail).
+ *
+ * THE DOOR (BI.W-E10 / T-60): the aurora runtime opts OUT of this bloom by default
+ * (`revealBloom: false`) — the aurora materializes as its palette-derived GROUND with
+ * the canvas OPACITY cross-fade over it, so a second `filter`-bloom would double the
+ * entrance; it never sets `data-substrate-reveal`. The blob + the line-art vizzes keep
+ * it (now palette-honest). Both runtimes expose the `revealBloom` consumer door.
+ *
+ * THE TARGET is the CANVAS ([data-substrate-reveal]) — NOT a `.viz-canvas-host`
+ * wrapper: the blob's resting `drop-shadow` filter lives on ITS wrapper, so targeting
+ * the canvas never collides with a resting wrapper filter. NO `animation-fill-mode`
+ * that PERMANENTLY holds a settle filter — the animation reverts to the canvas's own
+ * (no) filter post-settle (brightness(1) saturate(1) opacity(1) == no filter/full
+ * opacity, a seamless revert).
+ *
+ * THE LEAF (createCanvasLifecycle.ts) sets the one-shot `data-substrate-reveal` attr
+ * the moment the canvas FIRST becomes visible (a dedicated one-shot IntersectionObserver
+ * — never at arm(), which a content-skipped / below-fold viz would burn invisibly). The
+ * `revealFired` guard keeps it ONE-SHOT → ZERO second bloom on scroll-off-and-back.
+ *
+ * PRM — the `animation:` line sits inside `@media (prefers-reduced-motion: no-preference)`
+ * AND the leaf skips the attr under reduce, so the field paints settled from frame 0
+ * (no fade, no luminance pulse — instant settled). The vestibular floor. */
+
+@keyframes substrate-reveal-bloom {
+    from {
+        opacity: 0;
+        filter: brightness(1) saturate(1);
+    }
+    55% {
+        /* the lit bloom peak — a warm luminance + saturation LIFT, NEVER a dim
+           veil: brightness and saturate stay ≥ 1 the whole way (palette-honest). */
+        filter: brightness(1.08) saturate(1.05);
+    }
+    to {
+        opacity: 1;
+        filter: brightness(1) saturate(1);
+    }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    canvas[data-substrate-reveal] {
+        animation: substrate-reveal-bloom var(--substrate-reveal-duration)
+            var(--ease-out);
+    }
+}