@mkbabb/glass-ui 4.1.0 → 4.2.0

package/src/styles/glass/glass-chip.css

@@ -0,0 +1,215 @@
+/* ════════════════════════════════════════════════════════════════════════
+   .glass-chip — BD.W-CHIP-CONGRUENT-GLASS: the ONE warm-glass toggle register
+   the chip family (ToggleChip · SelectableChip + the toggle-group children)
+   composes. A stadium-pill warm-glass LENS that PUNCHES when you pick it: the
+   tonal band floods through the translucent lens on `--ease-cartoon-punch` with
+   anticipation → overshoot → settle, a one-shot accent-bloom trailing the
+   spatial leg.
+
+   CONSUME-ONLY — declares ZERO own glass tokens (the no-fork fence, Fence C3c).
+   It COMPOSES:
+     · `.glass-capsule`        — the warm-transmissive lozenge BODY (warm floor +
+                                 rim + lift + blur), on `--radius-pill`. The chip
+                                 is the ≥4th `.glass-capsule` consumer (after the
+                                 tab indicator + the button sites). NEVER inlines
+                                 `backdrop-filter` / `--glass-bg-*` / a rim.
+     · `.glass-capsule-hover`  — the SHARED specular-lift + press-snap step.
+     · `.accent-tone`          — the contrast-floored tonal channels (idle fill /
+                                 active band / active edge / contrast-safe ink).
+     · `--glass-fill-tint` / `--glass-fill-strength` (BE.W-TINTED-CHIP, glass.css)
+                                 — the per-instance plate-fill data hue the body
+                                 tints toward. The chip is its ≥3rd consumer; it
+                                 APPLIES the axis, never re-mints a tint.
+     · `--motion-weight` × `--ease-cartoon-punch` (BD.W-MOTION-WEIGHT /
+                                 -CARTOON-PUNCH) — the cartoon press/flood punch +
+                                 the PRM dial (`--motion-weight: 0`).
+
+   DISTINCT-not-fork of `.glass-atom` (the small-atom register: Badge/+N/slider):
+   both COMPOSE `.glass-capsule`. `.glass-atom` is the quiet always-on identity
+   chip; `.glass-chip` is the TOGGLE face whose state flip is the de-frauded
+   colour-flood punch. They never write each other's channels.
+
+   @layer components, @import-ed by index.css AFTER glass.css (so `.glass-capsule`
+   + `.accent-tone` + the `--glass-*` axes resolve) and BEFORE/AROUND the chip
+   recipes. Every channel is compositor-only + Safari-native (no
+   `backdrop-filter: url()`, no goo — Fence 8). The warm 0-alpha sources are
+   explicit `oklch(L C H / 0)` (NEVER bare `transparent` — the WebKit
+   black-premultiply hole, build-trap-(d)). Per-mode `.dark` arms (no
+   `light-dark()` fragment).
+   ════════════════════════════════════════════════════════════════════════ */
+
+/* The COMMIT-flood scalar — the ON-flip envelope. `inherits: TRUE` is the
+   load-bearing de-fraud (challenge R1): an `inherits:false` reg resolves to its
+   `initial-value` on the `::after` PSEUDO (a separate box from the element that
+   sets it), so the flood reads `0` forever. `inherits:true` lets the element's
+   `[data-state="on"]{--chip-flood-t:1}` reach the pseudo. Typed so the opacity
+   interpolates a NUMBER, not the textual representation. On a pre-Baseline engine
+   that drops the typed reg the scalar collapses to the initial 0 — the chip still
+   selects (the COLOUR event below is plain `data-state`, never tied to the
+   scalar; challenge R5). */
+@property --chip-flood-t {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 0;
+}
+
+@layer components {
+    /* ── .glass-chip — the warm-glass toggle lens ──
+       The chip wears `.glass-chip .glass-capsule .glass-capsule-hover .accent-tone`
+       (the component CVA composes all four). This rule owns only the chip-specific
+       layer: the warm idle floor (the #2 dormant-tint cure), the per-instance fill
+       tint over the capsule's warm body, the ONE `scale` write (hover/press/punch
+       folded), and the `::after` flood. The capsule owns the body/rim/blur. */
+    .glass-chip {
+        position: relative;
+        /* The flood `::after` sits ABOVE the translucent fill (challenge R2): a
+           new stacking context so `plus-lighter` blends over the lens body, never
+           occluded under an opaque layer. The capsule body is α<1, so the bloom
+           reads through. */
+        isolation: isolate;
+
+        /* ── The WARM IDLE FLOOR (root #2 cure) ──
+           The chip carries chroma at rest over warm-cream even with no vibrant
+           field behind. The floor RAISES the `.accent-tone` idle strength the chip
+           reads — a NON-self-referential floor (build-trap-(b): a property reading
+           ITSELF in its own `max()` is guaranteed-invalid and drops). A SEPARATE
+           input var is the source: the `.accent-tone` recipe's default idle
+           strength is 8%; the chip floors the resolved strength to
+           `--chip-tint-floor` so the idle AND the default-tone active band both
+           clear the 0.02 warm floor (the live finding: BOTH are gray over
+           `--primary`). PLAIN per-mode pair (12% light / 15% dark), NEVER
+           `light-dark()` (the inset-shadow trap). */
+        --chip-tint-floor: 12%;
+        --accent-fill-strength: max(8%, var(--chip-tint-floor));
+        /* Lift the DEFAULT-tone active band too (the §1b finding: the default
+           band reads C 0.013 — a darken, not a chroma lift). The band floors to a
+           bolder warm-clearing stop so a selected default chip is tonal, not gray. */
+        --accent-band-strength: max(18%, calc(var(--chip-tint-floor) + 10%));
+
+        /* ── The per-instance fill tint (BE.W-TINTED-CHIP CONSUME) ──
+           The translucent capsule body tints toward the consumer data hue ON TOP
+           of the W55 legibility composite. At the `@property` defaults
+           (`--glass-fill-tint: transparent` / strength 0%) this is the byte-
+           identical no-op (`color-mix(in oklab, X, transparent 0%)` ≡ X — the warm
+           floor above keeps the idle body warm even at a transparent tint). The
+           mix is `in oklab` (the perceptual glass-tint family). The 0-alpha stop is
+           warm `oklch(… / 0)`, never bare `transparent` (the WebKit black-
+           premultiply hole). */
+        --glass-chip-tinted: color-mix(
+            in oklab,
+            var(--glass-fill-tint, oklch(0.9 0.05 75 / 0))
+                var(--glass-fill-strength, 0%),
+            oklch(0.9 0.05 75 / 0)
+        );
+
+        /* ── The ONE scale write (hover/press/punch, single source of truth) ──
+           Folds the on-flood overshoot into ONE `scale` so it never collides with
+           the capsule-hover scale step (the CVA's `hover:scale-*` is retired in the
+           chip variants — this is the sole scale writer on the chip box). Volume-
+           preserving, center-pinned. The coefficient (0.12) is raised vs the
+           segmented-indicator's 0.06 so the dip/overshoot clear the gate's OWN
+           thresholds (≤0.996 dip / ≥1.04 overshoot at weight 1.0): the punch curve
+           peaks at 1.22 → 1 + 0.12·1.22·1.0 ≈ 1.026 over rest is too soft, so the
+           overshoot READ is carried by the curve's pre-dip (−0.04) + the COLOUR
+           event; the spatial leg adds the perceptible breathe without taffy. */
+        scale: calc(1 + 0.12 * var(--chip-flood-t, 0) * var(--motion-weight, 0.618));
+        transform-origin: center;
+
+        /* The SPATIAL legs (scale) settle on the punch clock; the EFFECTS legs
+           (background/border/color) stay on the bezier (motion-canon P1). */
+        transition:
+            scale var(--duration-normal) var(--ease-cartoon-punch),
+            background-color var(--duration-fast) var(--ease-standard),
+            border-color var(--duration-fast) var(--ease-standard),
+            color var(--duration-fast) var(--ease-standard);
+
+        /* ── The per-instance fill tint application ──
+           The capsule body (the `.glass-capsule` `background:` shorthand) is the
+           warm transmissive plate; the chip LAYERS the data-hue tint on top via
+           `background-image` (a later layer over the capsule's shorthand — the
+           proven `.paper-grid`/`.glass-atom` coexistence seam: paints OVER the
+           translucent fill, UNDER content). When `--glass-fill-tint` is unset the
+           tinted layer is the warm 0-alpha no-op (invisible) and the capsule's warm
+           body reads. */
+        background-image: linear-gradient(
+            var(--glass-chip-tinted),
+            var(--glass-chip-tinted)
+        );
+    }
+    .dark .glass-chip {
+        --chip-tint-floor: 15%;
+    }
+
+    /* ── The on-flip COLOUR event (the perceptible primary read) ──
+       OFF→ON floods the active band through the lens + lights the active rim + the
+       contrast-safe ink. Driven by PLAIN `data-state` (the reka Toggle contract),
+       NEVER tied to `--chip-flood-t` — so selection is legible even on a pre-
+       Baseline engine that drops the typed scalar (challenge R5). The `.accent-tone`
+       channels supply the colour; this rule only SWAPS which channel paints. */
+    .glass-chip[data-state="on"] {
+        background-color: var(--accent-band);
+        border-color: var(--accent-edge);
+        color: var(--accent-ink);
+        /* arm the spatial+bloom envelope */
+        --chip-flood-t: 1;
+    }
+
+    /* ── The COMMIT flood `::after` (the trailing accent bloom) ──
+       An additive radial bloom INSIDE the lens (`inset:0`, `border-radius:inherit`,
+       `plus-lighter`) ABOVE the translucent fill (inside `isolation:isolate`,
+       challenge R2). Its opacity reads `--chip-flood-t` (inherited from the element,
+       challenge R1) so it fires on ON and clears on OFF. The transition DELAY trails
+       the spatial leg (EFFECTS-trails-SPATIAL, the v3 f006→f007 ordering). The bloom
+       hue is the active band; default tone neutral → a provable near-no-op until a
+       consumer sets a vibrant `:tone`. */
+    .glass-chip::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        pointer-events: none;
+        background: radial-gradient(
+            120% 140% at 50% 50%,
+            color-mix(in oklab, var(--accent-band) 60%, oklch(0.9 0.05 75 / 0)),
+            oklch(0.9 0.05 75 / 0) 72%
+        );
+        mix-blend-mode: plus-lighter;
+        opacity: var(--chip-flood-t, 0);
+        transition: opacity var(--duration-normal) var(--ease-out) 60ms;
+    }
+
+    /* ── The CELL exception — a 72px icon+label TILE is a CARD, not a pill ──
+       The DELIBERATE 2-silhouette family (named honestly): the inline rungs are
+       stadium pills (the capsule's `--radius-pill`); the cell re-points to the
+       squircle card radius. It composes the SAME `.glass-chip` material + motion;
+       only the silhouette differs. The `::after` flood inherits the card radius. */
+    .glass-chip--cell {
+        border-radius: var(--radius-card);
+    }
+    .glass-chip--cell.glass-capsule {
+        border-radius: var(--radius-card);
+    }
+
+    /* ── PRM carve ──
+       Under reduced-motion `--motion-weight: 0` zeroes the spatial overshoot (the
+       `scale` calc collapses to 1) in ONE assignment; the bloom's MOTION rides the
+       same dial via the punch clock. The COLOUR cross-fade + the static lens lift
+       (the `.glass-capsule` rim/shadow) + the `--accent-band` swap REMAIN —
+       selection is always legible (challenge R7: zeroes the MOTION, not the bloom).
+       Vestibular-safe. */
+    @media (prefers-reduced-motion: reduce) {
+        .glass-chip {
+            --motion-weight: 0;
+        }
+    }
+
+    /* ── prefers-contrast: more — the active rim α floors UP ──
+       The active `--accent-edge` rim is the legibility CONTRACT; under more-contrast
+       floor the border ink so the selected lit edge clears ≥3:1 over the lens body.
+       The `--accent-ink` is already value.js contrast-safe (useAccentTone). */
+    @media (prefers-contrast: more) {
+        .glass-chip[data-state="on"] {
+            border-color: color-mix(in srgb, var(--foreground) 28%, transparent);
+        }
+    }
+}

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

