@mkbabb/glass-ui 4.0.1 → 4.2.0

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

@@ -0,0 +1,850 @@
+/*
+ * 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). */
+    }
+}