@mkbabb/glass-ui 4.1.0 → 4.2.0

package/src/styles/glass/material.css

@@ -55,7 +55,22 @@
        tier's own shadow recipe. The `::after` grain overlay already claims the
        five rungs' `::after`; the rim is folded INTO that same overlay's
        box-shadow below (the grain `::after` gets the rim inset ring) so no
-       pseudo-element collides. */
+       pseudo-element collides.
+
+       ── BE.W5 — `--glass-edge-light` IS A WHOLE BOX-SHADOW LAYER, NEVER A COLOR ──
+       `--glass-edge-light` resolves to a COMPLETE box-shadow layer (the token is
+       `inset 0 0 0 0.75px hsl(0 0% 100% / 0.18)` — geometry + color, glass-fx.css:70;
+       the `.dark` arm re-points it to `--glass-edge-light-dark`). It is consumed as a
+       WHOLE LAYER inside a `box-shadow:` list — `box-shadow: var(--glass-edge-light),
+       <other layers>` (surfaces.css:203/371, stack-rail.css:176). The MISUSE is
+       NESTING it as a COLOR inside another shadow — `inset 0 0 0 1px
+       var(--glass-edge-light)` — which expands to `inset 0 0 0 1px inset 0 0 0 0.75px
+       hsl(…)`: an INVALID shadow value → the WHOLE `box-shadow` declaration DROPS →
+       NO rim, NO drop-shadow (worst in dark, where the rim is the silhouette device).
+       THE RULE: read `--glass-edge-light` as a whole `box-shadow` layer, NEVER nested
+       inside another shadow's geometry. To compose the rim's COLOR (e.g. accent-tint
+       it) use `--glass-rim-ink`/`--glass-material-rim` (rim.css — the COLOR seam),
+       NOT `--glass-edge-light` (the LAYER token). */
 
     /* (a)+(c) The moving-specular `::before` catch-light — the iOS-26
        illuminate-from-within behaviour. A masked radial-gradient glow rides the
@@ -298,4 +313,58 @@
        press-depth animation is the deliberate tradeoff. The press squish + gleam lift on
        the SAME `--glass-btn-press-t` drive (material gleam, above) carry the press read. */
 
+    /* ── BE.W-CLEAR-VARIANT — the Apple-Clear `surface="clear"` decoration + the
+       MANDATORY legibility scrim ──────────────────────────────────────────────────
+       The 4th surface-axis member (`useSurfaceAxis.ts` maps `clear → glass-clear`).
+       A `surface="clear"` surface paints the maximally-translucent `--glass-bg-clear`
+       (0.58 — the clearest rung the library ships, the album grid bleeds through) AND
+       a MANDATORY legibility scrim IN THE SAME SEAM — a `.glass-clear` cannot exist
+       without it (the Apple Clear contract: near-transparent → the text needs a scrim
+       floor). The scrim DIMS THE BACKDROP (`color-mix(in srgb, var(--background) N%,
+       transparent)` — the A5-1 modal-scrim idiom, painted BEHIND the translucent fill
+       within the box, see the two-layer-background note below), DISTINCT from the W55
+       `--glass-tint-*` PLATE-darken axis (the two legibility axes stay disjoint: the
+       scrim dims the backdrop, the W55 tint darkens the plate). The scrim strength
+       DERIVES from the sampled
+       `--glass-backdrop-luma` (useGlassBackdropLuminance's existing write) so it dims
+       MORE over a bright album grid (luma→1) and relaxes over a dark one (luma→0) —
+       the dynamic legibility that betters Apple's fixed scrim. The `0.5` fallback is
+       the safe mid-scrim when no observer is wired. The plate fill rides the SAME
+       oklab-tint seam so the W55 darken reaches it; the see-through frost is the
+       cross-engine FLOOR (pure opacity + backdrop-filter, no `url()` — Safari paints
+       it via the build-time -webkit- prefix pass). The scrim is a STATIC paint (no
+       layout, no animation — `proof:no-layout-animation` GREEN by construction).
+
+       THE SCRIM IS A SECOND BACKGROUND LAYER, NOT A PSEUDO. The glass family already
+       claims BOTH pseudos on every base rung — `::before` (the moving specular core)
+       AND `::after` (the grain overlay, ladder.css). `surface="clear"` composes ON a
+       base tier (`glass-floating glass-clear`), so its `::before`/`::after` are taken;
+       a scrim pseudo would CLOBBER the specular or grain. The mandatory scrim is
+       therefore the FIRST of two comma-separated `background` LAYERS — painted FRONT
+       (the translucent glass fill) over BACK (the `--background` dim) within the box,
+       so the dim sits between the backdrop-filtered backdrop and the content (a child
+       paints above both). The fill stays translucent so the backdrop still reads
+       THROUGH the dim — see-through AND legible, one element, no pseudo collision. */
+    [data-surface="clear"],
+    .glass-clear {
+        /* The dynamic scrim strength — DERIVED from the sampled backdrop luma
+           (dims MORE over a bright grid). `0.5` is the safe mid-scrim fallback. */
+        --glass-clear-scrim-strength: calc(
+            var(--glass-backdrop-luma, 0.5) * 40%
+        );
+        background:
+            color-mix(
+                in oklab,
+                var(--glass-bg-clear),
+                var(--glass-tint-source) var(--glass-tint-strength)
+            ),
+            color-mix(
+                in srgb,
+                var(--background) var(--glass-clear-scrim-strength),
+                transparent
+            );
+        backdrop-filter: var(--glass-blur-floating);
+        position: relative;
+    }
+
 }

