@mkbabb/glass-ui 4.2.0 → 6.0.0

package/dist/styles/glass/liquid-morph.css

@@ -1,850 +0,0 @@
-/*
- * liquid-morph.css — the LIQUID DOCK surfaces (BE.W-LIQUID-MORPH, WF-2 integration).
- *
- * RE-ARCHITECTED onto the SHIPPED BE library primitives. The throwaway box-scale /
- * goo-blob / data-mode spike is GONE (no dual path):
- *
- *   • EXPAND / PLAYER — the dock is a small PILL (.liquid-pill) that STAYS PILL-SIZED.
- *     The Places sheet (.liquid-sheet) / player card (.liquid-player) is a SEPARATE
- *     overlay laid out at its FULL settled rect; `useBloomUp` FLIPs it FROM the pill's
- *     rect (writing transform/opacity/filter INLINE — never a box-scale that crushes
- *     content, never a layout-property animation). This CSS supplies only the STATIC
- *     resting plates + content layout; the motion is the JS leaf's compositor transform.
- *   • ISLAND — ONE crisp .glass-floating pill (.liquid-island-host, the
- *     `.dock-fission-bridge` host) that FISSIONS. The two halves are `.dock-fission-piece`
- *     pieces; the library `fission-bridge.css` owns the translate/squish/neck (the goo
- *     stretch-thin-snap, the specular sweep, the goo-OR-glass swap). This CSS supplies
- *     only each half's resting glass plate + content. NO blob layer, NO data-mode switch.
- *
- * COMPOSITOR-ONLY (proof:no-layout-animation). This sheet animates ZERO layout property
- * — the bloom transform is written inline by `useBloomUp`; the fission translate/scale
- * lives in `fission-bridge.css`; the only @keyframes here is the eq bars (compositor
- * `scaleY`). The plates read warm-cream glass (the --glass-* ladder, both modes).
- */
-@layer components {
-    /* ── The stage IS the [data-glass-field] the bloom's 4th color channel warms.
-       `useBloomUp` writes `--glass-ambient-hue` + ramps `--glass-ambient-strength` HERE;
-       this rule re-points the EXISTING `--glass-tint-source`/`--glass-tint-strength`
-       self-engage seam toward the ambient hue so every glass plate inside the stage
-       (the bloomed sheet/player) WARMS toward the source's color as it blooms — the iOS
-       "the whole world takes on the album's color." Neutral by default (transparent hue,
-       0% strength = the no-op floor; the warm-cream identity holds). The bias is keyed
-       off the registered @property customs (so the strength ramp INTERPOLATES). ── */
-    .liquid-stage {
-        --glass-tint-source: var(--glass-ambient-hue, transparent);
-        --glass-tint-strength: var(--glass-ambient-strength, 0%);
-    }
-
-    /* ── BD.W-AMBIENT-TINT (AUGMENT 2 — widen the bias past the dock) ───────────────
-       The ambient-hue bias is GENERALIZED from the dock-only `.liquid-stage` seam to
-       EVERY glass tier rendered OVER the warm field: any `[data-paper-field]` host
-       re-points the SAME EXISTING `--glass-tint-source`/`--glass-tint-strength`
-       self-engage seam toward the sampled `--glass-ambient-hue`, so a plate over the
-       warm field WARMS toward the field/section-accent hue (the transmissive read —
-       the Maps-card transmission becomes real, not latent). This is a RE-POINT of the
-       extant seam onto a `[data-paper-field]` scope, NOT a new tint mechanism (the
-       `useGlassBackdropLuminance` histogram is already general).
-
-       The strength is BOUNDED ≤ 8% (the `--glass-ambient-strength` cascade bound,
-       sub-perceptual under the W55 `--glass-tint-strength-aa` ceiling); the field
-       itself is built in the NEXT stage — here we WIRE the bias to read
-       `[data-paper-field]` so the seam is live the instant the field mounts.
-
-       THE COMBINED-HUE CLAMP (C #1 R4): the field warmth is counted into the plate up
-       to three times (intrinsic warm fill + field-through-blur + ambient-of-that-field).
-       To keep the combined plate-over-field-plus-ambient hue inside the warm band
-       [45,88] for ALL section-accents (a violet/teal accent + warm ambient must not
-       over-rotate past WARM_HUE_HI), the ambient strength is GATED: it engages only
-       while the host has NOT already cleared the warm bar — a host that resolves a
-       warm-enough field sets `--paper-field-warm: 1` to SKIP the ambient mix (the
-       no-double-count guard). `--glass-ambient-strength-field` is the bounded ceiling
-       (≤8%); `--paper-field-warm` (default 0 = engage) is the skip flag the field
-       writes when it already clears the bar. */
-    [data-paper-field] {
-        --glass-ambient-strength-field: min(var(--glass-ambient-strength, 8%), 8%);
-        --glass-tint-source: var(--glass-ambient-hue, transparent);
-        /* engage the bounded bias UNLESS the field already clears the warm bar
-           (`--paper-field-warm: 1` → 0% = skip the ambient mix, no over-rotation). */
-        --glass-tint-strength: calc(
-            var(--glass-ambient-strength-field) * (1 - var(--paper-field-warm, 0))
-        );
-    }
-
-    /* ── The bloom SOURCE — a small glass pill. STAYS PILL-SIZED in every state (the
-       bloom FLIPs the SHEET, not the pill). At rest it shows the search field / the
-       now-playing row; while the sheet is open it fades out (the sheet IS its bloomed
-       self — they share the visual identity). ── */
-    .liquid-pill {
-        /* the de-shadcn'd real <button> — reset the UA chrome (border/appearance/font)
-           so the glass plate is the only surface; the layout/plate below is unchanged. */
-        appearance: none;
-        border: none;
-        font: inherit;
-        text-align: start;
-        position: relative;
-        z-index: 2;
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-        gap: 0.625rem;
-        block-size: 4rem;
-        min-inline-size: 18rem;
-        padding-inline: 1.25rem;
-        padding-block: 0;
-        border-radius: 2rem;
-        cursor: pointer;
-        color: var(--foreground);
-        /* the glass plate — the warm-cream floating tier (real backdrop-filter + rim).
-           BOTH legs route through `--glass-level`: the fill reads the COMPOSED
-           `--glass-bg-floating` (the `1 - (1-α)*--glass-level` recipe) and the blur reads
-           the COMPOSED `--glass-blur-floating` (`blur(radius * --glass-level) saturate()`),
-           so `prefers-reduced-transparency: reduce` (`--glass-level: 0` → solid `--card` +
-           `blur(0)`) and `prefers-contrast: more` (`0.3`) reach the plate for FREE — no
-           hardcoded `blur(...px)` that bypasses the a11y bracket. */
-        background: var(--glass-bg-floating);
-        -webkit-backdrop-filter: var(--glass-blur-floating);
-        backdrop-filter: var(--glass-blur-floating);
-        box-shadow:
-            inset 0 0 0 0.5px var(--glass-edge-light),
-            var(--shadow-floating);
-        /* the resting transition is the surface cross-fade only (color/bg/box-shadow —
-           NOT a layout property; compositor-safe). */
-        transition:
-            opacity var(--duration-fast, 150ms) var(--ease-out),
-            background var(--duration-fast, 150ms) var(--ease-out);
-    }
-    /* the focus ring is the token-first `.focus-ring` utility (composed in the SFC on the
-       un-filtered host layer — box-shadow survives the rounded clip); this rule only
-       PRESERVES the resting rim/shadow beneath the utility ring so the plate edge stays
-       lit while focused (the utility's box-shadow would otherwise replace it). */
-    .liquid-pill.focus-ring:focus-visible {
-        box-shadow:
-            var(--focus-ring-shadow),
-            inset 0 0 0 0.5px var(--glass-edge-light),
-            var(--shadow-floating);
-    }
-    /* while the sheet/player is open, the pill is the bloom ORIGIN — hide it (the bloomed
-       sheet carries the identity forward; restoring it would double the surface). */
-    .liquid-pill--hidden {
-        opacity: 0;
-        pointer-events: none;
-    }
-
-    /* ── BE.W-ALIVE-IDLE — the sub-perceptual REST breath. A barely-there scale(1↔1.012)
-       breath so the resting pill reads ALIVE (the §6 calm register — tasteful, sub-
-       perceptual, NEVER disco). Compositor-only (transform: scale), STATIC under reduce
-       (the @keyframes only attaches inside the no-preference bracket; at rest the pill
-       paints its identity scale). The breath is OFF while the bloom origin is hidden
-       (an invisible pill should not animate) — and the island variant is gated to the
-       MERGED (non-fissioning) state below so it never fights the carve transforms. ── */
-    @media (prefers-reduced-motion: no-preference) {
-        .liquid-pill:not(.liquid-pill--hidden) {
-            animation: liquid-idle-breath var(--liquid-idle-breath-duration, 6s)
-                ease-in-out infinite;
-        }
-        /* the island's crisp resting pill breathes ONLY while merged (goo OFF). The breath
-           rides the resting ::before PLATE (the crisp pill at rest), NOT the host element
-           — so it NEVER competes with the carve translate/squish the host's blob+content
-           layers carry, and it cross-fades out cleanly as the plate dissolves at t>0.
-           Gated to :not([data-fissioning]) so a split removes it at the merged endpoint
-           (the plate is already fading; the breath resumes from scale(1) on full merge). */
-        .liquid-island-host:not([data-fissioning])::before {
-            animation: liquid-idle-breath var(--liquid-idle-breath-duration, 6s)
-                ease-in-out infinite;
-        }
-    }
-    @keyframes liquid-idle-breath {
-        0%,
-        100% {
-            transform: scale(1);
-        }
-        50% {
-            transform: scale(1.012);
-        }
-    }
-    .liquid-pill-icon {
-        inline-size: 1.2rem;
-        block-size: 1.2rem;
-        flex: 0 0 auto;
-        color: var(--foreground);
-    }
-    .liquid-pill-hint {
-        flex: 1 1 auto;
-        font-size: var(--type-body, 1rem);
-        color: var(--muted-foreground);
-        white-space: nowrap;
-    }
-    .liquid-pill-trail {
-        inline-size: 1.15rem;
-        block-size: 1.15rem;
-        flex: 0 0 auto;
-        color: var(--muted-foreground);
-    }
-    /* the player pill's album thumb + meta + play */
-    .liquid-pill-album {
-        flex: 0 0 auto;
-        inline-size: 3rem;
-        block-size: 3rem;
-        border-radius: 0.5rem;
-        background: linear-gradient(
-            135deg,
-            var(--section-color-8),
-            var(--section-color-7) 55%,
-            var(--section-color-10)
-        );
-        box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--foreground) 40%, transparent);
-    }
-    .liquid-pill-meta {
-        display: flex;
-        flex: 1 1 auto;
-        flex-direction: column;
-        line-height: 1.2;
-        min-inline-size: 0;
-    }
-    .liquid-pill-title {
-        font-size: var(--type-small, 0.875rem);
-        color: var(--foreground);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    .liquid-pill-artist {
-        font-size: var(--type-caption, 0.75rem);
-        color: var(--muted-foreground);
-        white-space: nowrap;
-    }
-    .liquid-pill-play {
-        display: grid;
-        place-items: center;
-        inline-size: 2.25rem;
-        block-size: 2.25rem;
-        border-radius: 999px;
-        background: var(--glass-bg-resting);
-        color: var(--foreground);
-        flex: 0 0 auto;
-    }
-
-    /* ── VERTICAL pill — a CONTENT REFLOW (a column), NOT a display:none amputation.
-       album/icon → title → trailing control stack down the column. ── */
-    .liquid-pill[data-orientation="vertical"] {
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 0.5rem;
-        block-size: auto;
-        min-inline-size: 0;
-        inline-size: 5rem;
-        min-block-size: 14rem;
-        padding-block: 1.25rem;
-        padding-inline: 0.5rem;
-    }
-    .liquid-pill[data-orientation="vertical"] .liquid-pill-hint,
-    .liquid-pill[data-orientation="vertical"] .liquid-pill-artist {
-        font-size: var(--type-caption, 0.75rem);
-        text-align: center;
-        white-space: normal;
-    }
-    .liquid-pill[data-orientation="vertical"] .liquid-pill-meta {
-        align-items: center;
-        flex: 0 0 auto;
-        text-align: center;
-    }
-    .liquid-pill[data-orientation="vertical"] .liquid-pill-title {
-        white-space: normal;
-        text-align: center;
-    }
-
-    /* ════════════════════════════════════════════════════════════════════════════
-       THE BLOOM DESTINATIONS — the sheet + the player. Laid out at their FULL settled
-       rect (one layout solve). `useBloomUp` FLIPs them FROM the pill's rect inline
-       (transform/opacity/filter) — this CSS never animates a layout property. They are
-       absolutely-positioned over the stage, anchored to the bottom (the iOS sheet-from-
-       dock origin). The content lays out ONCE at the full size and the bloom composites.
-       ════════════════════════════════════════════════════════════════════════════ */
-    .liquid-sheet,
-    .liquid-player {
-        position: absolute;
-        inset-block-end: 2rem;
-        inset-inline: 50%;
-        translate: -50% 0;
-        z-index: 3;
-        box-sizing: border-box;
-        inline-size: 22rem;
-        max-inline-size: 88vw;
-        border-radius: var(--radius-card, 1.5rem);
-        /* the glass plate — the floating sheet tier (real backdrop-filter + rim). The fill
-           COMPOSES the element-level oklab tint (the ladder.css seam) so the stage's
-           ambient-hue bias reaches it (the substitution-vs-inheritance fix — a raw
-           `var(--glass-bg-floating)` reads the pre-substituted :root value and would NOT
-           warm; composing the tint AT the element is the documented retune path). At the
-           0%/transparent default this is byte-identical to the raw rung. */
-        background: color-mix(
-            in oklab,
-            var(--glass-bg-floating),
-            var(--glass-tint-source, transparent) var(--glass-tint-strength, 0%)
-        );
-        /* the blur routes through the COMPOSED `--glass-blur-floating` (radius *
-           --glass-level), so the a11y brackets (`prefers-reduced-transparency` → blur(0))
-           reach the bloomed sheet/player plate (no hardcoded blur bypass). */
-        -webkit-backdrop-filter: var(--glass-blur-floating);
-        backdrop-filter: var(--glass-blur-floating);
-        box-shadow:
-            inset 0 0 0 0.5px var(--glass-edge-light),
-            var(--shadow-floating);
-        overflow: hidden;
-        /* the base origin so the inline FLIP scales FROM the pill (the JS overrides
-           transform-origin per-bloom; this is the resting fallback). */
-        transform-origin: bottom center;
-    }
-
-    /* the iOS sheet GRABBER */
-    .liquid-sheet-grabber {
-        position: absolute;
-        inset-block-start: 0.6rem;
-        inset-inline-start: 50%;
-        translate: -50% 0;
-        inline-size: 2.25rem;
-        block-size: 0.3125rem;
-        border-radius: 999px;
-        background: color-mix(in oklab, var(--foreground) 20%, transparent);
-        z-index: 3;
-    }
-
-    /* ── the Places sheet body ── */
-    .liquid-sheet {
-        display: flex;
-        flex-direction: column;
-        block-size: 23rem;
-    }
-    .liquid-sheet-body {
-        flex: 1 1 auto;
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-        padding: 1.75rem 1.5rem 1rem;
-        overflow: hidden;
-    }
-    .liquid-sheet-places {
-        display: flex;
-        gap: 0.5rem;
-        justify-content: space-between;
-    }
-    .liquid-sheet-place {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 0.375rem;
-        flex: 1 1 0;
-    }
-    .liquid-sheet-place-label {
-        font-size: var(--type-caption, 0.75rem);
-        color: var(--foreground);
-        white-space: nowrap;
-    }
-    .liquid-sheet-recents {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-        margin-block-start: 0.25rem;
-    }
-    .liquid-sheet-recents-label {
-        font-family: var(--font-mono);
-        font-size: var(--type-caption, 0.75rem);
-        text-transform: uppercase;
-        letter-spacing: 0.1em;
-        color: var(--muted-foreground);
-    }
-    .liquid-sheet-recent {
-        display: flex;
-        align-items: center;
-        gap: 0.625rem;
-        text-align: start;
-        background: none;
-        border: none;
-        padding: 0;
-        cursor: pointer;
-        color: inherit;
-        font: inherit;
-    }
-    .liquid-sheet-recent-icon {
-        display: grid;
-        place-items: center;
-        inline-size: 2rem;
-        block-size: 2rem;
-        border-radius: 999px;
-        background: var(--glass-bg-resting);
-        color: var(--muted-foreground);
-        flex: 0 0 auto;
-    }
-    .liquid-sheet-recent-text {
-        display: flex;
-        flex-direction: column;
-        line-height: 1.2;
-        min-inline-size: 0;
-    }
-    .liquid-sheet-recent-name {
-        font-size: var(--type-small, 0.875rem);
-        color: var(--foreground);
-    }
-    .liquid-sheet-recent-sub {
-        font-size: var(--type-caption, 0.75rem);
-        color: var(--muted-foreground);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    /* the persistent search field at the sheet bottom — the pill's magnifier FLIPs
-       into THIS (one coherent search element, the orphan-magnifier fix). */
-    .liquid-sheet-search {
-        flex: 0 0 auto;
-        display: flex;
-        align-items: center;
-        gap: 0.625rem;
-        block-size: 4rem;
-        padding-inline: 1.25rem;
-        border-block-start: 1px solid color-mix(in oklab, var(--foreground) 9%, transparent);
-        background: color-mix(in oklab, var(--card), transparent 35%);
-        cursor: pointer;
-        color: inherit;
-        font: inherit;
-        text-align: start;
-    }
-    /* VERTICAL sheet — a narrower, taller column (the content already reflows: the
-       Places row + Recents stack down the column naturally). */
-    .liquid-sheet[data-orientation="vertical"] {
-        inline-size: 17rem;
-        block-size: 25rem;
-    }
-
-    /* ── the player card — the full Apple Music player ── */
-    .liquid-player {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 0.625rem;
-        padding: 2rem 1.5rem 1.75rem;
-        block-size: 24rem;
-    }
-    /* the Apple Music AMBIENT background — the album's own colours, blurred (the iconic
-       now-playing ambience). The FIELD ambient-hue warm (the bloom 4th channel) sits on
-       the STAGE; this is the card's own bloom-art. */
-    .liquid-player::before {
-        content: "";
-        position: absolute;
-        inset: -20%;
-        z-index: -1;
-        background:
-            radial-gradient(
-                ellipse 70% 60% at 28% 22%,
-                color-mix(in oklab, var(--section-color-8), transparent 50%),
-                transparent 72%
-            ),
-            radial-gradient(
-                ellipse 65% 55% at 78% 82%,
-                color-mix(in oklab, var(--section-color-10), transparent 55%),
-                transparent 68%
-            ),
-            radial-gradient(
-                ellipse 60% 70% at 60% 55%,
-                color-mix(in oklab, var(--section-color-7), transparent 60%),
-                transparent 64%
-            );
-        filter: blur(14px);
-        opacity: 0.55;
-        pointer-events: none;
-    }
-    .liquid-player-album {
-        flex: 0 0 auto;
-        inline-size: 8.5rem;
-        block-size: 8.5rem;
-        border-radius: 1rem;
-        background: linear-gradient(
-            135deg,
-            var(--section-color-8),
-            var(--section-color-7) 55%,
-            var(--section-color-10)
-        );
-        box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--foreground) 50%, transparent);
-    }
-    .liquid-player-title {
-        font-size: var(--type-subheading);
-        font-weight: 600;
-        color: var(--foreground);
-        text-align: center;
-    }
-    .liquid-player-artist {
-        font-size: var(--type-small, 0.875rem);
-        color: var(--muted-foreground);
-        margin-block-start: -0.375rem;
-    }
-    .liquid-player-scrubber {
-        inline-size: 100%;
-        block-size: 4px;
-        border-radius: 999px;
-        background: var(--glass-bg-resting);
-        overflow: hidden;
-        margin-block-start: 0.25rem;
-    }
-    .liquid-player-scrubber-fill {
-        display: block;
-        inline-size: 38%;
-        block-size: 100%;
-        border-radius: 999px;
-        background: var(--foreground);
-    }
-    .liquid-player-times {
-        display: flex;
-        justify-content: space-between;
-        inline-size: 100%;
-        margin-block-start: 0.3rem;
-        font-size: 0.6875rem;
-        font-variant-numeric: tabular-nums;
-        color: var(--muted-foreground);
-    }
-    .liquid-player-transport {
-        display: flex;
-        align-items: center;
-        gap: 1.5rem;
-        color: var(--foreground);
-        margin-block-start: 0.25rem;
-    }
-    .liquid-player-transport button {
-        background: none;
-        border: none;
-        padding: 0;
-        cursor: pointer;
-        color: inherit;
-        display: grid;
-        place-items: center;
-    }
-    .liquid-player-transport-play {
-        inline-size: 3rem;
-        block-size: 3rem;
-        border-radius: 999px;
-        background: var(--glass-bg-floating) !important;
-    }
-    /* VERTICAL player — the column is the player's natural layout (album → title →
-       transport already stack); just narrow it for the vertical stage. */
-    .liquid-player[data-orientation="vertical"] {
-        inline-size: 17rem;
-        block-size: 25rem;
-    }
-
-    /* ════════════════════════════════════════════════════════════════════════════
-       THE ISLAND — ONE crisp glass pill that FISSIONS. The host IS the
-       `.dock-fission-bridge` (the library recipe owns the goo-OR-glass swap + the
-       --dock-split-t/--neck-t scalars). The two halves are `.dock-fission-piece`s (the
-       library owns their translate/squish/neck). This CSS supplies ONLY:
-         • the host's resting ONE-pill glass plate (the crisp pill at rest), and
-         • each half's content layout + a resting glass face.
-       NO blob layer, NO data-mode CSS switch, NO box-scale.
-       ════════════════════════════════════════════════════════════════════════════ */
-    .liquid-island-host {
-        /* the de-shadcn'd real <button> — reset the UA chrome (the host has no plate of
-           its own; the ::before is the resting glass, the bridge holds the goo). */
-        appearance: none;
-        border: none;
-        padding: 0;
-        font: inherit;
-        text-align: start;
-        background: none;
-        color: var(--foreground);
-        position: relative;
-        z-index: 2;
-        box-sizing: border-box;
-        inline-size: 19rem;
-        block-size: 3.75rem;
-        cursor: pointer;
-        border-radius: 1.875rem;
-    }
-    /* the ONE crisp glass pill at REST is the host's ::before PLATE (NOT the host's own
-       opacity — fading the host element would hide its children: the blob + content
-       layers). Real backdrop-filter + rim. The plate DISSOLVES as the split rises (the
-       goo-OR-glass swap — the solid blob layer fades IN over the bridge goo while THIS
-       plate fades out). Compositor-safe: an opacity cross-fade on the ::before keyed off
-       the inheriting --dock-split-t (gone by t≈0.3), never a layout animation. */
-    .liquid-island-host::before {
-        content: "";
-        position: absolute;
-        inset: 0;
-        z-index: 0;
-        border-radius: inherit;
-        background: var(--glass-bg-floating);
-        /* the blur routes through the COMPOSED `--glass-blur-floating` (radius *
-           --glass-level), so the a11y brackets reach the island plate too. */
-        -webkit-backdrop-filter: var(--glass-blur-floating);
-        backdrop-filter: var(--glass-blur-floating);
-        box-shadow:
-            inset 0 0 0 0.5px var(--glass-edge-light),
-            var(--shadow-floating);
-        opacity: clamp(0, calc(1 - var(--dock-split-t, 0) * 3.2), 1);
-        pointer-events: none;
-    }
-    /* the focus ring is the token-first `.focus-ring` utility (composed in the SFC on the
-       host button — the un-filtered layer). The host has NO overflow:clip, so the
-       utility's box-shadow ring is fully visible; the goo filter lives on the descendant
-       `.liquid-island-bridge`, never on the host, so the ring is never swallowed. We do
-       NOT re-author a ::after ring here (ONE token-first ring, the no-fork discipline). */
-
-    /* WIRE the library goo mount into the bridge's `var(--dock-fission-goo-filter)`
-       swap. The .dock-fission-bridge base recipe is `position:absolute; inset:0;
-       pointer-events:none`. Here it is the FLEX layer holding the two pieces (the demo
-       lays them out; the library owns the goo + the neck + the translate/squish). The
-       goo `filter: url()` engages ONLY while the host carries [data-fissioning] (the
-       descendant `[data-fissioning] .dock-fission-bridge` rule), fusing the two piece
-       faces + their necks into ONE metaball body that carves apart. */
-    /* the goo BLOB layer — the `.dock-fission-bridge` flex host. The two SOLID blob
-       plates (the registered fission pieces) fuse + neck under the library goo. It holds
-       NO text (the goo feColorMatrix threshold would mangle it) — the content rides the
-       un-filtered .liquid-island-content layer. The base .dock-fission-bridge is
-       `inset:0` so it fills the host. */
-    .liquid-island-bridge {
-        --dock-fission-goo-filter: url(#dock-fission-goo);
-        display: flex;
-        align-items: stretch;
-        justify-content: center;
-        z-index: 1;
-    }
-    /* each blob — a SOLID metaball plate (the registered `.dock-fission-piece`, which
-       owns the translate/squish/neck). SOLID warm fill so the goo threshold passes (a
-       translucent fill gets thresholded away). At rest the two abut to form ONE pill mass
-       (the goo at rest is OFF — the crisp host plate IS the pill); fissioning, they neck
-       apart. The fill matches the warm-cream glass register at full opacity (the goo
-       needs solid alpha; the host backdrop-filter at rest carries the real translucency). */
-    .liquid-island-blob {
-        flex: 1 1 0;
-        border-radius: 1.875rem;
-        background: color-mix(in oklab, var(--card), oklch(0.75 0.066 64) 16%);
-        /* the blob layer fades IN as the carve rises (so at rest the crisp host plate is
-           the one pill; from t>0 the solid blobs are the carved + necked mass). An
-           opacity cross-fade keyed off the inheriting --dock-split-t (compositor-safe). */
-        opacity: clamp(0, calc(var(--dock-split-t, 0) * 4), 1);
-    }
-
-    /* the crisp CONTENT layer — un-filtered, ON TOP of the blob layer. It overlays the
-       host (inset:0) and tracks the blobs via the SAME inheriting --dock-split-t scalar +
-       per-half vectors. Compositor-only (translate, never a layout property). */
-    .liquid-island-content {
-        position: absolute;
-        inset: 0;
-        z-index: 2;
-        display: flex;
-        align-items: stretch;
-        justify-content: center;
-        pointer-events: none;
-        /* the resist-aware progress mirroring the library piece (the spring scalar pulled
-           back by the pointer --seam-tension so the content tracks the blob exactly). */
-        --piece-progress: clamp(
-            0,
-            calc(var(--dock-split-t, 0) - var(--seam-tension, 0)),
-            1
-        );
-        --piece-reach: var(--dock-fission-reach, 4.5rem);
-    }
-
-    /* each half — a content island. A half fills its share of the content layer (flex 1)
-       and TRANSLATES by the same (vector · reach · progress) the library blob piece uses,
-       so the crisp content tracks the goo blob exactly. NO own plate (the blob below is
-       the surface); just the readable content + a faint top rim catch-light. */
-    .liquid-island {
-        flex: 1 1 0;
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        /* the OUTER inline edge clears the pill's 1.875rem rounded corner so the ring/eq
-           content sits WITHIN the goo-blob pill at rest (no overhang past the rounded
-           edge) — the rounded end needs more clearance than the straight middle. The INNER
-           (seam) edge stays tight so the two halves read as ONE pill. The per-half rules
-           below set the inner edge to the tight 0.85rem; this is the outer default. */
-        padding-inline: 1.15rem;
-        color: var(--foreground);
-        border-radius: 1.875rem;
-    }
-    .liquid-island-content .liquid-island {
-        translate:
-            calc(var(--half-dx, 0) * var(--piece-reach) * var(--piece-progress))
-            calc(var(--half-dy, 0) * var(--piece-reach) * var(--piece-progress));
-        will-change: transform;
-    }
-    .liquid-island--timer {
-        justify-content: flex-end;
-        text-align: end;
-        /* the seam (inner) edge is the RIGHT edge — keep it tight so the two halves abut
-           as ONE pill; the LEFT (outer, rounded) edge keeps the 1.15rem clearance. */
-        padding-inline-end: 0.7rem;
-        --half-dx: -1; /* peel LEFT (matches the timer blob's --split-dx) */
-        --half-dy: 0;
-    }
-    .liquid-island--music {
-        justify-content: flex-start;
-        /* the seam (inner) edge is the LEFT edge — keep it tight. */
-        padding-inline-start: 0.7rem;
-        --half-dx: 1; /* peel RIGHT (matches the music blob's --split-dx) */
-        --half-dy: 0;
-    }
-    .liquid-island-meta {
-        display: flex;
-        flex: 1 1 auto;
-        min-inline-size: 0;
-        flex-direction: column;
-        justify-content: center;
-        gap: 0.05rem;
-        overflow: hidden;
-        white-space: nowrap;
-    }
-    .liquid-island--timer .liquid-island-meta {
-        align-items: flex-end;
-        text-align: right;
-    }
-    .liquid-island-title {
-        max-inline-size: 100%;
-        overflow: hidden;
-        font-size: 0.76rem;
-        font-weight: 650;
-        line-height: 1.15;
-        text-overflow: ellipsis;
-    }
-    .liquid-island-sub {
-        max-inline-size: 100%;
-        overflow: hidden;
-        color: var(--muted-foreground);
-        font-size: 0.64rem;
-        line-height: 1.1;
-        text-overflow: ellipsis;
-    }
-    /* the timer glyph chip */
-    .liquid-island-ring {
-        flex: 0 0 auto;
-        display: grid;
-        place-items: center;
-        inline-size: 2.35rem;
-        block-size: 2.35rem;
-        border-radius: 999px;
-        color: var(--section-color-8);
-        background: color-mix(in oklab, var(--section-color-8), transparent 82%);
-    }
-    /* the album thumbnail */
-    .liquid-island-album {
-        flex: 0 0 auto;
-        inline-size: 2.35rem;
-        block-size: 2.35rem;
-        border-radius: 0.5rem;
-        background: linear-gradient(
-            135deg,
-            var(--section-color-2),
-            var(--section-color-7) 72%
-        );
-        box-shadow: inset 0 0 0 0.5px color-mix(in oklab, white, transparent 60%);
-    }
-    /* the equalizer — compositor-safe scaleY bars (PRM gates the motion) */
-    .liquid-island-eq {
-        display: flex;
-        flex: 0 0 auto;
-        align-items: flex-end;
-        gap: 0.13rem;
-        block-size: 1.15rem;
-    }
-    .liquid-island-eq i {
-        inline-size: 0.17rem;
-        block-size: 1.15rem;
-        border-radius: 1px;
-        background: var(--section-color-7);
-        transform: scaleY(0.4);
-        transform-origin: bottom;
-    }
-    @media (prefers-reduced-motion: no-preference) {
-        .liquid-island-eq i {
-            animation: liquid-island-eq 0.9s ease-in-out infinite;
-        }
-        .liquid-island-eq i:nth-child(2) {
-            animation-delay: 0.2s;
-        }
-        .liquid-island-eq i:nth-child(3) {
-            animation-delay: 0.38s;
-        }
-        .liquid-island-eq i:nth-child(4) {
-            animation-delay: 0.1s;
-        }
-    }
-    @keyframes liquid-island-eq {
-        0%,
-        100% {
-            transform: scaleY(0.32);
-        }
-        50% {
-            transform: scaleY(1);
-        }
-    }
-
-    /* ── VERTICAL island — a CONTENT REFLOW (a column of two stacked halves), NOT a
-       display:none. Both the blob layer + the content layer stack vertically; each half
-       reflows to a column (glyph → meta) so nothing clips. The carve runs along the
-       COLUMN axis — the blob fission vectors are re-pointed to dy in the SFC, and the
-       content half-vectors are re-pointed here. ── */
-    .liquid-island-host[data-orientation="vertical"] {
-        block-size: auto;
-        inline-size: 9rem;
-        min-block-size: 12rem;
-    }
-    .liquid-island-host[data-orientation="vertical"] .liquid-island-bridge,
-    .liquid-island-host[data-orientation="vertical"] .liquid-island-content {
-        flex-direction: column;
-    }
-    .liquid-island-host[data-orientation="vertical"] .liquid-island {
-        flex-direction: column;
-        justify-content: center;
-        text-align: center;
-        gap: 0.35rem;
-        /* the vertical content is CENTRED inline (the inline edges are not the carve axis),
-           so reset to a symmetric inline padding that sits within the narrow pill; the
-           block (carve) axis carries the outer/seam clearance below. */
-        padding-inline: 0.6rem;
-        padding-block: 1rem;
-    }
-    /* the carve axis swaps to the column (dy) so the content tracks the column-peeling
-       blobs (the SFC re-points the blob fission vectors to dy in lockstep). The OUTER
-       block edge clears the rounded pill end; the SEAM (inner) block edge stays tight. */
-    .liquid-island-host[data-orientation="vertical"] .liquid-island--timer {
-        justify-content: center;
-        padding-inline-end: 0.6rem; /* reset the horizontal seam override */
-        padding-block-end: 0.6rem; /* the seam is the BOTTOM edge — tight */
-        --half-dx: 0;
-        --half-dy: -1; /* peel UP */
-    }
-    .liquid-island-host[data-orientation="vertical"] .liquid-island--music {
-        justify-content: center;
-        padding-inline-start: 0.6rem; /* reset the horizontal seam override */
-        padding-block-start: 0.6rem; /* the seam is the TOP edge — tight */
-        --half-dx: 0;
-        --half-dy: 1; /* peel DOWN */
-    }
-    .liquid-island-host[data-orientation="vertical"] .liquid-island-meta,
-    .liquid-island-host[data-orientation="vertical"] .liquid-island--timer .liquid-island-meta {
-        align-items: center;
-        text-align: center;
-    }
-    .liquid-island-host[data-orientation="vertical"] .liquid-island-title,
-    .liquid-island-host[data-orientation="vertical"] .liquid-island-sub {
-        white-space: normal;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-        .liquid-pill,
-        .liquid-sheet,
-        .liquid-player {
-            transition: none !important;
-        }
-        /* the library fission-bridge PRM block zeroes `--dock-bridge-opacity` to hide the
-           goo NECK layer — but in this composition the bridge HOLDS the island pieces, so
-           keep the bridge (and thus the seated-apart pieces) visible. The library still
-           drops the neck/specular ::before/::after (display:none) under PRM; the pieces
-           are sync-seated at their endpoint by the orchestrator (an instant cut). */
-        .liquid-island-bridge {
-            --dock-bridge-opacity: 1;
-        }
-        /* the resting host plate stays at its split-keyed opacity (the orchestrator seats
-           --dock-split-t at the endpoint, so a seated-split host plate is correctly faded
-           and a merged one is the crisp pill — no animation, the seat is instant). */
-    }
-}