@mkbabb/glass-ui 3.5.1 → 3.7.0

package/src/styles/dock.css

@@ -60,6 +60,19 @@
         --dock-wrap-max-width: calc(100vw - var(--dock-viewport-inline-gutter, 1rem));
         --dock-separator-height: calc(var(--dock-h, var(--size-icon-btn)) * 0.5);
         --dock-collapsed-hover-scale: var(--scale-hover-dock);
+        /* AW.W3 — the spring-keyed child stagger knobs. `--dock-stagger-window-size`
+           is the fraction of the morph each child reveals over; `--dock-stagger-rise`
+           is the px the child rises from as it fades in. Consumers retune the
+           cascade feel per instance. */
+        --dock-stagger-window-size: 0.55;
+        --dock-stagger-rise: 4px;
+        /* AW.W3b — big-dock tokens. `--dock-card-radius` is the finite card-shell
+           radius (default --radius-dock-card = --radius-3xl, density-scaled
+           below); `--dock-tile-min` is the grid tile minimum (auto-fill track
+           floor). Both are density-scaled (compact tighter, spacious looser) — the
+           card radius + tile size ride the density cascade, never magic numbers. */
+        --dock-card-radius: var(--radius-dock-card);
+        --dock-tile-min: 4.5rem;
         /* Individual-transform identity base (AQ.W3 §W3.2). `scale: 1` at rest
            mints the stacking context once so a portaled popover over `--z-dock`
            stays above the dock during a hover scale (the load-bearing
@@ -300,12 +313,28 @@
        only. Width is driven by the inner `.dock-layers` FLIP via
        `useLayerTransition`; pinning it here would race the FLIP and
        reintroduce the `width: auto` non-interpolation diagnosed in
-       R1+R6. */
+       R1+R6.
+
+       AW.W3 — the collapsed-hover `scale` (the `.collapsed:hover` rule below) +
+       the press squish (`--scale-press-dock` on the dock controls) ride the
+       INDIVIDUAL `scale` property, NOT `transform`. Adding `scale
+       var(--dock-motion-resize)` here unifies the hover scale onto the SAME dock
+       spring vocabulary as the morph, so a collapsed→hover→expand gesture reads as
+       ONE continuous spring rather than a `scale`-ease handed off to the
+       width-spring. Under PRM the global gate strips `scale` from the
+       transition-property → the hover scale snaps (0 morph frames). */
     .glass-dock:not(.vertical) {
         transition:
             padding var(--dock-motion-resize),
             box-shadow var(--dock-motion-standard),
             transform var(--dock-motion-resize),
+            scale var(--dock-motion-resize),
+            /* AW.W3b — the pill↔card corner radius morphs on the SAME spring the
+               aperture rides (ONE free interpolation). Without this the
+               shape-card collapsed↔expanded radius snaps discretely. The list is
+               shared by ALL horizontal docks — the radius transition also glides
+               the wrap collapsed↔expanded radius swap (desirable). */
+            border-radius var(--dock-motion-resize),
             background var(--dock-motion-standard),
             border-color var(--dock-motion-standard);
     }
@@ -339,6 +368,7 @@
             padding var(--dock-motion-resize),
             box-shadow var(--dock-motion-standard),
             transform var(--dock-motion-resize),
+            scale var(--dock-motion-resize),
             background var(--dock-motion-standard),
             border-color var(--dock-motion-standard);
     }
@@ -357,6 +387,38 @@
         border-radius: var(--radius-xl);
     }
 