package/src/styles/glass/reveal.css

@@ -45,6 +45,19 @@
            clocks read the shared spring tokens (read-only — the W-GLASS-CAL fence). */
         --glass-reveal-blur: 4px;
         --glass-reveal-slide: 0.5rem;
+        /* The materialize squish — the surface blooms FROM 0.88 (a clear squish-grow,
+           the Control-Center round-toggle reference), not the near-no-op 0.95. The
+           authority lives here; the closed/exit leg reads it with a 0.88 fallback.
+           BD.W-ANIM-IOS27-TUNE */
+        --glass-reveal-enter-scale: 0.88;
+        /* The SQUISH channel — the same volume-preserving born-wide+flat squish the
+           universal `.liquid-enter` mount recipe speaks (ONE grammar, no fork). The
+           closed leg rides it on the `scale:` LONGHAND (vol-preserving sx·sy ≈ 1),
+           settling to `1 1` at open; the bloom-from-small grace is the coupled
+           scale-down (--glass-reveal-enter-scale) × this squish, never a separate
+           transform: shorthand (which would clobber a centering transform). */
+        --lq-stretch-x: 1.06;
+        --lq-stretch-y: 0.945;
         transform-origin: var(--reka-popper-transform-origin, center);
         /* The coupled transition list — the SPATIAL legs (scale/translate) on the
            snappy spring's OWN settle clock, the EFFECTS legs (opacity/filter blur-
@@ -67,7 +80,7 @@
        from its edge) — the BASE never writes `translate`, so a center-anchored Dialog
        keeping its `-translate-x-1/2 -translate-y-1/2` centering is NEVER clobbered. */
     .glass-reveal[data-state="open"] {
-        scale: 1;
+        scale: 1 1;
         opacity: 1;
         filter: blur(0);
     }