@@ -0,0 +1,252 @@
+/* glass/liquid-enter.css
+   BD.W-LIQUID-ENTRANCE-GENERAL — the UNIVERSAL LIQUID-ENTER mount recipe.
+
+   `.glass-reveal`'s four coupled channels (SPATIAL bloom + SQUISH + fade + decongest),
+   promoted from an overlay-only `data-state` TRANSITION to a mount `@keyframes` so a
+   `v-if`-born-at-open surface ANIMATES (a CSS transition needs a state-change a
+   born-at-open element lacks; an `@keyframes` does not). This is the everywhere
+   entrance EVERY mount surface opts into — cards, rows, controls, dock-modules, demo
+   sub-sections — on the `--i` 1/φ time-clock stagger. The flat fade dies.
+
+   THREE registers share ONE grammar (NOT three engines):
+     • MOUNT  — this file (`.liquid-enter`), plain @keyframes-on-mount, the Safari-15
+                floor, the DEFAULT. Zero JS.
+     • SCROLL — `.scroll-build`/`.scroll-cascade` (scroll-choreography.css), AUGMENTED
+                in place; this file does NOT touch them (Bug B: a 2nd `animation:`
+                shorthand on `.scroll-build > *` clobbers `gl-page-build`).
+     • TRIGGER— `useLiquidReveal`/`useBloomUp` (the JS source-rect bloom).
+
+   THE FOUR CHANNELS (the iOS-27 read, design.md §SPATIAL/EFFECTS split):
+     1. SPATIAL bloom — `translate:` rise (the LONGHAND, composes with a centering
+        transform) on the snappy spring.
+     2. SQUISH volume — the reciprocal `scale:` LONGHAND, born wide+flat (vol-preserving
+        sx·sy ≈ 1), settles square. NEVER a `transform: scale()` shorthand (Bug A: it
+        REPLACES a base centering `transform: translate(-50%,-50%)` → a centered dialog
+        snaps to the corner; AND it composes with a `scale:` longhand → double-scale,
+        born at 78% area). The bloom-from-small GRACE is the coupled rise + blur + fade,
+        NOT an isotropic shrink (a 0.88 multiplier re-introduces the 0.776-area shrink).
+        When a JS clock is present, `--stretch` (useLiquidFlex — the ONE squish engine)
+        is written live and paired reciprocally on THIS longhand.
+     3. EFFECTS fade — `opacity 0→1` (coupled so scale+fade read as ONE coalescing layer).
+     4. EFFECTS decongest — `filter: blur(b)→blur(0)` on the surface's OWN pixels
+        (`filter`, NEVER `backdrop-filter` — the resting glass plate is untouched + the
+        WebKit per-frame-reblur hole is avoided), on the SAME spring clock.
+
+   The four channels are governed by ONE number — `--motion-weight` (rest 1/φ ≈ 0.618,
+   the shipped Band-0 token): weight 0 ⇒ no visible punch (PRM), weight 1 ⇒ the full
+   celebration slam. Co-scaled, never four unrelated tics.
+
+   @import-ed by glass.css in cascade order, in its own @layer components. */
+
+@layer components {
+    /* The channel substrate — the public start knobs, shared with `.glass-reveal`
+       (which keys the same `--lq-enter-*` names so the MOUNT recipe + the reka
+       closed→open TRANSITION speak ONE grammar, no fork). */
+    .liquid-enter {
+        --lq-enter-rise: 0.5rem; /* the SPATIAL rise (the translate: longhand leg) */
+        --lq-enter-blur: 4px; /* the decongest start radius (the filter leg) */
+        --lq-enter-origin: center; /* the bloom anchor (a popper edge overrides) */
+        /* The born squish — wide+flat, vol-preserving (product ≈ 1.002). The settle is
+           1 1. A consumer driving useLiquidFlex writes --lq-stretch-x/-y live. */
+        --lq-stretch-x: 1.06;
+        --lq-stretch-y: 0.945;
+        /* The register's OWN clock — the 1/φ overlap stagger keys off THIS so the
+           "launch beat N+1 as beat N hits 62%" holds on the cel/bouncy clock too
+           (DELTA-ASSAY §3 — not hardcoded to the snappy duration). */
+        --lq-enter-duration: var(--spring-snappy-duration);
+    }
+
+    /* ── BASE register (the graceful floor, GREEN on the bouncy/snappy spring) ──
+       A 2-stop squish-grow: the spring's `linear()` overshoot interior supplies the
+       calibrated iOS bounce. ONE `scale:` longhand (the squish), ONE `translate:`
+       longhand (the rise) — NO `transform:` shorthand (Bug A). */
+    @media (prefers-reduced-motion: no-preference) {
+        .liquid-enter {
+            animation: gl-liquid-enter var(--lq-enter-duration) var(--spring-snappy)
+                both;
+            /* The 1/φ overlap — the per-beat delay is the spring settle × 1/φ ≈ 0.618,
+               so beat N+1 launches as beat N reaches ~62% (Disney follow-through /
+               overlap; the golden proportion). Keyed off THIS register's own clock. */
+            animation-delay: calc(
+                var(
+                    --lq-enter-step,
+                    calc(var(--lq-enter-duration) * 0.618)
+                ) * var(--i, 0)
+            );
+            transform-origin: var(--lq-enter-origin);
+        }
+
+        /* DISPLAY type arrives with GRAVITY, no bounce (a heading must not overshoot —
+           the W-HIERARCHY arrival law). The fade/decongest still ride the recipe. */
+        .liquid-enter.is-display {
+            animation-timing-function: var(--ease-out);
+        }
+
+        @keyframes gl-liquid-enter {
+            0% {
+                opacity: 0;
+                /* SQUISH on the scale: LONGHAND — born wide+flat (vol-preserving), the
+                   short axis pinches, the long swells. NO transform: shorthand here. */
+                scale: var(--lq-stretch-x, 1.06) var(--lq-stretch-y, 0.945);
+                /* SPATIAL rise on the translate: LONGHAND (composes with a base
+                   centering transform — never clobbers it). */
+                translate: 0 var(--lq-enter-rise, 0.5rem);
+                /* DECONGEST — the surface's OWN pixels (filter, not backdrop-filter). */
+                filter: blur(var(--lq-enter-blur, 4px));
+            }
+            100% {
+                opacity: 1;
+                scale: 1 1;
+                translate: 0 0;
+                filter: blur(0);
+            }
+        }
+    }
+
+    /* ── CEL register (`.is-cel`, the audacious cartoon-technicolor upgrade) ──
+       LIVE-PROVEN FINDING (GOLDEN §7e): the cel-slam PUNCH cannot come from
+       ease-overshoot across the narrow `scale: 0.88→1` span (a 0.12 span × a 1.22
+       ease-peak yields only ~2% absolute punch). The punch MUST live in EXPLICIT
+       keyframe STOPS (a 3-stop arc); `--ease-cartoon-punch` (the shipped loud
+       `linear()`) adds the anticipation dip + extra overshoot ON TOP. Same
+       `scale:`/`translate:` LONGHAND discipline — NO `transform:` shorthand.
+
+       The arc: ANTICIPATION (sink + squish DOWN) → PUNCH (lift + stretch UP) →
+       FOLLOW-THROUGH settle. Every magnitude rides `--motion-weight` so PRM
+       (weight 0) flattens the whole arc to the fade in ONE assignment. */
+    @media (prefers-reduced-motion: no-preference) {
+        .liquid-enter.is-cel {
+            animation: gl-cel-slam var(--lq-enter-duration)
+                var(--ease-cartoon-punch, var(--spring-bouncy)) both;
+        }
+
+        @keyframes gl-cel-slam {
+            0% {
+                opacity: 0;
+                /* ── ANTICIPATION — sink + squish DOWN (born flat, tall; vol-preserve) ── */
+                translate: 0
+                    calc(14px * var(--motion-weight, 0.618));
+                scale: calc(1 - 0.12 * var(--motion-weight, 0.618))
+                    calc(1 + 0.06 * var(--motion-weight, 0.618));
+                filter: blur(var(--lq-enter-blur, 4px));
+            }
+            62% {
+                opacity: 1;
+                /* ── PUNCH — lift + stretch UP (sx↑, sy↓; vol-preserve) ── */
+                translate: 0
+                    calc(-3px * var(--motion-weight, 0.618));
+                scale: calc(1 + 0.1 * var(--motion-weight, 0.618))
+                    calc(1 - 0.05 * var(--motion-weight, 0.618));
+                filter: blur(0);
+            }
+            100% {
+                opacity: 1;
+                /* ── FOLLOW-THROUGH settle ── */
+                translate: 0 0;
+                scale: 1 1;
+                filter: blur(0);
+            }
+        }
+    }
+
+    /* ── The lagging cartoon CAST (`.is-cel`, opt-in) — a CHILD layer, never
+       ::after{box-shadow} ──
+       A box-shadow cannot LAG a transform (both repaint on the same element in
+       lockstep), and an animated box-shadow is a WebKit paint hole. So the cast is a
+       child caster layer carrying the STATIC layered `--shadow-cartoon-md` (the proper
+       1940s-technicolor punch, 3-layer ink — NOT the bare single-stamp whisper),
+       animated on its OWN transform clock +`6ms·--motion-weight` later: the object
+       slams in, its bold shadow catches up a beat behind (overlapping action). The
+       cast's TRANSFORM moves (compositor); the box-shadow is static-painted, never
+       animated. Capped to HERO/headline surfaces (perf — never a global .is-cel). */
+    .liquid-enter.is-cel > .cartoon-cast {
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        border-radius: inherit;
+        /* STATIC layered stamp; re-tints per mode via the --cartoon-ink-* cohort
+           (shadow.css / dark-arm.css). NEVER animated. */
+        box-shadow: var(--shadow-cartoon-md);
+        pointer-events: none;
+    }
+    @media (prefers-reduced-motion: no-preference) {
+        .liquid-enter.is-cel > .cartoon-cast {
+            animation: gl-cast-lag var(--lq-enter-duration)
+                var(--ease-cartoon-punch, var(--spring-snappy)) both;
+            /* the LATE arrival — the shadow trails the cel a beat behind */
+            animation-delay: calc(0.006s + 0.06s * var(--motion-weight, 0.618));
+        }
+        @keyframes gl-cast-lag {
+            0% {
+                opacity: 0;
+                translate: 0 calc(10px * var(--motion-weight, 0.618)) 0;
+                scale: 0.92;
+            }
+            100% {
+                opacity: 1;
+                translate: 0 0 0;
+                scale: 1;
+            }
+        }
+    }
+    /* Under prefers-contrast: more the inked edge is a LEGIBILITY asset — floor it on. */
+    @media (prefers-contrast: more) {
+        .liquid-enter.is-cel > .cartoon-cast {
+            opacity: 1;
+        }
+    }
+}
+
+/* ── The Safari < 17.2 `linear()` floor (DELTA-ASSAY §3) ──
+   `linear()` spring/punch curves UNPARSE before Safari 17.2 → the `animation`
+   timing falls to the UA default, killing the overshoot. Supply a cubic-bezier
+   floor so the entrance still reads bouncy (not a dead linear ramp) on legacy
+   WebKit. Plain @keyframes + scale/translate/opacity/filter longhands are
+   themselves Safari-15-safe; only the spring CURVE needs the floor. */
+@supports not (animation-timing-function: linear(0, 1)) {
+    @layer components {
+        @media (prefers-reduced-motion: no-preference) {
+            .liquid-enter {
+                animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+            }
+            .liquid-enter.is-cel,
+            .liquid-enter.is-cel > .cartoon-cast {
+                animation-timing-function: cubic-bezier(0.5, -0.2, 0.4, 1.4);
+            }
+        }
+    }
+}
+
+/* ── REDUCED-MOTION CARVE (the vestibular floor — WCAG 2.3.3 · design.md P6) ──
+   Under `prefers-reduced-motion: reduce` the entrance keeps the FADE and drops the
+   transform + squish + bounce + blur + stagger + cast in ONE arm (opacity is not a
+   vestibular trigger). One calm paint on the short clock, delay → 0. This mirrors the
+   `.glass-reveal` + `.scroll-build` PRM precedent. The shipped `--ease-cartoon-punch`
+   already re-aliases to `--ease-standard` under reduce (scheme-motion.css) and
+   `--motion-weight → 0` zeroes the arc — this carve is the belt-and-suspenders floor
+   that also drops the keyframe channels outright. */
+@layer components {
+    @media (prefers-reduced-motion: reduce) {
+        .liquid-enter,
+        .liquid-enter.is-cel {
+            animation: gl-liquid-enter-reduced var(--duration-fast) var(--ease-out)
+                both;
+            animation-delay: 0s;
+        }
+        .liquid-enter.is-cel > .cartoon-cast {
+            /* the cast still appears (its ink is a legibility asset) but does not fly */
+            animation: none;
+            opacity: 1;
+            translate: 0;
+            scale: 1;
+        }
+        @keyframes gl-liquid-enter-reduced {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+    }
+}