+    /* AW.W3b — horizontal-root shape rules. The `shape-*` class previously bound
+       ONLY under `.variant-rail`; on a horizontal `variant-dock` the prop silently
+       no-op'd (the root hardwired `--radius-dock` = `--radius-pill`). These rules
+       close that documented-but-dead prop — `shape="rounded"` / `shape="card"` now
+       paint on a horizontal dock. Scoped to `variant-dock:not(.vertical)` so the
+       rail + instrument-strip variants (which own their own radius) are untouched. */
+    .glass-dock.variant-dock:not(.vertical).shape-rounded {
+        border-radius: var(--radius-xl);
+    }
+
+    /* The big-dock CARD shell — a FINITE concentric radius above 2xl, below pill.
+       It does NOT collapse to a stadium. Collapsed it returns to a pill (the morph
+       target); the pill↔card swap glides on the `--dock-motion-resize` spring
+       (`border-radius` is in the `:not(.vertical)` transition list). */
+    .glass-dock.variant-dock:not(.vertical).shape-card {
+        border-radius: var(--dock-card-radius);
+    }
+
+    .glass-dock.variant-dock:not(.vertical).shape-card.collapsed {
+        border-radius: var(--radius-pill);
+    }
+
+    /* The squircle reads markedly better at the large card radius — an
+       `@supports`-gated ENHANCEMENT only (Chrome 139+, no FF/Safari 2026). The
+       border-radius arc is the CONTRACT; the squircle is the better tier (the
+       baseline arc is the acceptable contract, NOT a degraded fallback). */
+    @supports (corner-shape: squircle) {
+        .glass-dock.variant-dock:not(.vertical).shape-card {
+            corner-shape: squircle;
+        }
+    }
+
     /* AJ-W1-δ — `instrument-strip` variant (per G-AJ-D7 Path 1).
      *
      * The speedtest survey cockpit's vertical rail needs chassis-strip
@@ -438,6 +500,13 @@
         justify-content: center;
     }
 
+    /* AW.W3 — the collapsed-hover scale rides the unified dock spring vocabulary.
+       The `scale var(--dock-motion-resize)` arm was added to the `.glass-dock`
+       root transition above, so this hover scale settles on the SAME spring curve
+       the expand morph uses — a collapsed→hover→expand gesture is one continuous
+       spring, not a `scale`-ease handed off to the width-spring. The hover scale
+       and the press squish (`--scale-press-dock`) are now one register on the dock
+       surface. */
     .glass-dock.collapsed:hover {
         background: var(--glass-bg-wash);
         border-color: var(--glass-border-floating);
@@ -659,6 +728,72 @@
         inset: 0;
     }
 