@@ -77,7 +90,14 @@
        past gone, the §6/W-MOTION-CANON P2 doctrine); NO `--spring-*` token on the
        exit. The exit is faster + un-sprung — the surface recedes cleanly. */
     .glass-reveal[data-state="closed"] {
-        scale: var(--glass-reveal-enter-scale, 0.95);
+        /* Born wide+flat AND bloom-from-small: the SQUISH (--lq-stretch-x/-y,
+           vol-preserving) couples with the bloom-from-0.88 on the SAME `scale:`
+           LONGHAND (two factors, ONE longhand — never a second transform: shorthand
+           that would clobber a Dialog's centering translate). The deform stays
+           anisotropic (the long axis swells AS it blooms, the short pinches);
+           it settles to `1 1` at open. */
+        scale: calc(var(--glass-reveal-enter-scale, 0.88) * var(--lq-stretch-x, 1.06))
+            calc(var(--glass-reveal-enter-scale, 0.88) * var(--lq-stretch-y, 0.945));
         opacity: 0;
         filter: blur(var(--glass-reveal-blur));
         transition-timing-function: var(--ease-out);

package/src/styles/glass/rim.css

@@ -77,9 +77,21 @@
            `--glass-rim-top`. `--glass-rim-ink` is the resolved top-ink stop (kept as
            the accent-compose seam — the `.dark` arm below re-points it). */
         --glass-rim-ink: hsl(0 0% 100% / 0.30);
+        /* BD.W-GLASS-KEY-EDGE — the LIT catch is now KEY-DRIVEN: the accent-mixed
+           catch-light rides the key-facing edges (`--glass-key-lit-y` top +
+           `--glass-key-lit-x` side, the upper-right cel key) so the accent reads on
+           the LIT edge that agrees with the cartoon cast's light source — not a flat
+           top-only halo. The side stop carries the same accent-mixed ink at the rim's
+           own 0.18-class weight (via `--glass-rim-ink`-derived mix). The SHADE half is
+           the key-driven `--glass-rim-bottom` two-stop under-shadow. At 0% accent
+           strength the mix resolves byte-compatible to the bare key-driven rim (the W2
+           no-op floor). The moving-specular `::before` catch-light + the grain
+           `::after` are UNTOUCHED (both occupied). */
         --glass-material-rim:
-            inset 0 1px 0
+            inset 0 var(--glass-key-lit-y) 0
                 color-mix(in oklab, var(--glass-rim-ink), var(--glass-accent) var(--glass-accent-strength)),
+            inset var(--glass-key-lit-x) 0 0
+                color-mix(in oklab, hsl(0 0% 100% / 0.18), var(--glass-accent) var(--glass-accent-strength)),
             var(--glass-rim-bottom);
         /* the per-rung border ink, accent-composed. `--glass-border-rung` is set by
            each rung at its own declaration (it reads the rung's `--glass-border-*`

package/src/styles/glass/surfaces.css

@@ -279,7 +279,7 @@
        seam — over a bright field the pill darkens-to-legible, over a calm field it
        stays warm-cream/near-white (the iOS adaptive register reaching the pill).
        ZERO-delta at the `--glass-tint-strength: 0%`/floor default. */
-    :where(.btn-glass, .segmented-indicator) {
+    :where(.btn-glass, .segmented-indicator, .glass-capsule) {
         --glass-bg-floating-tinted: color-mix(
             in oklab,
             var(--glass-bg-floating),
@@ -292,18 +292,13 @@
            QUIETER glass register, prominence-by-tint) reaches the W55 darken on its lit
            fill too — ZERO new compositing axis, the SAME seam the resting/floating pair
            composes. The floating rung is minted on the shared `:where()` seam ABOVE
-           (the tab pill reads it too); quiet + resting stay button-scoped (the
+           (the tab pill reads it too); the quiet rung stays button-scoped (the
            hover/active fill register the segmented pill does not engage). */
         --glass-bg-quiet-tinted: color-mix(
             in oklab,
             var(--glass-bg-quiet),
             var(--glass-tint-source) var(--glass-tint-strength)
         );
-        --glass-bg-resting-tinted: color-mix(
-            in oklab,
-            var(--glass-bg-resting),
-            var(--glass-tint-source) var(--glass-tint-strength)
-        );
     }
 
     /* BB.W-BUTTON-GLASS (e) — the optional refraction-edge opt-in. CONSUMES the
@@ -364,7 +359,22 @@
         padding-inline: 0.625rem;
         padding-block: 0.3125rem;
         border-radius: var(--radius-pill);
-        background: var(--glass-bg-floating);
+        /* BD.W-GOO-CAROUSEL-DECK — the element-level oklab TINT seam (NOT the raw
+           pre-substituted `--glass-bg-floating` :root token — the gray-hole
+           substitution-trap). At the `--glass-tint-strength: 0%` default this is the
+           no-op floor (`color-mix(in oklab, X, src 0%) ≡ X` — byte-identical pager pixels
+           over a flat page); over a declared/sampled BRIGHT carousel image
+           (`@container style(--glass-backdrop: light)`) the pill darkens-toward-ink for a
+           real silhouette (the W55 ≤24% clamp keeps it translucent); under `.dark` the
+           W-DARK-MATERIAL tint arm LIFTS it toward luminous warm-dark, never a charcoal
+           slab. `in oklab` is the glass-tint perceptual family (the in-srgb
+           `--surface-tint-*` brand fence is untouched). The dock `--glass-bg-dock`
+           self-re-point precedent applied to the pager chassis. */
+        background: color-mix(
+            in oklab,
+            var(--glass-bg-floating),
+            var(--glass-tint-source) var(--glass-tint-strength)
+        );
         backdrop-filter: var(--glass-blur-floating);
         -webkit-backdrop-filter: var(--glass-blur-floating);
         box-shadow:

package/src/styles/glass.css

@@ -58,8 +58,19 @@
    AFTER surfaces.css and BEFORE surface-axis.css (same @layer components, same
    source order — the dist is byte-isomorphic). */
 @import "./glass/control-surfaces.css";
+/* BD.W-TAB-IOS-CAPSULE — the ONE shared glassy register (`.glass-capsule` +
+   `.glass-capsule-track` + `.glass-capsule-hover`) the tabs/dock-tab/buttons/chips/
+   cards consumers compose. @import-ed AFTER surfaces.css (so the `--glass-bg-floating-
+   tinted` seam + the `--glass-rim-*`/`--glass-shadow-floating` tokens resolve) and
+   BEFORE the consuming recipes (segmented-tabs.css et al, imported by index.css). */
+@import "./glass/glass-capsule.css";
 @import "./glass/surface-axis.css";
 @import "./glass/reveal.css";
+/* BD.W-LIQUID-ENTRANCE-GENERAL — the UNIVERSAL `.liquid-enter` mount recipe
+   (the four coupled channels as @keyframes-on-mount + the `.is-cel` cel-slam + the
+   lagging cartoon cast). @import-ed AFTER reveal.css (it extends the same
+   `--lq-enter-*` channel substrate the `.glass-reveal` TRANSITION floor speaks). */
+@import "./glass/liquid-enter.css";
 @import "./glass/deep.css";
 @import "./glass/progress-rail.css";
 @import "./glass/squircle.css";

package/src/styles/icon-chip.css

@@ -27,6 +27,22 @@
  * --spring-snappy/--spring-smooth registers), no longer the fixed bezier.
  */
 
+/* BD.W-GLASS-ATOM-REGISTER — the shared `.glass-atom` warm-glass register the
+   small atoms (Badge-glass / metric-badge / slider fill / the `+N` chip) consume.
+   @import-ed HERE (icon-chip.css loads in index.css AFTER glass.css, so
+   `.glass-capsule` + the `--glass-*` axes are defined) — a consume-only recipe,
+   not a second material. CSS `@import` must precede every rule, so it leads the
+   file (the comment above is not a rule). */
+@import "./glass/glass-atom.css";
+/* BD.W-CHIP-CONGRUENT-GLASS — the chip family's warm-glass toggle register
+   (.glass-chip: the stadium-pill lens + the de-frauded colour-flood punch the
+   ToggleChip/SelectableChip/toggle-group children compose). @import-ed HERE
+   alongside glass-atom.css (icon-chip.css loads in index.css AFTER glass.css, so
+   `.glass-capsule` + `.accent-tone` + the `--glass-*` axes resolve) — a consume-
+   only recipe, not a second material. CSS `@import` must precede every rule, so it
+   leads with the atom import. */
+@import "./glass/glass-chip.css";
+
 :root {
     /* The chip≤glyph proportion (d2, structural). The diameter floors at
        `glyph × ratio` so the plate can NEVER paint under the glyph — a
@@ -110,6 +126,35 @@
     --icon-chip-plate-strength: 40%;
 }
 
+/* ── The QUIET GLASS register (BD.W-GLASS-ATOM-REGISTER cross-link) ─────────────
+   The chip's SECOND register: the transmissive `.glass-atom` warm-glass capsule
+   tinted toward the event hue via `--glass-fill-tint`, NOT the loud `in srgb`
+   brand plate (the default, kept — AW.W26 fence). The component applies
+   `.glass-capsule .glass-atom` alongside `.icon-chip--glass`, so the body (warm
+   floor + `--glass-blur-quiet` backdrop + the keyed rim) comes from the SHARED
+   register — this rule only RETIRES the chip's own `in srgb` plate-color fill so
+   the two backgrounds don't double-paint (the capsule's translucent fill +
+   `.glass-atom`'s tinted `background-image` are the body). The glyph event color
+   is untouched (the one color event still reads). A flat capsule lens — the
+   backdrop-filter rides the shared `--glass-blur-quiet` (Safari-native, no
+   `backdrop-filter:url`, Fence 8). */
+.icon-chip--glass {
+    /* Retire the brand plate fill — the `.glass-capsule` body + the `.glass-atom`
+       tinted `background-image` paint the surface (no double-fill). The capsule's
+       `background:` shorthand + the atom's later `background-image` layer win the
+       cascade over this `background-color: transparent` reset by source order. */
+    background-color: transparent;
+}
+
+/* The glass chip's hover-bloom (when BOTH `--glass` + `--bloom`) routes the glow
+   ring through the SAME event color, over the glass body — the bloom GROW (the
+   base `.icon-chip--bloom:hover` transform/spring) is inherited unchanged. */
+@media (hover: hover) {
+    .icon-chip--glass.icon-chip--bloom:hover {
+        background-color: transparent;
+    }
+}
+
 /* ── The duotone axis — a low-alpha fill of the same hue UNDER the stroke ──── */
 /* Lucide glyphs bake `fill: none` on the SVG root; CSS wins over the
    presentation attribute, so the `[data-duotone] svg` rule reaches the inner

package/src/styles/index.css

@@ -172,6 +172,17 @@
 @import "./floating-panel.css";
 @import "./transitions.css";
 @import "./animations.css";
+/* BD.W-MORPH-FIELD-WELD — the ONE morph-field recipe (the body/neck/waist silhouette + the
+   dedicated @property --morph-squish channel + the welling concave waist clip-path + the
+   1940s ink-cast). The `useMorphField` weld writes the drive-derived channels once/frame;
+   this sheet paints them. The cross-engine clip-path waist FLOOR + the [data-morphing] goo
+   gate live here. */
+@import "./motion/morph-field.css";
+/* BE.W-CELEBRATE-BURST — the earned glass-petal radial-bloom recipe (the
+   .glass-celebration-petal warm-cream frosted-glass material + the overlay anchor).
+   @import-ed after animations.css per the wave spec (the petal motion is the JS rAF
+   step's compositor writes; this recipe is the static frosted material the petals wear). */
+@import "./jubilance.css";
 @import "./scroll-driven.css";
 @import "./scroll-choreography.css";
 @import "./scroll-chrome.css";

package/src/styles/jubilance.css

@@ -0,0 +1,65 @@
+/* jubilance.css — BE.W-CELEBRATE-BURST — the earned glass-petal radial-bloom recipe.
+ *
+ * THE PETAL IS THE SURFACE'S OWN GLASS (CB4 / warm-cream identity). `.glass-celebration-
+ * petal` paints the warm-cream frosted glass material via the EXACT element-level oklab
+ * tint seam `glass/ladder.css` composes — `color-mix(in oklab, var(--glass-bg-floating),
+ * var(--glass-tint-source) var(--glass-tint-strength))` — so the petal reads as the
+ * surface's OWN glass, NOT a saturated confetti color. There is NO disco-grain, NO `✦`
+ * glyph, NO sparkle-sweep (the §6 calm register, the disco-fenced floor).
+ *
+ * THE :tone OPT-IN (the hue-keyed burst). `useCelebrationBurst({ tone })` writes
+ * `--glass-accent` onto each petal (the W-GLASS-ACCENT rim-tint seam); the catch-light
+ * core reads `--glass-specular-core` which ALREADY OKLab-mixes toward `--glass-accent ×
+ * --glass-accent-strength` (material.css) — so a download-complete petal blooms
+ * `--viz-download` through the SHARED specular cohort, never a second fork. At the default
+ * (no tone) `--glass-accent` is transparent → the warm-cream identity (the no-op floor).
+ *
+ * COMPOSITOR-ONLY (CB3 / proof:no-layout-animation). The recipe paints a static frosted
+ * pill; the per-frame motion (translate/scale/opacity/filter) is the JS rAF step's inline
+ * writes (compositor channels ONLY — never a layout property). The recipe carries NO
+ * layout-animating transition.
+ *
+ * PRM-STATIC (the vestibular floor). Under reduce the JS `burst()` spawns NO drifting
+ * petals (the prefersReducedMotion() branch fires only the destination chip-bloom-in
+ * cascade) — so there are no petals to carve here; the destination cascade is PRM-carved
+ * by the EXISTING icon-chip-reveal `animation: none` rule (icon-chip.css), re-used not
+ * re-authored. */
+
+@layer components {
+    /* The short-lived overlay container the JS appends to the origin's offsetParent (one
+       DOM write, removed on settle). It is a zero-size anchor at the origin center; the
+       petals position-absolute off it. */
+    .glass-celebration-overlay {
+        position: absolute;
+        pointer-events: none;
+    }
+
+    /* The earned glass petal — the surface's OWN warm-cream frosted glass material. */
+    .glass-celebration-petal {
+        /* The petal footprint — a small pill, tokenized for the one-knob retune. */
+        --celebration-petal-size: 10px;
+        position: absolute;
+        inline-size: var(--celebration-petal-size);
+        block-size: var(--celebration-petal-size);
+        border-radius: var(--radius-pill, 9999px);
+        pointer-events: none;
+        /* THE WARM-CREAM GLASS (CB4) — the EXACT element-level oklab tint seam ladder.css
+           composes for every glass rung. NOT a saturated bg-<hue>/raw-Tailwind confetti
+           color: the petal reads as the surface's own frosted glass. */
+        background: color-mix(
+            in oklab,
+            var(--glass-bg-floating, color-mix(in oklab, var(--card), white 8%)),
+            var(--glass-tint-source, transparent) var(--glass-tint-strength, 0%)
+        );
+        /* A sub-perceptual warm-cream catch-light — reads the SHARED --glass-specular-core
+           (which carries the --glass-accent :tone opt-in via material.css's oklab mix), a
+           soft inner gleam so the petal reads as lit glass, never a flat slab. NO second
+           specular fork, NO disco. */
+        box-shadow:
+            inset 0 0 0 0.5px
+                color-mix(in oklab, var(--glass-specular-core, hsl(40 35% 92%)) 40%, transparent),
+            0 1px 3px color-mix(in oklab, var(--foreground), transparent 86%);
+        /* will-change promotes ONLY the compositor channels the JS step writes. */
+        will-change: transform, opacity, filter;
+    }
+}

package/src/styles/motion/morph-field.css

@@ -0,0 +1,229 @@
+/* motion/morph-field.css — BD.W-MORPH-FIELD-WELD — the ONE morph-field RECIPE.
+ *
+ * The body / neck / waist recipe + the DEDICATED squish channel every `useMorphField`
+ * consumer paints over. The weld JS (useMorphField.ts) writes the drive-derived custom
+ * properties once per frame (`--morph-squish`, `--morph-neck-girth`, `--morph-neck-gap`,
+ * `--morph-k`, `--morph-waist`, `--morph-specular-angle`); this sheet projects them onto
+ * the body + neck silhouettes. The MORPH_SIGNATURES rows live in the JS (motion-named
+ * DATA); this sheet is signature-agnostic — it paints whatever the masses carry.
+ *
+ * THE DEDICATED SQUISH CHANNEL (the dock-core hardening fence). The volume-preserving
+ * squish writes `--morph-squish`, NEVER `--stretch` (the 6-JS-owner + the
+ * `--dock-morph-max-stretch:1.14` clobber). A morph that ALSO rides --stretch (the dock
+ * collapse) keeps its own channel; the weld owns this one. Registered @property so a bare
+ * var() INTERPOLATES the ramp (the --dock-morph-t precedent).
+ *
+ * DETERMINISM (motion-canon P5 / the M5 scalar-binding). Every axis below is
+ * `f(var(--morph-*))` (the weld's drive-derived writes) — NEVER a CSS animation/transition
+ * with its own clock. A frame at a given drive value is byte-reproducible. Compositor-only
+ * (transform / scale / clip-path / opacity / --* — ZERO animated layout property).
+ *
+ * THE CARTOON PUNCH (welded IN, gated on the SHIPPED Band-0 tokens). The body squash rides
+ * `--morph-squish × --motion-weight`; the ink cast rides the `--shadow-cartoon-*` rung
+ * (never a hex literal, never an animated box-shadow); the neck specular-sweep lags the
+ * geometry (follow-through). `--motion-weight` and `--ease-cartoon-punch` are SHIPPED (P1,
+ * scheme-motion.css), so the punch is LIVE (not skipped); PRM zeroes --motion-weight → the
+ * squash/arc/cast collapse in ONE assignment.
+ *
+ * CROSS-ENGINE (§L7). The goo `<filter>` is the ONE `<GooFilter>` mount's REGULAR
+ * `filter:url(#…)` (NEVER backdrop-filter — bug 245510), applied on a SIBLING goo LAYER,
+ * never an ANCESTOR of glass (an ancestor filter kills backdrop-filter on descendants in
+ * both engines). The clip-path hourglass waist is the Tier-C cross-engine FLOOR under the
+ * filter — a concave waist on BOTH engines before any blur fuses it. The filter is gated to
+ * `[data-morphing]` (never a steady-state re-blur — the Safari budget fence). */
+
+/* The dedicated squish channel + the neck-drive channels — typed INHERITING @property so a
+   bare var() INTERPOLATES (the --dock-morph-t/--neck-t precedent). The weld writes them on
+   the host; descendant bodies + neck read the inheriting values. */
+@property --morph-squish {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 1;
+}
+@property --morph-neck-girth {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 0;
+}
+@property --morph-k {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 1;
+}
+@property --morph-waist {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 1;
+}
+@property --morph-specular-angle {
+    syntax: "<angle>";
+    inherits: true;
+    initial-value: 0deg;
+}
+
+@layer components {
+    /* The morph FIELD host — the sibling goo LAYER the filter applies to (never an
+       ancestor of glass). The weld writes the drive-derived channels here; the bodies +
+       neck live under it and read the inheriting values. The filter engages ONLY while the
+       morph is in-flight (`[data-morphing]`) — crisp at rest, gooey during the merge. */
+    .morph-field {
+        position: relative;
+        pointer-events: none;
+        /* isolation keeps the blur/threshold scoped to the masses, not the page behind. */
+        isolation: isolate;
+        filter: none;
+    }
+    /* Gate the goo filter to the in-flight window — the §L7 Safari budget fence (no
+       steady-state re-blur). The weld sets `[data-morphing]` on the host (or the consumer
+       does). The filter id is the consumer's tuned instance off the ONE <GooFilter> mount
+       (`url(#glass-goo)` / `url(#pager-goo)` / `url(#dock-morph-goo)` / `url(#morph-goo)`),
+       passed via `--morph-goo-filter`. The REGULAR filter property (Safari-correct). */
+    [data-morphing].morph-field,
+    [data-morphing] .morph-field {
+        filter: var(--morph-goo-filter, url(#morph-goo));
+    }
+
+    /* A morph BODY — a warm-cream domed-droplet mass the weld translates/squashes. The fill
+       is the SAME six-layer warm-glass register the whole library reads (NEVER gray — the
+       transparent-plate bug the showcase had is exactly this fill being absent). The
+       transform is written INLINE by the weld (translate + scale); this sheet supplies the
+       resting silhouette + fill + the cast. */
+    .morph-body {
+        position: absolute;
+        border-radius: 999px;
+        /* the warm-cream domed droplet — a soft radial so the goo threshold reads a domed
+           mass, not a flat slab; transmissive (~0.55-0.80 α) so the colorful field reads
+           THROUGH it. Reads the shared --glass-* cohort (warm-cream identity, both modes). */
+        background: radial-gradient(
+            120% 120% at 50% 38%,
+            var(--glass-bg-floating, color-mix(in oklab, var(--card), white 8%)) 0%,
+            var(--glass-bg-resting, var(--card)) 62%,
+            color-mix(in oklab, var(--card), var(--foreground) 6%) 100%
+        );
+        /* a 1px inner catch-light rim (the §3 defined edge) — the crisp metaball rim. */
+        box-shadow: inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent);
+        overflow: clip;
+        transform-origin: center;
+        will-change: transform;
+    }
+
+    /* The welling NECK — the concave-throat filament between the two outermost bodies. Its
+       girth WELLS on `--morph-neck-girth` (peak mid, ~0 at the ends → no ghost throat at
+       rest) and its clip-path carves the structural hourglass waist (the Tier-C floor, both
+       engines, BEFORE the filter fuses it). The weld writes its transform inline (translate
+       + scaleX span + scaleY girth); this sheet supplies the fill + the waist clip + the
+       specular sweep. */
+    .morph-neck {
+        position: absolute;
+        border-radius: 999px;
+        background: radial-gradient(
+            130% 130% at 50% 40%,
+            var(--glass-bg-floating, color-mix(in oklab, var(--card), white 8%)) 0%,
+            var(--glass-bg-resting, var(--card)) 70%,
+            color-mix(in oklab, var(--card), var(--foreground) 6%) 100%
+        );
+        /* THE CONCAVE WAIST — the clip-path hourglass pinches the throat toward the
+           centerline as the gap-fraction k narrows (the structural local-minimum waist read
+           on BOTH engines before the blur). The inset GROWS from the rim as the waist
+           tightens (`1 - --morph-waist`), `round 999px` so the throat is a gel capsule. */
+        --neck-pinch: calc((1 - clamp(0, var(--morph-waist, 1), 1)) * 42%);
+        clip-path: inset(var(--neck-pinch) 0 var(--neck-pinch) 0 round 999px);
+        /* the neck is visible EXACTLY while it wells (the opacity is the girth). */
+        opacity: var(--morph-neck-girth, 0);
+        transform-origin: center;
+        overflow: clip;
+        will-change: transform, clip-path, opacity;
+    }
+
+    /* THE NECK SPECULAR-SWEEP (follow-through) — a moving catch-light bending along the
+       throat as it stretches, reading the SHARED --glass-specular-core cohort (NO fork).
+       The conic angle LAGS the geometry (`--morph-specular-angle` carries the 60° trail the
+       weld writes). plus-lighter additive; a non-supporting engine degrades to a plain warm
+       overlay. */
+    .morph-neck::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: 999px;
+        pointer-events: none;
+        background: conic-gradient(
+            from var(--morph-specular-angle, 0deg) at 50% 50%,
+            transparent 0deg,
+            color-mix(
+                in srgb,
+                var(--glass-specular-core, hsl(40 35% 92%)) 55%,
+                transparent
+            ) 18deg,
+            transparent 60deg,
+            transparent 360deg
+        );
+        opacity: calc(
+            var(--glass-specular-intensity-rest, 0.12) +
+                clamp(0, var(--morph-neck-girth, 0), 1) * 0.18
+        );
+        mix-blend-mode: plus-lighter;
+        will-change: opacity;
+    }
+
+    /* THE 1940s INK CAST (solid drawing — the most ALIVE detail). A `::after` caster on the
+       FIELD that slides OPPOSITE the morph motion and DEEPENS mid-merge, pooling darkest at
+       the thinnest waist (the mass is heaviest where the neck is thinnest). On the REAL
+       `--shadow-cartoon-*` rung (never a hex, never an animated box-shadow — a compositor
+       translate of a soft radial). Gated on `--motion-weight` so PRM zeroes it. */
+    .morph-field::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        pointer-events: none;
+        border-radius: inherit;
+        /* the cast plane reads the cartoon shadow rung (the cards.css cohort) — a soft warm
+           ink pool that deepens as the waist thins. No hex; reads --shadow-color. */
+        background: radial-gradient(
+            60% 40% at 50% 60%,
+            color-mix(
+                    in srgb,
+                    var(--shadow-color, var(--foreground))
+                        calc(
+                            (18% + (1 - clamp(0, var(--morph-waist, 1), 1)) * 22%) *
+                                var(--motion-weight, 0)
+                        ),
+                    transparent
+                )
+                0%,
+            transparent 72%
+        );
+        /* slide OPPOSITE the morph — the cast trails the mass. The offset is the neck girth
+           × weight (deepest at mid-merge), on the cross axis. Compositor translate only. */
+        translate: 0
+            calc(var(--morph-neck-girth, 0) * 6px * var(--motion-weight, 0));
+        will-change: transform, background;
+    }
+
+    /* PRM (motion-canon P6 / §L5) — the goo layer drops, the neck never paints, the cast +
+       sweep are static-off; --motion-weight 0 (the :root PRM carve in scheme-motion.css)
+       already zeroes the squash/arc/cast amplitude. The morph still CONFIRMS (the weld's
+       seat() places one resting mass at the endpoint). */
+    @media (prefers-reduced-motion: reduce) {
+        [data-morphing].morph-field,
+        [data-morphing] .morph-field {
+            filter: none;
+        }
+        .morph-neck,
+        .morph-neck::after,
+        .morph-field::after {
+            display: none;
+        }
+    }
+
+    /* @supports floor — no `filter:url()` (the WebKit teardrop floor / a gap engine): the
+       clip-path hourglass waist on .morph-neck is the structural cross-engine FLOOR; the
+       bodies + the welling neck still read as a metaball via the clip-path waist alone (no
+       filter fuse). The morph degrades by SOFTENING, never to a non-morph crossfade. */
+    @supports not (filter: url("#morph-goo")) {
+        [data-morphing].morph-field,
+        [data-morphing] .morph-field {
+            filter: none;
+        }
+    }
+}