@mkbabb/glass-ui 4.2.0 → 5.0.0

package/src/styles/dock/fission-bridge.css

@@ -1,552 +0,0 @@
-/* dock/fission-bridge.css — BE.W-DOCK-FISSION + BE.W-METABALL-BRIDGE2 — the N-seam
- * stretch-and-snap goo bridge.
- *
- * THE GENERALIZATION (the no-dual-path discipline). The shipped `morph-bridge.css`
- * merges exactly TWO named plates (`--vertical`/`--horizontal`) onto ONE shared center
- * on `--dock-morph-t` — a 1→1 V↔H crossfade. That file is BYTE-UNTOUCHED (the BB
- * V↔H showcase keeps it; `proof:morph-showcase`/`proof:dock-morph-insitu` stay GREEN by
- * construction). THIS file is the sibling: the 1→N fission topology the merge bridge
- * cannot express — each detaching `.dock-fission-piece` carries its OWN goo neck (a
- * per-seam `--neck-t` scalar) that STRETCHES as the piece pulls away, THINS to a tense
- * filament, then SNAPS BACK with a `useLiquidFlex` recoil overshoot as the neck breaks.
- * The rule is `v-for`-shaped — scoped to `.dock-fission-piece`, NEVER a `--vertical`/
- * `--horizontal` hardcode (B1).
- *
- * DETERMINISM (B5 / the M5 idiom). Every animated axis below is `f(var(--neck-t))` /
- * `f(var(--dock-split-t))` (the ONE inheriting scalar the fission spring writes) or
- * `f(var(--stretch))` (the scalar's DERIVATIVE the liquid-flex squish writes) — NEVER a
- * CSS animation/transition with its own clock. A frame captured at a given `--neck-t` is
- * byte-reproducible. The `--neck-t` writer rides the SAME `SpringProgress`/`DOCK_SPRING`
- * the orchestrator owns — no second spring, no second @keyframes clock.
- *
- * COMPOSITOR-ONLY (B4 / proof:no-layout-animation). Every neck axis is `clip-path` /
- * `transform` / `scale` / `opacity` / `filter` / `--*` — ZERO animated layout property
- * (no `inline-size`/`block-size`/`inset`/`padding`/`width`/`height`). `will-change`
- * promotes the compositor channels ONLY.
- *
- * SAFARI-FIRST (B4 / §W7). The goo is the REGULAR `filter: url(#…)` property (NOT
- * `backdrop-filter: url()`, WebKit-unsupported — bug 245510); the filter mount
- * (`DockGooFilter` / fission-goo.css) declares `color-interpolation-filters="sRGB"` + a
- * GENEROUS explicit region `x=-50% width=200%` so the neck + the flying pieces never
- * clip. GOO-OR-GLASS per-frame: goo during the active neck band, crisp glass at rest,
- * swapped at the sub-perceptual `--neck-break` threshold (no pop).
- *
- * NECK SPECULAR-SWEEP FLOOR (B3 / the betters delight). The neck filament carries a
- * moving catch-light — a `--neck-specular-angle`-keyed conic sweep masked to the neck
- * band, reading the EXISTING `--specular-*`/`--glass-specular-core`/`plus-lighter`
- * cohort (the `material.css:141` idiom) — NO second specular fork, NO neck-local
- * `--mouse-x/y` writer, NO parallel color/blend. So a stretched neck reads as refractive
- * glass under tension, not a flat grey throat.
- *
- * PRM (B6 / F5). Under `prefers-reduced-motion: reduce` the bridge is removed
- * (`--dock-bridge-opacity: 0`), the necks never paint, the specular-sweep is static-OFF;
- * the orchestrator sync-seats every piece at its `to` (the JS sync-seat — no neck frames).
- */
-
-/* The fission scalars — typed INHERITING <number>/<angle> @property so a bare var()
-   INTERPOLATES the ramp rather than snapping (the --dock-morph-t/--glass-level/--scroll-t
-   precedent). `inherits: true` (the cascading-scalar idiom — the fission scope writes the
-   shared split-t/seam-tension once and every descendant piece reads it). `--neck-t`/
-   `--neck-specular-angle` are per-PIECE writes (the orchestrator writes them on each
-   piece element), so they ride the same inheriting registration but resolve per-element.
-   @property rules must precede the @layer block (a @property after a non-@import rule in
-   a file with no @import is fine; the orchestrator @imports this file AFTER the others so
-   these registrations are valid). */
-@property --dock-split-t {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 0;
-}
-
-@property --seam-tension {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 0;
-}
-
-@property --neck-t {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 0;
-}
-
-@property --neck-specular-angle {
-    syntax: "<angle>";
-    inherits: true;
-    initial-value: 0deg;
-}
-
-/* BD.W-DOCK-CORE (II.2 — F-1). The ISLAND scalars — the live split progress the second-
-   dock plate + the goo neck read, and the COHERENT placement vector (dx/dy) the whole
-   cluster + island fly along (beside = +x, above = -y, below = +y). Typed inheriting so a
-   bare var() INTERPOLATES (the --dock-split-t precedent); written on the .glass-dock-frame
-   so both the pieces (inside the dock) and the bridge (frame sibling) inherit. */
-@property --island-t {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 0;
-}
-@property --island-dx {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 1;
-}
-@property --island-dy {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 0;
-}
-
-@layer components {
-    /* The fission scope — the dock root (or the fission host) the orchestrator writes
-       `--dock-split-t`/`--seam-tension` onto. The goo `<filter>` applies to the bridge
-       host (the REGULAR filter property, NOT backdrop-filter — B4 / Safari). The goo is
-       gated to the active neck band: OFF at rest (crisp glass), ON during the neck travel,
-       swapped at the sub-perceptual `--neck-break` threshold (no pop). */
-    .dock-fission-bridge {
-        /* BD.W-DOCK-CORE (II.1) — the goo `<filter>` reference, declared on the bridge
-           base so EVERY fission bridge (the `<GlassDock split>` facility, not only the
-           liquid-playground demo's `.liquid-island-bridge`) reaches the library goo mount.
-           A consumer mounts `<DockGooFilter>` once at the app root; this token points the
-           bridge's `filter:` at that `<defs id="dock-fission-goo">`. The REGULAR `filter`
-           property (NOT backdrop-filter — Safari-correct). */
-        --dock-fission-goo-filter: url(#dock-fission-goo);
-        /* The neck-break threshold (a sub-perceptual ~0.7) past which the neck opacity
-           drops + the piece snaps (the recoil). One knob, read by every seam. */
-        --neck-break: 0.7;
-        /* The seam-give — how far `--seam-tension` THINS the neck inset (the pointer-pull
-           resist; capped LOW so the saturating tanh tension never taffy-pulls). */
-        --seam-give: 0.18;
-        /* The neck filament half-thickness at rest (the inset toward the centerline the
-           neck THINS from). Tokenized so the gel throat is one retune. */
-        --neck-filament: 42%;
-        /* BE.W-DOCK-JUBILANCE — the FLOOR-delight intensity knobs (a calm whisper, the §6
-           register — a consumer who wants no ripple/splash sets these to 0). The ripple is
-           the warm-cream specular ring's peak; the splash is the earned-gold flash's peak. */
-        --ripple-intensity: 0.5;
-        --merge-splash-intensity: 0.7;
-        /* --dock-island-reach inherits from the .glass-dock-frame[data-splittable] (the
-           common ancestor of the pieces + the island/neck), so the cluster lands exactly
-           where the island plate materializes. */
-        /* The bridge is a frame SIBLING anchored to the dock box (the frame shrink-wraps
-           the dock). It spans the dock box; the island + neck fly OUTSIDE it (overflow
-           visible — the frame has no clip). z-index keeps the island above page content. */
-        position: absolute;
-        inset: 0;
-        overflow: visible;
-        pointer-events: none;
-        z-index: 5;
-        /* GOO-OR-GLASS — the goo filter engages ONLY while the bridge is mid-fission (the
-           split scalar past the carve threshold AND below full separation). At rest the
-           filter is `none` (crisp glass); during the neck band it is the library mount.
-           The swap is keyed off `--dock-split-t` via the data-attr the orchestrator sets
-           (`[data-fissioning]`), so a static frame reads the right path. The REGULAR
-           `filter` property (NOT backdrop-filter) so it paints on WebKit. */
-        filter: none;
-        opacity: var(--dock-bridge-opacity, 1);
-        /* isolation keeps the blur/threshold scoped to the pieces, not the page behind. */
-        isolation: isolate;
-    }
-    /* When the dock is fissioning, the bridge host applies the promoted library goo. The
-       `[data-fissioning]` attr is set by the orchestrator (on the frame) past the carve
-       threshold. The goo blurs the neck + island alpha together → they read as ONE
-       metaball fusing/splitting (the Safari-correct REGULAR filter, not backdrop-filter). */
-    [data-fissioning] .dock-fission-bridge {
-        filter: var(--dock-fission-goo-filter, none);
-    }
-
-    /* ── BD.W-DOCK-CORE (II.2 — F-1, THE HEADLINE ASSEMBLY) — the goo NECK + the ISLAND ──
-       The prior build animated a scalar + goo over an EMPTY bridge while nothing detached
-       (the F-1 DECISIVE FAIL). These two REAL elements are the visible assembly: a goo NECK
-       filament stretches from the source dock edge along the placement vector, and a SECOND
-       DOCK plate (the island) materializes at the cluster's landing — beside/above/below.
-       Both ride the ONE `--island-t` scalar + the `--island-dx/dy` placement vector the
-       orchestrator writes; both are inside the goo'd bridge so they fuse as a metaball.
-       Compositor-only (transform/scale/opacity/filter) + PRM-carved. */
-
-    /* The goo NECK — a warm-cream gel filament anchored at the dock-box center, stretching
-       OUTWARD along the placement vector toward the island as `--island-t` rises, thinning
-       (scaleY) as it stretches (the metaball throat). At rest (island-t 0) it is a zero-
-       length nub (scaleX 0) — invisible. The goo filter on the bridge fuses its near end
-       into the source pill and its far end into the island → one continuous liquid neck. */
-    .dock-fission-neck {
-        position: absolute;
-        /* anchored at the dock-box CENTER; the placement vector + reach place its far end. */
-        inset: 50%;
-        inline-size: var(--dock-island-reach, 9rem);
-        block-size: 1.4rem;
-        margin-block-start: -0.7rem;
-        margin-inline-start: 0;
-        border-radius: 999px;
-        pointer-events: none;
-        /* the warm-cream gel — the SAME floating-glass register the piece neck uses (NO hue
-           injected; warm-cream identity holds). */
-        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%
-        );
-        /* GROW along the placement vector: the neck's far end travels `reach × island-t` in
-           the (dx,dy) direction; scaleX grows it from the center outward, scaleY thins it as
-           it stretches (the gel throat). transform-origin at the center so it grows OUT. */
-        --neck-len: calc(var(--island-t, 0) * 1);
-        translate:
-            calc(var(--island-dx, 1) * var(--dock-island-reach, 9rem) * var(--island-t, 0) * 0.5)
-            calc(var(--island-dy, 0) * var(--dock-island-reach, 9rem) * var(--island-t, 0) * 0.5);
-        /* orient the neck filament ALONG the placement vector — atan2() returns an <angle>
-           directly (no *1rad multiply, which would be an angle×angle type error → invalid →
-           `rotate: none`). The neck base extends along +x (inline-size), so rotating by the
-           vector angle aims it at the island (beside = 0°, below = 90°, above = -90°). */
-        rotate: atan2(var(--island-dy, 0), var(--island-dx, 1));
-        scale:
-            calc(0.04 + 0.96 * var(--neck-len))
-            calc(1 - 0.55 * clamp(0, var(--neck-len), 1));
-        transform-origin: center;
-        /* The neck blooms in early (0→0.08) and HOLDS at a faint residual once separated
-           (the metaball connection reads even at the held split — never a hard cut). */
-        opacity: calc(
-            clamp(0, var(--island-t, 0) / 0.08, 1) *
-                (0.35 + 0.65 * (1 - clamp(0, calc((var(--island-t, 0) - 0.55) / 0.45), 1)))
-        );
-        will-change: transform, opacity;
-        z-index: 0;
-    }
-
-    /* The SECOND DOCK — the island plate. A real warm-cream glass-floating surface that
-       SCALES UP from a point at the cluster's landing position (placement vector × reach),
-       carrying the detached pieces. It is the "becomes its own dock beside/above/below"
-       read (the user's A13). The six-layer glass composite (fill + rim + shadow) reads off
-       the library `.glass-floating` token cohort — NO second material recipe. */
-    .dock-fission-island {
-        position: absolute;
-        inset: 50%;
-        /* content-driven: the island shrink-wraps the migrated controls (the `#split`
-           slot) with a generous warm-cream pad — a real second dock pill. A bare island
-           (no slot) falls back to a min size so the empty plate still reads. */
-        inline-size: max-content;
-        min-inline-size: 3rem;
-        block-size: auto;
-        min-block-size: 2.6rem;
-        display: grid;
-        place-items: center;
-        padding-inline: 0.75rem;
-        padding-block: 0.5rem;
-        border-radius: var(--radius-dock, 9999px);
-        pointer-events: auto;
-        /* the warm-cream glass plate — the SAME tier the dock body reads (six-layer
-           composite via the token cohort; warm material, never gray — BA.W-NO-GRAY). */
-        background: var(--glass-bg-floating, color-mix(in oklab, var(--card), white 6%));
-        border: 1px solid var(--glass-border-floating, color-mix(in oklab, var(--foreground) 12%, transparent));
-        box-shadow:
-            0 0.5rem 1.5rem -0.5rem color-mix(in srgb, var(--shadow-color, var(--foreground)) 22%, transparent),
-            inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent);
-        /* fly along the placement vector to the landing + scale up off island-t (a small
-           overshoot-friendly pop the spring drives). The `inset: 50%` anchors the island's
-           top-left at the dock-box center, so the translate SELF-CENTERS the box (-50% -50%)
-           AND carries it along the placement vector to its landing — ONE combined translate
-           (compositor-only). transform-origin at the dock center so it BUDS OFF the pill. */
-        translate:
-            calc(-50% + var(--island-dx, 1) * var(--dock-island-reach, 9rem) * var(--island-t, 0))
-            calc(-50% + var(--island-dy, 0) * var(--dock-island-reach, 9rem) * var(--island-t, 0));
-        scale: clamp(0, calc(var(--island-t, 0) * 1.05), 1.05);
-        transform-origin: center;
-        opacity: clamp(0, calc((var(--island-t, 0) - 0.08) / 0.25), 1);
-        will-change: transform, opacity;
-        z-index: 1;
-    }
-
-    /* ── BE.W-DOCK-JUBILANCE §1 — THE FISSION RIPPLE (the FLOOR) ──────────────
-       An expanding ring of light travels the dock plate as the fission begins — the
-       outward bloom that ANNOUNCES the bud-off (the f_034 read). It is a `::before`
-       radial-gradient RING whose radius GROWS with `--dock-split-t` (a pure function of
-       the ONE scalar the fission spring writes — NO second clock, NO bespoke @keyframes),
-       `plus-lighter`-blended warm-cream (the EXISTING `--glass-specular-core` cohort —
-       NO new color), `opacity` fading at the rim. Compositor-paint ONLY — `transform:
-       scale` on the ring (the radius is the scale, NEVER an animated `width`/radius) +
-       `opacity`. The pieces detach in the ripple's wake (the ripple radius LEADS the
-       per-piece neck-t the orchestrator stages). */
-    .dock-fission-bridge::before {
-        content: "";
-        position: absolute;
-        /* A centered square anchor at the plate centroid; the ring is a radial-gradient
-           BAND scaled by the split scalar. The base footprint is small (a reserved box,
-           one layout solve); the live radius is the `transform: scale`. */
-        inset: 50%;
-        inline-size: 8rem;
-        block-size: 8rem;
-        margin-inline-start: -4rem;
-        margin-block-start: -4rem;
-        border-radius: 50%;
-        pointer-events: none;
-        z-index: 1;
-        /* The warm-cream ring — a thin annulus (transparent core, a bright band near the
-           rim, transparent past it) reading the SHARED `--glass-specular-core` (NO fork).
-           The ring is the band; the `scale` moves the band outward. */
-        background: radial-gradient(
-            circle at 50% 50%,
-            transparent 0%,
-            transparent 58%,
-            color-mix(in oklab, var(--glass-specular-core, hsl(40 35% 92%)) 70%, transparent) 76%,
-            transparent 92%
-        );
-        /* The radius IS the scale — the ring expands from a point (scale ~0.15 at split
-           onset) to the full plate as `--dock-split-t` rises (the compositor transform,
-           NEVER an animated radius/width). */
-        transform: scale(calc(0.15 + var(--dock-split-t, 0) * 1.1));
-        transform-origin: center;
-        /* The ring BLOOMS bright as the split begins then FADES at the rim — peak near the
-           onset (a `f(--dock-split-t)` envelope: bright early, gone by full separation),
-           so it ANNOUNCES the bud-off then clears. One-shot by construction (it lives on
-           the split scalar; at rest split-t=0 → opacity 0). */
-        opacity: calc(
-            var(--ripple-intensity, 0.5) *
-                4 *
-                clamp(0, var(--dock-split-t, 0), 1) *
-                clamp(0, calc(1 - var(--dock-split-t, 0)), 1)
-        );
-        /* plus-lighter (additive, HDR-clamped, Safari 16.4+) — the SAME blend the
-           material.css gleam rides; a non-supporting engine degrades to a plain warm
-           overlay (no blowout). NO second blend fork. */
-        mix-blend-mode: plus-lighter;
-        will-change: transform, opacity;
-    }
-
-    /* ── BE.W-DOCK-JUBILANCE §2 — THE MERGE-SPLASH gold-coalesce (the FLOOR, one-shot) ──
-       On the REVERSE fission (`--dock-split-t` 1→0, the N pieces merging back into ONE
-       liquid surface), the convergence point flashes a one-shot EARNED-gold splash — the
-       completion delight (a merge IS a completion event; gold is EARNED, Q2). A `::after`
-       radial-gradient flash reading `--color-gold` (the earned-gold register, NEVER a
-       phase spectrum) with the `--metal-glow-*` catch-light idiom, `opacity` 0→peak→0
-       keyed off the merge-instant (`--dock-split-t` crossing a sub-perceptual band near
-       0). GATED to `[data-merging]` so a SPLIT onset that also passes near split-t≈0 never
-       false-flashes the gold (the direction signal the orchestrator sets). Compositor-paint
-       — `scale` + `opacity` + `filter` ONLY. One-shot (no loop — the §6 calm register, the
-       completion-seal one-shot precedent). */
-    .dock-fission-bridge::after {
-        content: "";
-        position: absolute;
-        inset: 50%;
-        inline-size: 6rem;
-        block-size: 6rem;
-        margin-inline-start: -3rem;
-        margin-block-start: -3rem;
-        border-radius: 50%;
-        pointer-events: none;
-        z-index: 2;
-        /* The earned-gold flash core — reads `--color-gold` (Q2 earned-gold), a soft
-           radial that brightens the convergence point at the merge instant. */
-        background: radial-gradient(
-            circle at 50% 50%,
-            color-mix(in oklab, var(--color-gold, gold) 85%, transparent) 0%,
-            color-mix(in oklab, var(--color-gold, gold) 40%, transparent) 38%,
-            transparent 70%
-        );
-        /* The gold catch-light HALO — the EXISTING `--metal-glow-*` idiom (metal.css), a
-           drop-shadow of the gold's own hue (NO re-author — it READS the tokens). */
-        filter: drop-shadow(
-            0 0 var(--metal-glow-blur, 0.5em)
-                color-mix(
-                    in oklab,
-                    var(--color-gold, gold)
-                        calc(var(--metal-glow-opacity, 0.35) * 100%),
-                    transparent
-                )
-        );
-        /* The splash blooms-and-fades in the sub-perceptual merge band — the flash peaks
-           as `--dock-split-t` crosses the `--merge-flash-band` (~0.12) toward 0 then is
-           gone (a triangular `f(--dock-split-t)` envelope inside the band). At rest
-           (split-t = 0, the merged endpoint) the envelope is 0 → no paint. The
-           `[data-merging]` gate (below) zeroes it entirely on the SPLIT direction. */
-        --merge-flash-band: 0.12;
-        opacity: 0;
-        transform: scale(calc(0.6 + (1 - clamp(0, calc(var(--dock-split-t, 0) / var(--merge-flash-band, 0.12)), 1)) * 0.6));
-        transform-origin: center;
-        mix-blend-mode: plus-lighter;
-        will-change: transform, opacity;
-    }
-    /* The splash is LIT only on the merge direction (the orchestrator sets `[data-merging]`
-       while target<threshold mid-flight; cleared on settle + on split). The opacity is a
-       triangular peak inside the merge band: 0 at the band edge (split-t = band), peak at
-       the mid, 0 at the merged endpoint (split-t = 0) — a one-shot flash as the pieces
-       converge, gone once merged. */
-    [data-merging] .dock-fission-bridge::after {
-        opacity: calc(
-            var(--merge-splash-intensity, 0.7) *
-                clamp(
-                    0,
-                    calc(
-                        (var(--merge-flash-band, 0.12) - var(--dock-split-t, 0)) /
-                            var(--merge-flash-band, 0.12)
-                    ),
-                    1
-                ) *
-                clamp(0, calc(var(--dock-split-t, 0) / 0.02), 1)
-        );
-    }
-
-    /* A fission PIECE — a surviving control that DETACHES along its `--split-dx`/
-       `--split-dy` vector, bridged to the dock body by its OWN goo neck. The piece
-       translates off its `(dx, dy)` × `--dock-split-t` (the spring scalar MINUS the
-       pointer `--seam-tension` so a fast pull RESISTS the spring release), squishes on
-       `--stretch` (the liquid-flex recoil — volume-preserving, capped LOW), and its neck
-       necks via the `::before` clip-path filament. ZERO layout property — only
-       `transform`/`clip-path`/`opacity`/`--*` (compositor/paint), so the CDP Layout track
-       stays FLAT (proof:no-layout-animation). */
-    .dock-fission-piece {
-        position: relative;
-        /* The resist-aware progress: the spring scalar pulled back by the pointer tension
-           so a fast drag stretches the neck PAST where the spring has released (the seam
-           RESISTS, then snaps when the pointer lets go and the spring re-bases). Clamped
-           to 0..1 so a tension spike never inverts the travel. */
-        --piece-progress: clamp(
-            0,
-            calc(var(--dock-split-t, 0) - var(--seam-tension, 0)),
-            1
-        );
-        /* BD.W-DOCK-CORE (II.2 — F-1, the migration read). The source pieces are dock
-           descendants (clipped by the dock's `contain: paint`), so they CANNOT translate
-           out of the box — instead they RETRACT into the neck as the split progresses: the
-           content MIGRATES from the source pill into the sibling island (which renders the
-           same controls via the `#split` slot, ESCAPING the clip as a frame sibling). The
-           piece eases toward the dock center along its vector (a short pull-in, not a fly-
-           out) + shrinks + fades — reading as "sucked into the goo neck" — while the island
-           grows + fills. A small pull magnitude (the content leaves; the island arrives). */
-        --piece-reach: var(--dock-fission-reach, 1.4rem);
-        translate:
-            calc(var(--split-dx, 0) * var(--piece-reach) * var(--piece-progress) * 0.5)
-            calc(var(--split-dy, 0) * var(--piece-reach) * var(--piece-progress) * 0.5);
-        /* The piece SHRINKS + FADES as it retracts into the neck (the migration), then the
-           island carries it. The volume-preserving squish (`--stretch`) rides on top. */
-        scale:
-            calc(var(--stretch, 1) * (1 - 0.5 * var(--piece-progress)))
-            calc((1 / var(--stretch, 1)) * (1 - 0.5 * var(--piece-progress)));
-        opacity: calc(1 - 0.85 * var(--piece-progress));
-        will-change: transform, clip-path, opacity;
-    }
-
-    /* The per-seam goo NECK — a `::before` filament bridging the piece back to the dock
-       body. It THINS as `--neck-t` rises (the `clip-path: inset()` block insets GROW
-       toward the centerline — the BB neck-travel idiom generalized to the per-piece
-       `--neck-t`), drops opacity past `--neck-break`, and rides the goo layer's own
-       pixels (the REGULAR filter on the bridge host). A rounded-rect bridge (`round
-       999px`) so the throat reads as a gel filament, never a hard rectangle. */
-    .dock-fission-piece::before {
-        content: "";
-        position: absolute;
-        /* The neck spans from the piece back toward the dock body along the cross of the
-           travel — a centered band the clip-path necks. Reserved footprint (a one-time
-           box), the silhouette carved on the compositor. */
-        inset: 0;
-        z-index: -1;
-        border-radius: 999px;
-        /* The warm-cream gel body — the metaball throat fill (a soft radial so the goo
-           threshold reads a domed filament, not a flat slab). Reads the SAME warm-cream
-           floating-glass register morph-bridge.css uses — NO hue injected (warm-cream
-           identity holds). */
-        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%
-        );
-        overflow: clip;
-        /* The neck THINS: the block-axis inset GROWS from 0 (full neck at neck-t=0,
-           bridged) toward `--neck-filament` (a thin filament at the break) as `--neck-t`
-           rises; the pointer `--seam-tension` ADDS to the inset so a fast pull thins it
-           further (the RESIST). The `round 999px` keeps the throat a gel capsule. */
-        --neck-inset: calc(
-            var(--neck-filament) *
-                clamp(0, calc(var(--neck-t, 0) + var(--seam-tension, 0) * var(--seam-give, 0.18) * 10), 1)
-        );
-        clip-path: inset(var(--neck-inset) 0 var(--neck-inset) 0 round 999px);
-        /* The neck opacity holds full until the break threshold, then drops to gone — the
-           goo-OR-glass swap (the neck stops painting once the piece has separated). */
-        opacity: calc(
-            1 - clamp(0, calc((var(--neck-t, 0) - var(--neck-break, 0.7)) / (1 - var(--neck-break, 0.7))), 1)
-        );
-        will-change: clip-path, opacity;
-        pointer-events: none;
-    }
-
-    /* The NECK SPECULAR-SWEEP FLOOR (B3) — a moving catch-light bending along the
-       stretched filament. A SECOND `::after` layer on the piece, masked to the neck band,
-       reading the EXISTING `--specular-*`/`--glass-specular-core`/`plus-lighter` cohort
-       (the material.css:141 conic edge-sweep idiom) — NO second specular fork, NO
-       neck-local `--mouse-x/y` writer. The conic angle is the orchestrator-written
-       `--neck-specular-angle` (a function of `--neck-t` — light bends along the filament
-       as it stretches; falls back to a `--neck-t`-derived angle so it sweeps even
-       un-wired). Compositor-paint only (`opacity`/conic `background` on `plus-lighter`),
-       so a stretched neck reads as refractive glass under tension. */
-    .dock-fission-piece::after {
-        content: "";
-        position: absolute;
-        inset: 0;
-        z-index: -1;
-        border-radius: 999px;
-        pointer-events: none;
-        /* The catch-light core reads the SHARED warm-cream specular core (the
-           --glass-specular-core var the material.css cohort owns) — same color, same
-           blend, NO fork. The conic sweep brightens the filament where the angle grazes. */
-        background: conic-gradient(
-            from var(--neck-specular-angle, calc(var(--neck-t, 0) * 360deg)) at 50% 50%,
-            transparent 0deg,
-            color-mix(
-                in srgb,
-                var(--glass-specular-core, hsl(40 35% 92%)) 55%,
-                transparent
-            ) 18deg,
-            transparent 60deg,
-            transparent 360deg
-        );
-        /* The sweep is bounded to the neck filament band (the same clip the neck rides),
-           and lit ONLY while the neck is engaged (opacity coupled to the neck presence —
-           bright as it stretches, gone once it breaks). Reads the SAME --specular-intensity
-           cohort the material.css gleam reads. */
-        --neck-sweep-intensity: calc(
-            var(--glass-specular-intensity-rest, 0.12) +
-                clamp(0, var(--neck-t, 0), 1) * 0.18
-        );
-        opacity: calc(
-            var(--neck-sweep-intensity) *
-                (1 - clamp(0, calc((var(--neck-t, 0) - var(--neck-break, 0.7)) / (1 - var(--neck-break, 0.7))), 1))
-        );
-        /* plus-lighter (additive HDR-clamped, Safari 16.4+) — the SAME blend the
-           material.css gleam rides; a non-supporting engine degrades to a plain low-alpha
-           warm overlay (no blowout). NO second blend fork. */
-        mix-blend-mode: plus-lighter;
-        will-change: opacity;
-    }
-
-    /* PRM — the bridge is removed (the necks never paint), the specular-sweep static-OFF;
-       the orchestrator sync-seats every piece at its `to` (no neck frames, no recoil, no
-       sweep). The morph snaps to the fissioned/merged endpoint (the spring's
-       respectReducedMotion jumps the scalar in one frame; the orchestrator's
-       `prefersReducedMotion()` branch seats the pieces synchronously). */
-    @media (prefers-reduced-motion: reduce) {
-        .dock-fission-bridge {
-            --dock-bridge-opacity: 0;
-        }
-        /* BE.W-DOCK-JUBILANCE §4 — the jubilance delights are static-OFF under reduce: the
-           FISSION RIPPLE (bridge ::before), the MERGE-SPLASH gold-coalesce (bridge
-           ::after), and the neck specular-sweep (piece ::after) never paint; the fission
-           sync-seats every piece (the orchestrator's prefersReducedMotion() branch). The
-           gesture still CONFIRMS (the piece translates to its endpoint) — only the delight
-           motion is off (P6: the dock still fissions, no ripple/splash/sweep frames). */
-        .dock-fission-bridge::before,
-        .dock-fission-bridge::after {
-            display: none;
-        }
-        .dock-fission-piece::before,
-        .dock-fission-piece::after {
-            display: none;
-        }
-        /* The piece still TRANSLATES to its endpoint (the gesture confirms — the dock
-           still fissions), but with NO squish (the stretch stays 1 — the field tick(0) +
-           the JS seat write `--stretch: 1`). The clamp here is a defensive floor in case
-           a frame writes a non-1 stretch under reduce. */
-        .dock-fission-piece {
-            scale: 1 1;
-        }
-    }
-}