+    /* AW.W3 — the spring-keyed child stagger. While the size spring drives the
+       morph, the driver arms the container (`.dock-layers` / `.dock-layer-stack`)
+       with `data-revealing` and writes the morph's normalized progress to
+       `--dock-morph-progress` (0 → 1) every frame. Each direct child of the
+       ACTIVE pane reveals when that progress crosses a per-child onset, so the
+       controls cascade IN ON the physical morph — a fast flick and a slow
+       hover-open both choreograph correctly, and an interrupted morph carries the
+       cascade with it (no orphaned timers). This is a per-CHILD opacity onset; the
+       active PANE itself stays statically opacity:1 (revealed by the aperture —
+       the W2 clip-reveal contract is NOT regressed).
+
+       The reveal is a pure `calc` ramp: `opacity = clamp(0, (progress − onset) /
+       window, 1)`. `--dock-stagger-onset` steps per child (nth-child); the window
+       is `--dock-stagger-window`. The children also rise a few px on a `translate`
+       that resolves on the same ramp. ONLY children inside the `[data-revealing]`
+       active pane are armed — at rest the children carry no opacity authority (the
+       default cascade leaves them at 1).
+
+       PRM: the driver never arms `data-revealing` on the synchronous PRM swap (the
+       FLIP fast-path returns before the spring; the spring's `respectReducedMotion`
+       settles instantly), so the children paint at full opacity at once. The
+       global PRM gate also strips `translate` from the transition-property — the
+       rise snaps. The cascade collapses to 0 stagger frames under PRM. */
+    .dock-layers[data-revealing] .dock-layer--full > *,
+    .dock-layer-stack[data-revealing] .dock-layer-item-host.is-active > * {
+        --dock-stagger-window: var(--dock-stagger-window-size, 0.55);
+        --dock-stagger-onset: 0;
+        opacity: clamp(
+            0,
+            calc(
+                (var(--dock-morph-progress, 1) - var(--dock-stagger-onset)) /
+                    var(--dock-stagger-window)
+            ),
+            1
+        );
+        translate: 0
+            calc(
+                (1 - clamp(0, calc((var(--dock-morph-progress, 1) - var(--dock-stagger-onset)) / var(--dock-stagger-window)), 1)) *
+                    var(--dock-stagger-rise, 4px)
+            );
+    }
+
+    /* Per-child onsets — each successive control starts a beat later, so the row
+       fills outer→in on expand. The onsets are fractions of the morph progress;
+       capped so even a long row finishes within the morph window. */
+    .dock-layers[data-revealing] .dock-layer--full > *:nth-child(2),
+    .dock-layer-stack[data-revealing] .dock-layer-item-host.is-active > *:nth-child(2) {
+        --dock-stagger-onset: 0.08;
+    }
+    .dock-layers[data-revealing] .dock-layer--full > *:nth-child(3),
+    .dock-layer-stack[data-revealing] .dock-layer-item-host.is-active > *:nth-child(3) {
+        --dock-stagger-onset: 0.16;
+    }
+    .dock-layers[data-revealing] .dock-layer--full > *:nth-child(4),
+    .dock-layer-stack[data-revealing] .dock-layer-item-host.is-active > *:nth-child(4) {
+        --dock-stagger-onset: 0.24;
+    }
+    .dock-layers[data-revealing] .dock-layer--full > *:nth-child(5),
+    .dock-layer-stack[data-revealing] .dock-layer-item-host.is-active > *:nth-child(5) {
+        --dock-stagger-onset: 0.32;
+    }
+    .dock-layers[data-revealing] .dock-layer--full > *:nth-child(n + 6),
+    .dock-layer-stack[data-revealing] .dock-layer-item-host.is-active > *:nth-child(n + 6) {
+        --dock-stagger-onset: 0.4;
+    }
+
     /* AW.W2 — the at-rest clip-lift moved to `.expanded:not([data-morphing])` /
        `.always-expanded:not([data-morphing])` (the clip-shell block at the top).
        A plain `overflow: visible` here would lift the clip DURING the morph (the
@@ -676,6 +811,46 @@
         cursor: default;
     }
 
+    /* ── AW.W3b — `layout="grid"` the 2D auto-grid big dock ──────────────
+       The active layer becomes a self-wrapping tile grid (Launchpad / Stage-Manager
+       track symmetry — `auto-fill` columns floored at `--dock-tile-min`, explicit
+       `grid-auto-rows` so the concentric look holds). DISTINCT from
+       `overflow="wrap"`'s content-ordered flex-wrap. A `layout="grid"` dock is
+       `alwaysExpanded` by contract (GlassDock.vue), so there is NO width morph and
+       hence NO per-frame grid-column reflow. `white-space: normal` releases the
+       single-row nowrap so the tiles wrap. */
+    .glass-dock.layout-grid {
+        white-space: normal;
+    }
+
+    .glass-dock.layout-grid .dock-layer--full {
+        display: grid;
+        grid-template-columns: repeat(
+            auto-fill,
+            minmax(var(--dock-tile-min, 4.5rem), 1fr)
+        );
+        grid-auto-rows: var(--dock-tile-min, 4.5rem);
+        gap: var(--dock-layer-gap, 0.375rem);
+        width: 100%;
+        height: auto;
+        white-space: normal;
+    }
+
+    /* A grid dock fills the inline cap; the active layer is the panel body, not a
+       shrink-to-fit row. The cap is the `--dock-max-inline-size` clamp (KEPT). */
+    .glass-dock.layout-grid .dock-layers {
+        width: 100%;
+    }
+
+    /* CONCENTRIC inner tiles — inner radius = outer card radius − padding (the
+       universal macOS / visionOS / Raycast rule). NEVER nest two pills
+       (stadium-in-stadium); a finite outer + a stepped-down inner. */
+    .glass-dock.layout-grid.shape-card .dock-layer--full > * {
+        border-radius: calc(
+            var(--dock-card-radius) - var(--dock-padding-inline, 0.5rem)
+        );
+    }
+
     /* ── Scroll-on-overflow opt-in (GlassDock `overflow="scroll"`) ───────
        The default contract grows-to-fit then overflows visibly past the
        axis cap. `overflow="scroll"` instead makes the dock the scroll port
@@ -748,6 +923,15 @@
         min-height: var(--dock-wrap-layer-min-height, var(--dock-layer-height, 2rem));
         gap: var(--dock-wrap-row-gap, 0.25rem)
             var(--dock-wrap-column-gap, var(--dock-layer-gap, 0.375rem));
+        /* AW.W3b — the graceful wrap-morph. The wrap/unwrap row-reflow flips
+           `flex-wrap` at the `--dock-overflow-bp` `@media` boundary; without a
+           transition the rows JUMP-CUT. Sequencing the layer's `min-height`
+           through the `--dock-motion-resize` spring MORPHS the reflow. The global
+           PRM gate strips `min-height` from the transition-property under reduce →
+           the morph snaps (0 morph frames) while the reflow still completes. The
+           wrap radius swap (`.collapsed` / `@media`) glides too — `border-radius`
+           is in the shared `:not(.vertical)` transition list (AW.W3b scope 2). */
+        transition: min-height var(--dock-motion-resize);
     }
 
     .glass-dock.dock-overflow-wrap .dock-layer--summary {

package/src/styles/glass-refract.css

@@ -0,0 +1,60 @@
+/* AW.W23 — the #glass-refract convex-lens SVG filter, shipped as a library
+ * asset so `.glass-refract` works OUT OF THE BOX (no consumer hand-mounts a
+ * filter node).
+ *
+ * The refraction recipe is the canonical 3-primitive graph (kube.io /
+ * LogRocket, 2025):
+ *
+ *   feImage          — a pre-baked displacement map computed from the convex-
+ *                      squircle surface profile  y = ⁴√(1 − (1 − x)⁴)  (Apple's
+ *                      preferred corner curve) via Snell's law (n₁ = 1 air,
+ *                      n₂ = 1.5 glass). The map is authored as an embedded SVG
+ *                      whose R channel carries the x-shift and G channel the
+ *                      y-shift (neutral 128 = no shift; bright edges bend light
+ *                      inward like a lens), expressed as two crossed linear
+ *                      gradients over the squircle silhouette.
+ *   feDisplacementMap— displaces the backdrop by the baked map (R = x-shift,
+ *                      G = y-shift, `scale` = max px, neutral 128).
+ *   feImage specular — a soft top-left specular highlight…
+ *   feBlend screen   — …blended `screen` over the displaced backdrop for the
+ *                      polished-glass catch.
+ *
+ * The filter ships INLINE as a data-URI in the `backdrop-filter` declaration, so
+ * the consumer gets it with zero markup. `backdrop-filter: url(#…)` is
+ * Chromium-only (WebKit bug 245510 open, Firefox not shipping), so the whole
+ * decl sits behind `@supports (backdrop-filter: url(#…))`; a non-supporting
+ * engine paints the un-gated blur base alone (no broken `url()` reference).
+ *
+ * RE-HOME (AW.W23 — decouple from the W22-folded compound). At HEAD the
+ * refraction rule was bound to `.glass-specular-track.glass-refract`. W22 folds
+ * `glass-specular-track` into `.glass-material`, retiring the compound's left
+ * operand, so the rule is re-homed onto `.glass-material.glass-refract` — the
+ * refraction garnish opts in on ANY `.glass-material` surface, no dependency on
+ * the now-aliased `glass-specular-track` class. The garnish stays PE-only over
+ * the blur base; it is NEVER promoted to the card/primitive substrate
+ * (feDisplacementMap is resize-expensive — only the `scale` attr animates
+ * without rebuilding the map).
+ */
+
+@layer components {
+    /* The shipped filter graph as a data-URI SVG. A `0×0` host SVG mounted via
+       the CSS asset keeps the `#glass-refract` id resolvable in-document. */
+    .glass-refract {
+        /* The named convex-lens displacement filter, baked from the squircle
+           surface profile. Composed as a custom property so the @supports arm
+           below references one source. */
+        --glass-refract-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='glass-refract' x='0' y='0' width='100%25' height='100%25'%3E%3CfeImage href='data:image/svg+xml,%253Csvg xmlns=%2522http://www.w3.org/2000/svg%2522 width=%2522100%2522 height=%2522100%2522%253E%253CradialGradient id=%2522m%2522 cx=%252250%2525%2522 cy=%252250%2525%2522 r=%252250%2525%2522%253E%253Cstop offset=%25220%2525%2522 stop-color=%2522rgb(128,128,128)%2522/%253E%253Cstop offset=%252270%2525%2522 stop-color=%2522rgb(128,128,128)%2522/%253E%253Cstop offset=%2522100%2525%2522 stop-color=%2522rgb(255,255,128)%2522/%253E%253C/radialGradient%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522url(%2523m)%2522/%253E%253C/svg%253E' result='map'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='map' scale='28' xChannelSelector='R' yChannelSelector='G' result='disp'/%3E%3CfeImage href='data:image/svg+xml,%253Csvg xmlns=%2522http://www.w3.org/2000/svg%2522 width=%2522100%2522 height=%2522100%2522%253E%253CradialGradient id=%2522s%2522 cx=%252230%2525%2522 cy=%252225%2525%2522 r=%252260%2525%2522%253E%253Cstop offset=%25220%2525%2522 stop-color=%2522rgba(255,255,255,0.5)%2522/%253E%253Cstop offset=%2522100%2525%2522 stop-color=%2522rgba(255,255,255,0)%2522/%253E%253C/radialGradient%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522url(%2523s)%2522/%253E%253C/svg%253E' result='spec'/%3E%3CfeBlend in='disp' in2='spec' mode='screen'/%3E%3C/filter%3E%3C/svg%3E#glass-refract");
+    }
+
+    /* The gated consuming selector — RE-HOMED onto `.glass-material.glass-refract`
+       (decoupled from the W22-folded `.glass-specular-track` compound). The
+       refraction composes the shipped `#glass-refract` filter OVER the host's
+       existing blur; it is additive (the blur already painted, this sharpens the
+       refraction edge where the engine supports it). */
+    @supports (backdrop-filter: url("#glass-refract")) {
+        .glass-material.glass-refract,
+        .glass-refract {
+            backdrop-filter: var(--glass-blur-resting) var(--glass-refract-filter);
+        }
+    }
+}

package/src/styles/glass-specular-track.css

@@ -1,120 +1,45 @@
 /* Pointer-anchored moving specular — the iOS-26 Liquid Glass illuminate-from-
- * within behaviour (AV.W15 M2, the HEADLINE fold).
+ * within behaviour.
  *
- * A masked radial-gradient catch-light rides the material surface at the
- * pointer position. The consumer writes the pointer location onto the element
- * as `--mouse-x` / `--mouse-y` (percentages) via a thin pointer-listener; this
- * rung maps those onto the typed `--specular-x` / `--specular-y` properties
- * (registered in tokens.css §11b) and paints a `radial-gradient(circle at …)`
- * over a `mask-image` so the glow stays clipped to the glass plate and travels
- * with the cursor — "the light travels around the material / illuminate under
- * your fingertip".
+ * AW.W22 — the moving-specular `::before` body (the masked radial catch-light,
+ * the rest/hover/active intensity steps, the var() fallback) was FOLDED into the
+ * single `.glass-material` mixin in glass.css, where the five ladder rungs +
+ * `.glass-card` + the `.dock-icon-button` control + `.glass-specular-track`
+ * compose it from ONE source. There is NO duplicate `::before` body here.
  *
- * Baseline floors: `@property` 2024-07-09 (the smooth position interpolation),
- * CSS `mask-image` 2023-12-07 (the surface-clip). Both carry a `var()` fallback
- * so an engine without typed-property animation still paints a centred catch-
- * light, and an engine without `mask` still paints the radial (unmasked but
- * surface-bounded by the `::before` `inset: 0` + `border-radius: inherit`).
+ * `.glass-specular-track` is now a thin ALIAS — it is listed in the
+ * `.glass-material` selector GROUP in glass.css, so a `.glass-specular-track`
+ * element gets the unified material (the `::before` catch-light, the rim, the
+ * interaction-light) with zero duplicate paint. This keeps the historical
+ * opt-in call sites (Card.vue, any consumer that still reaches for the class)
+ * painting the catch-light without a legacy shim — the alias is a live
+ * composition onto the unified mixin, not a dead orphan.
  *
- * The pointer-position WRITE (`--mouse-x` / `--mouse-y`) is the consumer's seam
- * (DockIconButton wires it; Button glass + Card hover opt in). The CSS half —
- * the masked radial, the reduced-motion static bracket, the var() fallback, the
- * @supports-gated refraction garnish — is the deliverable here.
+ * This file carries ONLY:
+ *   1. The reduced-motion + reduced-transparency a11y brackets, pointed at the
+ *      `.glass-material` group (the canonical specular owner) so the guards
+ *      cover every band surface, not just the opt-in class.
+ *   2. The `@supports`-gated `#glass-refract` refraction garnish — RE-HOMED at
+ *      AW.W23 off the (now-folded) `.glass-specular-track.glass-refract`
+ *      compound onto `.glass-material.glass-refract` (see glass-refract.css for
+ *      the shipped filter asset + the re-homed consuming selector).
  */
 
-@layer components {
-    /* The opt-in class. A `::before` pseudo carries the moving catch-light so it
-       composes over the host's own glass background/blur without a second
-       backdrop-filter (no glass-on-glass — the specular is a LIGHT layer, not a
-       second plate). The host need not be positioned-relative by us; the five
-       glass tiers + the dock + Button already mint `position: relative`. */
-    .glass-specular-track::before {
-        content: "";
-        position: absolute;
-        inset: 0;
-        border-radius: inherit;
-        pointer-events: none;
-        z-index: 1;
-        /* Map the consumer's pointer write onto the typed properties, ON THE
-           PSEUDO. The `--mouse-x/--mouse-y` write lands on the HOST (inline
-           style); those are UNREGISTERED custom properties, so they inherit
-           down to this `::before` naturally. The registered `--specular-*`
-           props are `inherits: false` (per-surface ownership), which means a
-           `::before` does NOT see a value set on its originating element — so
-           the mapping must be declared HERE, on the pseudo, where it owns its
-           own typed value. The `var(--mouse-x, 50%)` floor is the centred
-           fallback: an engine that never receives a pointer write paints a
-           centred catch-light, never a broken/absent one. */
-        --specular-x: var(--mouse-x, 50%);
-        --specular-y: var(--mouse-y, 50%);
-        /* The catch-light intensity floor at rest; hover/active lift it (the
-           pseudo-targeting rules below). Registered `<number>`, so the layer
-           opacity it drives interpolates smoothly. */
-        --specular-intensity: 0.35;
-        /* The travelling catch-light. A soft circular glow centred on the
-           tracked pointer position; the warm-white tint keeps the warm-cream
-           identity (NOT iOS blue). The gradient carries FIXED stop alphas — the
-           `--specular-intensity` multiplier drives the layer `opacity` below
-           (NOT a `calc()` in the stop alpha: a registered-`@property` `var()`
-           nested in `calc()` inside an `hsl()` alpha inside a gradient does not
-           substitute in Chromium — it computes to 0. Driving the whole layer's
-           `opacity` is both correct AND the cleaner model — intensity IS a
-           layer brightness, not a per-stop axis). */
-        background: radial-gradient(
-            circle at var(--specular-x, 50%) var(--specular-y, 50%),
-            hsl(40 30% 100% / 0.55) 0%,
-            hsl(40 30% 100% / 0.22) 22%,
-            transparent 55%
-        );
-        opacity: var(--specular-intensity, 0.35);
-        /* Clip the glow to the plate so it rides the surface (the "light travels
-           AROUND the material" read). `mask-image` Baseline 2023-12-07; a
-           non-supporting engine ignores it and the `inset: 0` + radius-inherit
-           already bound the glow to the host rectangle. */
-        mask-image: radial-gradient(
-            circle at var(--specular-x, 50%) var(--specular-y, 50%),
-            black 0%,
-            black 55%,
-            transparent 75%
-        );
-        mix-blend-mode: screen;
-        /* Smooth the position + intensity between pointer samples. The typed
-           `@property` registrations make the percentage stops interpolable, so
-           the catch-light position SETTLES rather than snapping frame-to-frame;
-           the intensity rides the layer `opacity` transition. */
-        transition:
-            --specular-x var(--duration-fast, 150ms) var(--ease-standard, ease-out),
-            --specular-y var(--duration-fast, 150ms) var(--ease-standard, ease-out),
-            opacity var(--duration-normal, 240ms) var(--ease-standard, ease-out);
-    }
-
-    .dark .glass-specular-track::before {
-        /* Softer over the deep canvas — the screen blend lifts harder on dark. */
-        --specular-intensity: 0.22;
-    }
-
-    /* Hover/active lift the intensity — the "illuminate under your fingertip"
-       brighten on engagement; settles back on leave via the opacity transition
-       above. The rules target the `::before` (the intensity lives on the pseudo
-       — see the mapping note above). */
-    .glass-specular-track:hover::before {
-        --specular-intensity: 0.6;
-    }
-    .glass-specular-track:active::before {
-        --specular-intensity: 0.85;
-    }
-}
-
 /* ── Reduced-motion: pin the specular STATIC ───────────────────────────────
    The MANDATORY guard. Under `prefers-reduced-motion: reduce` the catch-light
-   paints static at rest position — no pointer-tracking (the position pins to
-   centre, ignoring the consumer's `--mouse-x/--mouse-y` write), no transition
-   animation. The centred catch-light + the warm-cream tint survive; only the
-   MOTION is removed. The pin + the `transition: none` live on the `::before`
-   (where the typed `--specular-*` props are owned), overriding the pointer-map
-   above by order — the `var(--mouse-x)` write is ignored, the catch-light pins
-   centred. */
+   paints static at rest position — no pointer-tracking, no transition. The pin
+   covers the unified `.glass-material` group AND the `.glass-specular-track`
+   alias so EVERY band surface (not just the opt-in class) freezes the position
+   while keeping the centred catch-light + the warm-cream tint. */
 @media (prefers-reduced-motion: reduce) {
+    .glass-material::before,
+    .glass-wash::before,
+    .glass-quiet::before,
+    .glass-resting::before,
+    .glass-floating::before,
+    .glass-overlay::before,
+    .glass-card::before,
+    .dock-icon-button::before,
     .glass-specular-track::before {
         --specular-x: 50%;
         --specular-y: 50%;
@@ -125,30 +50,18 @@
 /* ── Reduced-transparency: drop the specular ───────────────────────────────
    When the user requests reduced transparency the surface goes opaque (the
    glass.css bracket maps the blurs to `none`); a travelling catch-light on a
-   flat opaque surface is decoration without substrate, so it drops too. */
+   flat opaque surface is decoration without substrate, so it drops too — across
+   the whole material group. */
 @media (prefers-reduced-transparency: reduce) {
+    .glass-material::before,
+    .glass-wash::before,
+    .glass-quiet::before,
+    .glass-resting::before,
+    .glass-floating::before,
+    .glass-overlay::before,
+    .glass-card::before,
+    .dock-icon-button::before,
     .glass-specular-track::before {
         display: none;
     }
 }
-
-/* ── feDisplacementMap refraction garnish — PE-only, @supports-gated ────────
-   True SVG `feDisplacementMap` lensing (`backdrop-filter: url(#…)`) is
-   Chromium-only (WebKit bug #245510, Firefox not shipping) and resize-
-   expensive. It lands ONLY as a progressive-enhancement garnish layered OVER
-   the blur base, NEVER the substrate — gated `@supports (backdrop-filter:
-   url(#…))` so a non-supporting engine paints the blur base alone (no broken
-   `url(#…)` reference). A consumer opts a glass surface into the refraction by
-   adding `.glass-refract` AND mounting the named SVG filter; the gate asserts
-   the garnish never reaches the substrate. The blur base paints WITHOUT it. */
-@supports (backdrop-filter: url("#glass-refract")) {
-    @layer components {
-        .glass-specular-track.glass-refract {
-            /* The garnish composes the consumer-mounted `#glass-refract` SVG
-               filter OVER the host's existing blur. It is additive — the host's
-               `backdrop-filter` blur already painted; this only sharpens the
-               refraction edge where the engine supports it. */
-            backdrop-filter: var(--glass-blur-resting) url("#glass-refract");
-        }
-    }
-}