@mkbabb/glass-ui 5.0.0 → 7.0.0

package/src/styles/animations.css

@@ -1,468 +0,0 @@
-/* Shared @keyframes — global animations used across projects */
-
-/* (BI.W-GLASS-DEDUP — the `floating-panel-in` entrance @keyframes retired with
-   floating-panel.css / `--animate-floating-panel-in`; FAM-9 clean break.) */
-
-/* ── Collapsible (reka-ui) ── */
-@keyframes collapsible-open {
-    from {
-        height: 0;
-        opacity: 0;
-    }
-    to {
-        height: var(--reka-collapsible-content-height);
-        opacity: 1;
-    }
-}
-
-@keyframes collapsible-close {
-    from {
-        height: var(--reka-collapsible-content-height);
-        opacity: 1;
-    }
-    to {
-        height: 0;
-        opacity: 0;
-    }
-}
-
-/* ── Tooltip entrance ── */
-@keyframes tooltip-in {
-    from {
-        opacity: 0;
-        transform: scale(0.96);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-/* ── Generic fade-in ── */
-@keyframes fade-in {
-    from {
-        opacity: 0;
-        transform: translateY(6px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* ── Scale-in ── */
-@keyframes scale-in {
-    from {
-        opacity: 0;
-        transform: scale(0.95);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-/* ── Slide-up ── */
-@keyframes slide-up {
-    from {
-        opacity: 0;
-        transform: translateY(16px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* ── Dock entrance ── */
-@keyframes dock-in {
-    from {
-        opacity: 0;
-        transform: translateY(14px) scale(0.96);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
-}
-
-/* ── Shimmer sweep (background-position for generated animation utilities) ── */
-@keyframes shimmer-sweep {
-    0% {
-        background-position: -200% 0;
-    }
-    100% {
-        background-position: 200% 0;
-    }
-}
-
-/* ── Shimmer sweep (background-position for shimmer utilities) ── */
-@keyframes shimmer {
-    0% { background-position: 250% 0; }
-    100% { background-position: -250% 0; }
-}
-
-/* ── Shake (horizontal ±4px for .shake-error) ── */
-@keyframes shake {
-    0%,
-    100% {
-        transform: translateX(0);
-    }
-    10%,
-    30%,
-    50%,
-    70%,
-    90% {
-        transform: translateX(-4px);
-    }
-    20%,
-    40%,
-    60%,
-    80% {
-        transform: translateX(4px);
-    }
-}
-
-/* ── Metal shimmer: the metal-PARAMETERIZED text/border highlight sweep ──
- * BB.W-METAL-SHIMMER — the ONE metal-agnostic sweep (the gold-only
- * `gold-shimmer-slide` RETIRED onto it — clean break, no alias). The keyframe is
- * PURE position (ZERO baked metal color): the metal hue is the recipe's job via
- * the `--metal-shimmer-color`-bound gradient (see utilities/metal.css). The SAME
- * keyframe sweeps a gold, silver, or bronze gradient depending only on the channel,
- * usable for BOTH text-clip (the `.metal-*` text register) AND border/mask (the
- * `.metal-*-border` swept RIM) — the position pass shifts whatever gradient the
- * surface paints. The `200% 0`→`-200% 0` shape carries the gold READ exactly
- * (byte-faithful to the retired `gold-shimmer-slide`). The slow `--duration-metal`
- * (6s) clock is set at the consumer (the metal recipe), not baked here. */
-@keyframes metal-shimmer-sweep {
-    0%   { background-position: 200% 0; }
-    100% { background-position: -200% 0; }
-}
-
-/* ── Sparkle sweep RETIRED (BA.W-GLASS-CAL, H2a) ──
- * The `@keyframes sparkle-sweep` + its reduced-motion stub are DELETED with the
- * disco recipe family — the `btn-audacious` ::after star (its sole consumer) is
- * gone, and the dock-tab primary tier collapsed onto the calm glass register.
- * The `Complete!` celebratory shimmer rides the metal-shimmer-sweep / shimmer
- * keyframes above, never sparkle-sweep.
- */
-
-/* ── Pulse dot bounce: dots variant of <Pulse> ──
- *
- * Three-dot loading indicator. Opacity 0.35 ↔ 1, scale 0.8 ↔ 1.2. Consumer
- * (.pulse-dot in Pulse.vue) sets duration via --pulse-duration and staggers
- * via animation-delay using --pulse-index.
- */
-@keyframes pulse-dot-bounce {
-    0%, 80%, 100% { opacity: 0.35; transform: scale(0.8); }
-    40%           { opacity: 1;    transform: scale(1.2); }
-}
-
-/* ── Pulse ring spin: ring variant of <Pulse> ──
- *
- * Continuous-rotation spinner. Consumer (.pulse-ring in Pulse.vue) sets
- * duration via --pulse-duration.
- */
-@keyframes pulse-ring-spin {
-    to { transform: rotate(360deg); }
-}
-
-/* ── Typewriter cursor blink: cursor for <TypewriterText> ──
- *
- * Hard-edged step blink (50/50 duty). Consumer (.tw-cursor--blink in
- * TypewriterText.vue) sets the 1.06s step-end timing.
- */
-@keyframes typewriter-blink {
-    0%, 50%   { opacity: 1; }
-    51%, 100% { opacity: 0; }
-}
-
-/* ── Ambient pulse: aura variant of <Pulse> ──
- *
- * Slow breathing cycle for the surface-scope `Pulse variant="aura"`.
- * Tokens at tokens.css §AMBIENT MOTION drive the duration/scale/easing
- * so consumers do not redefine the rhythm per site. The breath travels
- * from scale-min @ opacity-min → scale-max @ opacity-max → back, with
- * a 6s default cycle. The Pulse.vue scoped block consumes this keyframe
- * directly; consumer-side rules must not re-declare it.
- *
- * Reduced-motion fallback is in Pulse.vue (animation: none + static
- * mid-cycle render) — the keyframe itself doesn't gate, but it COULD
- * collapse here if a future consumer composes `ambient-pulse` outside
- * the Pulse primitive. The current contract: every aura caller goes
- * through <Pulse variant="aura">.
- */
-@keyframes ambient-pulse {
-    /* AX.W57 (P6) — the aura breath reads its OWN element-opacity range
-       (`--pulse-aura-breath-{min,max}`, 0.28↔0.42), decoupled from the
-       shared `--pulse-aura-opacity-*` skeleton-shimmer stops so the halo
-       breathes as an ambient wash, never up to the 0.95 shimmer peak.
-
-       BC.W-GLASS-GLOW-FIX (Atlas A-8 root) — the breath SCALE is driven via the
-       `--pulse-aura-breath-scale` registered custom property (a `<number>`, typed
-       in property-regs.css so it INTERPOLATES per-frame), NOT a `transform: scale()`
-       on `.pulse-aura` itself. The `.pulse-aura::before` child reads the scale; the
-       `.pulse-aura` element stays UNSCALED at `inset:0` as the `overflow: clip`
-       boundary. Scaling the CHILD (clipped by the unscaled parent) is what makes the
-       1.15× peak STAY inside the host box — scaling the clip element itself scaled the
-       clip rect too, so the radial escaped (the prior incomplete fix). The element-
-       opacity breath stays HERE (it does not change geometry). */
-    0%,
-    100% {
-        --pulse-aura-breath-scale: var(--animate-ambient-pulse-scale-min, 1);
-        opacity: var(--pulse-aura-breath-min, 0.28);
-    }
-    50% {
-        --pulse-aura-breath-scale: var(--animate-ambient-pulse-scale-max, 1.15);
-        opacity: var(--pulse-aura-breath-max, 0.42);
-    }
-}
-
-/* ── Scrim breath: gentle opacity oscillation for portaled dialog scrims ──
- *
- * Canon keyframe for the `--scrim-animation: scrim-breath 6s ease-in-out
- * infinite` shorthand that CellularWarningDialog (and any DialogContent
- * consumer that opts in) writes onto the portaled overlay via
- * `<ModalOverlay scrim-animation="…">`. The cascade rule below
- * (`[data-scrim-animation]`) consumes the shorthand; this keyframe
- * resolves the animation-name half of that shorthand.
- *
- * Amplitude is ~6% (0.92 → 0.98), slow enough to read as breath rather
- * than throb. The var() fallbacks let a consumer retune the band
- * (`--scrim-opacity-min` / `--scrim-opacity-max`) without re-declaring
- * the keyframe. Duration + easing live in the shorthand the consumer
- * writes — not here — so the rhythm stays composable.
- *
- * Reduced-motion fallback is double-gated: the cascade rule below sets
- * `animation: none` under PRM (primary gate), AND the keyframe itself
- * collapses to a flat opacity under PRM (defensive — protects future
- * consumers that compose `scrim-breath` outside `[data-scrim-animation]`).
- * Mirrors the `sparkle-sweep` PRM convention above.
- */
-@keyframes scrim-breath {
-    0%, 100% { opacity: var(--scrim-opacity-min, 0.92); }
-    50%      { opacity: var(--scrim-opacity-max, 0.98); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    @keyframes scrim-breath {
-        0%, 100% { opacity: var(--scrim-opacity-min, 0.92); }
-    }
-}
-
-/* ── Scrim animation cascade (AJ-W4-δ) ─────────────────────────────────
- *
- * reka-ui's DialogPortal teleports the overlay outside the consumer's
- * component subtree, so a consumer-side scoped `--scrim-animation`
- * declaration on a parent of `<Dialog>` never reaches the portaled
- * `<DialogOverlay>`. The publisher closes the gap: `<ModalOverlay
- * scrim-animation="…">` writes the value to the typed `--scrim-animation`
- * cascade variable on the overlay's inline style + tags the element with
- * `data-scrim-animation`, and this rule consumes the variable.
- *
- * The rule lives in animations.css (global, not scoped) precisely because
- * the portaled element sits outside any scoped-style boundary. The
- * `data-scrim-animation` attribute selector is opt-in: only overlays that
- * pass the prop receive an animation declaration, so the default scrim
- * (which relies on `tw-animate-css`'s data-state fade) stays untouched.
- *
- * The two animation grammars compose cleanly:
- *   - `[data-state]` keys the `tw-animate-css` enter/exit fade
- *     (open → fade-in, closed → fade-out)
- *   - `[data-scrim-animation]` keys this long-running scrim-breath
- *     (independent rhythm, runs while the dialog is open)
- *
- * Distinct selectors → no cascade fight. The breath plays underneath the
- * data-state fade because the latter wins via shorter-lived specificity
- * during transitions; the former resumes once the data-state transition
- * settles.
- *
- * Reduced-motion contract: PRM users retire the breath. The fallback
- * resolves to `none` via the var() default + the @media block below.
- */
-[data-scrim-animation] {
-    animation: var(--scrim-animation, none);
-}
-
-@media (prefers-reduced-motion: reduce) {
-    [data-scrim-animation] {
-        animation: none;
-    }
-}
-
-/* ── .glass-reveal EXIT (BG.W-OVERLAY-ENTER-PAINT / F5.R1) ──────────────────
- *
- * The reka-portaled-overlay (Dialog/Popover/DropdownMenu/…) EXIT MUST be a
- * @keyframes animation, NOT a CSS transition. reka-ui's `usePresence` gates the
- * unmount on `getComputedStyle(node).animationName`: it dispatches ANIMATION_OUT
- * and awaits `animationstart`/`animationend`, with NO `transitionend` path — so a
- * transition-only exit is torn down (~11ms, <1 frame) before it can paint (the
- * paint-judge FAIL: Dialog+Popover exit painted 0 frames). The Sheet exit paints
- * only because its `sheet-animate` (`animate-out`) is a keyframe reka can await;
- * this gives the `.glass-reveal` recipe (glass/reveal.css) the SAME kind.
- *
- * `glass-reveal-out` is the enter bloom REVERSED: scale 1 → (0.88 × squish),
- * opacity 1 → 0, filter blur(0) → blur — the SAME three coupled channels, on the
- * no-overshoot `--ease-out` clock (a closing surface must never overshoot past
- * gone, §6/W-MOTION-CANON P2). NO `translate` (the base/Dialog has none; a side
- * popover's slide-out stays a transition — a different property that coexists,
- * never clobbering a center Dialog's `-translate-x-1/2 -translate-y-1/2`). The
- * `to` values MIRROR the `.glass-reveal[data-state="closed"]` static end-state so
- * a non-supporting engine still lands correctly. Compositor-only (scale/opacity/
- * filter — the proof:no-layout-animation floor). The custom-property `var()`s
- * resolve on the animated `.glass-reveal` element (they are declared on its base
- * rule). */
-@keyframes glass-reveal-out {
-    from {
-        scale: 1 1;
-        opacity: 1;
-        filter: blur(0);
-    }
-    to {
-        scale: calc(var(--glass-reveal-enter-scale, 0.88) * var(--lq-stretch-x, 1.06))
-            calc(var(--glass-reveal-enter-scale, 0.88) * var(--lq-stretch-y, 0.945));
-        opacity: 0;
-        filter: blur(var(--glass-reveal-blur, 4px));
-    }
-}
-
-/* The reduced-motion EXIT — fade ONLY (no transform/blur frames, the vestibular
- * floor, WCAG 2.3.3). Still a keyframe reka can await (a transition-only fade
- * would be torn down the same way, and the surface would vanish rather than fade),
- * so the fade PAINTS under `prefers-reduced-motion: reduce`. The reveal.css PRM
- * carve swaps `animation-name` to this while snapping scale/translate/filter to
- * their endpoints. */
-@keyframes glass-reveal-out-reduced {
-    from {
-        opacity: 1;
-    }
-    to {
-        opacity: 0;
-    }
-}
-
-/* ── §TOP-LAYER ENTRY/EXIT (AQ.W5 §Design 2) ───────────────────────────────
- *
- * A pure-CSS entry/exit grammar for NATIVE top-layer surfaces — `[popover]`
- * elements and native `<dialog>` — keyed off `:popover-open` / `dialog[open]`,
- * plus a glass `::backdrop`. This replaces the per-frame inline-style entry the
- * platform now owns: `@starting-style` + `transition` + `transition-behavior:
- * allow-discrete` + `overlay`.
- *
- * SCOPE: this applies ONLY to elements tagged `.glass-top-layer`. It does NOT
- * touch reka-ui's portaled overlays — those keep their `tw-animate-css`
- * data-state fade (distinct selectors, no cascade fight, mirroring the
- * `[data-scrim-animation]` discipline above). `DialogContent`'s `spring` opt-in
- * (`useSpringMount`) is also untouched — a legitimate iOS-physics variant, not a
- * duplicate of this fade.
- *
- * Baseline: `@starting-style` = Widely Available; `transition-behavior:
- * allow-discrete` + `overlay` = Newly Available → adopt natively, gate the
- * whole grammar on `@supports (overlay: auto)`. A non-supporting engine shows
- * the element instantly (acceptable for a native top-layer surface; glass-ui
- * ships no JS top-layer coordinator — that is reka-ui Dialog's remit).
- *
- * Uses `scale:` (the longhand) not `transform: scale()` so it composes with the
- * identity-base transform work and does not mint a stacking context. Every
- * visual axis reads a `--top-layer-*` token (tokens.css §20).
- */
-@supports (overlay: auto) {
-    /* Base (closed / exit) + the transition list. `allow-discrete` MUST come
-     * after the property longhands, never negated. */
-    .glass-top-layer[popover],
-    dialog.glass-top-layer {
-        opacity: 0;
-        scale: var(--top-layer-enter-scale, 0.96);
-        /* BB.W-LIQUID-REVEAL — the coupled blur-settle decongest (the iOS
-           "light-bending modulation" arrival). The surface's OWN pixels decongest
-           `filter: blur(--top-layer-enter-blur)` → `blur(0)` AS it blooms (a `filter`
-           radius interp is compositor-safe; it rides the surface's pixels, so it does
-           NOT fight the resting glass-tier `backdrop-filter` plate blur — the
-           REVEAL-TOPLAYER-NO-BLUR fix, the twin of the `.glass-reveal` recipe's blur
-           leg, glass/reveal.css). */
-        filter: blur(var(--top-layer-enter-blur, 4px));
-        transition-property: opacity, scale, filter, display, overlay;
-        /* BI.W-REGISTER-TABLE — the FOURTH register RETIRED: the native `.glass-top-layer`
-           @starting-style enter is FOLDED onto the `enter-overlay` register bundle (the
-           SAME register the reka portaled overlays ride via `.glass-reveal` — one enter
-           grammar, no fourth recipe). It gains the register CLOCK (`--enter-overlay-clock`
-           = the parity-fixed --spring-snappy-duration) + spring (`--enter-overlay-spring`);
-           the scale/blur re-point to the register via the `--top-layer-enter-*` tokens
-           (scroll-tokens.css). The prior BA.W-GLASS-CAL bouncy-own-clock is superseded —
-           the native dialog/popover enter now matches the reka Dialog enter. The blur
-           decongest keeps the no-overshoot `--ease-out` (EFFECTS), the scale the register
-           spring (SPATIAL) — the W-MOTION-CANON split. HoverPopover (the live consumer)
-           re-points onto the register by inheriting the folded recipe. */
-        transition-duration: var(--enter-overlay-clock),
-            var(--enter-overlay-clock), var(--enter-overlay-clock),
-            var(--enter-overlay-clock), var(--enter-overlay-clock);
-        transition-timing-function: var(--enter-overlay-spring), var(--enter-overlay-spring),
-            var(--ease-out), linear, linear;
-        transition-behavior: allow-discrete;
-    }
-
-    /* Open state + `@starting-style` entry (starting-style AFTER the open
-     * selector so the entry interpolates from the closed values). */
-    .glass-top-layer[popover]:popover-open,
-    dialog.glass-top-layer[open] {
-        opacity: 1;
-        scale: 1;
-        filter: blur(0);
-        @starting-style {
-            opacity: 0;
-            scale: var(--top-layer-enter-scale, 0.96);
-            filter: blur(var(--top-layer-enter-blur, 4px));
-        }
-    }
-
-    /* Glass backdrop — blur + dim, animated discretely. `::backdrop` only
-     * exists for `showModal()` dialogs, NOT `[popover]` (popovers are
-     * non-modal — correct, no scrim). */
-    dialog.glass-top-layer::backdrop {
-        /* AZ.W-ADAPTIVE-AUTO A5-1 — the modal-scrim dim is the house alpha-derivative
-           `color-mix(in srgb, var(--background) Npct, transparent)`, NOT the invalid
-           `hsl(var(--background) / α)` double-wrap (`--background` is a complete
-           `hsl()` color = `hsl(48 12% 98%)`, so `hsl(hsl(…)/α)` evaluates to nothing
-           and the dim silently did not paint). The `in srgb` axis only — the
-           `--surface-tint-*` house family + the `in oklab` glass tint axis are
-           untouched. */
-        background-color: color-mix(in srgb, var(--background) 0%, transparent);
-        backdrop-filter: blur(var(--top-layer-backdrop-blur, 8px));
-        transition: display var(--duration-normal) allow-discrete,
-                    overlay var(--duration-normal) allow-discrete,
-                    background-color var(--duration-normal) var(--ease-standard);
-    }
-    dialog.glass-top-layer[open]::backdrop {
-        background-color: color-mix(
-            in srgb,
-            var(--background) calc(var(--top-layer-backdrop-dim, 0.5) * 100%),
-            transparent
-        );
-        /* SCRIM COUPLES TO LAUNCH (BG.W-OVERLAY-ENTER-PAINT / F5.R1) — the ENTER dim
-           rides its OWN launch-coupled clock (`--top-layer-backdrop-in`, a fast
-           no-overshoot `--ease-out`) so the scrim reaches ≥80% of its target dim
-           within ~100ms of launch, coupled to the panel window rather than trailing
-           the panel on the slower `--duration-normal`/`--ease-standard` clock (the
-           HEAD defect: the scrim decoupled + dimmed over ~400ms AFTER the panel
-           seated). This ENTER transition is read from the [open] after-change state;
-           the base `::backdrop` transition stays the EXIT clock — released cleanly
-           WITH the panel, no overshoot past gone. The `@starting-style` from-state
-           makes the dim interpolate from transparent (the discrete allow-discrete
-           display/overlay legs stay). */
-        transition: display var(--top-layer-backdrop-in, 0.15s) allow-discrete,
-                    overlay var(--top-layer-backdrop-in, 0.15s) allow-discrete,
-                    background-color var(--top-layer-backdrop-in, 0.15s) var(--ease-out);
-        @starting-style {
-            background-color: color-mix(in srgb, var(--background) 0%, transparent);
-        }
-    }
-}
-
-/* Reduced-motion carve — flatten the scale to a fade, shorten the duration. */
-@media (prefers-reduced-motion: reduce) {
-    .glass-top-layer[popover],
-    dialog.glass-top-layer {
-        scale: none;
-        transition-duration: var(--duration-fast);
-    }
-}

package/src/styles/card-scroll.css

@@ -1,189 +0,0 @@
-/* ─────────────────────────────────────────────────────────────────────────────
- * card-scroll.css — the EXTERNALIZED <CardHeader shrink> scroll-choreography
- * (BG.W-SCROLL-SHRINK-UNIFY — the card scroll-shrink lifted out of the
- * CardHeader.vue <style scoped> block into ONE global, un-hashed home).
- *
- * WHY EXTERNAL (the encapsulation restore): the choreography WAS a scoped SFC
- * block whose @keyframes names were Vue-scope-HASHED and whose slotted-content
- * lanes needed the :slotted() escape. Externalized here it is un-hashed AND
- * reaches the light-DOM slotted <CardTitle>/<CardDescription> via a PLAIN
- * descendant selector (a GLOBAL file carries no data-v-… scope hash, so the
- * plain `.card-header--shrink > [data-slot=…]` is the CORRECT form — it matches
- * the slotted child with no hash to require).
- *
- * THE DRY FOLD (the UNIFY): the lane-2 title SCALE leg is shared with the
- * page/hero large-title collapse (demo/stories/story-hero.css) via ONE
- * @keyframes title-collapse — the card supplies --title-collapse-scale: 0.695
- * (= --card-title-shrink-ratio), the page/hero supply 0.82. Only the SCALE leg
- * is shared (a byte-identical scale-only keyframe); the hero keeps its OWN
- * translate leg (story-hero-shrink-lift). NOT "one keyframe family" — one shared
- * scale keyframe + per-surface translate.
- *
- * COMPOSITOR-ONLY (BB.W-CARD-COMPOSITE — the proof:no-layout-animation floor):
- * every lane animates scale / transform / opacity ONLY — ZERO reflow per scroll
- * frame (the A'-3 CLS 1.03 defect made structurally impossible). The scrub ease
- * is the NO-OVERSHOOT --card-shrink-ease (re-pointed OFF the retired
- * --ease-cartoon-punch — a scroll SCRUB must be monotonic; an anticipation-pop /
- * overshoot on a scrub is the §12-LAWS proportion fence: cartoon-punch belongs
- * on STATE-CHANGE beats, never a scroll scrub, and a non-monotonic curve breaks
- * the monotonic-scrub bar).
- *
- * PRM is the OUTER gate (§Scope 4): the whole
- * @supports (animation-timeline: scroll()) block sits under
- * prefers-reduced-motion: no-preference, so under reduce NO scroll animation
- * binds AT ALL and the header renders in its terminal rest state (full top
- * space, full title size, full description visibility). No JS fallback + no
- * `animation-duration: 0.01ms` stub is needed — the outer gate is the primary
- * AND complete contract.
- *
- * REQUIRED ANCESTOR: `.card-scroll-host` on the scroll-overflow ancestor (the
- * <ScrollCard> owns it) emits the --card-scroll named scroll-timeline. Without
- * that host the named timeline never emits and the choreography sits idle.
- * ───────────────────────────────────────────────────────────────────────────── */
-
-.card-header--shrink {
-    /* --card-title-shrink-ratio is the lane-2 scale ratio pinned from the resolved
-       type tokens at the default scale: --type-prose floor (18px) ÷ --type-heading
-       (25.9px) ≈ 0.695. A STATIC scalar (NEVER a per-frame font-size re-measure);
-       --type-prose is a clamp() so the ratio cannot be CSS-divided live — it is the
-       pinned reference knob. It feeds the shared @keyframes title-collapse via
-       --title-collapse-scale (a consumer whose --ui-scale moves the tokens off this
-       ratio overrides --card-title-shrink-ratio, a NAMED knob — never a fallback to a
-       font-size animation). */
-    --card-title-shrink-ratio: 0.695;
-    --title-collapse-scale: var(--card-title-shrink-ratio);
-    /* the scrub ease is NO-OVERSHOOT: a scroll scrub maps scroll → animation-progress
-       monotonically, so the timing function must be strictly monotone (the retired
-       --ease-cartoon-punch anticipation/overshoot made the title scale up-then-down
-       past a scroll point — the non-monotonic-scrub defect). */
-    --card-shrink-ease: var(--ease-out, linear);
-    /* the stuck-header backplate reads a KEYED warm-glass floating plate (the same
-       --glass-tint-* warm-admit seam the card body reads — the W55 tinted floating
-       rung). Card-LOCAL re-point of --card-header-bg (the shared shadow.css token is
-       READ-ONLY); a consumer override on the host still wins (higher specificity /
-       inline). */
-    --card-header-bg: color-mix(
-        in oklab,
-        var(--glass-bg-floating),
-        var(--glass-tint-source) var(--glass-tint-strength)
-    );
-    position: relative;
-    transform-origin: top;
-}
-
-/* lane 4 base — the stuck-header background is a scroll-driven LIFT, not a static
-   tint. A ::before BACKPLATE carries the --card-header-bg tint and fades
-   opacity: 0 → 1 on the --card-scroll timeline, so a stuck header reads transparent
-   over the body at scroll-top and lifts to the painted tint as it sticks. The
-   opacity channel is compositor-safe; the backplate sits BEHIND the slotted content
-   (z-index 0), so it never occludes the title/description. */
-.card-header--shrink::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    z-index: 0;
-    background: var(--card-header-bg);
-    opacity: 0;
-    border-radius: inherit;
-    pointer-events: none;
-}
-
-/* the slotted content sits ABOVE the scroll-driven backplate. */
-.card-header--shrink > * {
-    position: relative;
-    z-index: 1;
-}
-
-/* lane-3 base: the description is a transform-collapsible block. transform-origin:
-   top so the scaleY collapse retires it UPWARD (toward the title), not toward its
-   own center. */
-.card-header--shrink > [data-slot="card-description"] {
-    transform-origin: top;
-    will-change: transform, opacity;
-}
-
-/* ── The keyframes (un-hashed, global) — every step animates a compositor-safe
-   channel ONLY (scale / transform / opacity), the proof:no-layout-animation floor. ── */
-
-/* THE SHARED scale keyframe (BG.W-SCROLL-SHRINK-UNIFY) — the card title lane AND the
-   page/hero large-title collapse both ride this ONE keyframe, each supplying its own
-   --title-collapse-scale (card 0.695 / page-hero 0.82). The `scale:` LONGHAND (not the
-   `transform` shorthand) so it stacks independently of any per-surface `translate`
-   leg — the scroll-choreography.css `.scroll-pin` longhand idiom. transform-origin is
-   set per-consumer on the animated element (left top on the card title). */
-@keyframes title-collapse {
-    to {
-        scale: var(--title-collapse-scale, 0.82);
-    }
-}
-
-/* lane 1 — header content compress: the header content slides up via translateY so
-   the top breathing room visually compresses; the header BOX keeps its layout size
-   (no padding reflow). */
-@keyframes card-header-shrink {
-    from {
-        transform: translateY(0);
-    }
-    to {
-        transform: translateY(-0.5rem);
-    }
-}
-
-/* lane 4 — the scroll-driven header background LIFT (opacity on the backplate). */
-@keyframes card-header-bg-lift {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-/* lane 3 — description retire: opacity fade + scaleY collapse (origin top), the
-   real-estate reclaim COMPOSITED (never a grid-template-rows relayout). */
-@keyframes card-desc-shrink {
-    from {
-        opacity: 1;
-        transform: scaleY(1);
-    }
-    to {
-        opacity: 0;
-        transform: scaleY(0);
-    }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: scroll()) {
-        /* lane 1 — header content compress. */
-        .card-header--shrink {
-            animation: card-header-shrink var(--card-shrink-ease) both;
-            animation-timeline: --card-scroll;
-            animation-range: 0px 120px;
-        }
-
-        /* lane 4 — the scroll-driven header background LIFT. */
-        .card-header--shrink::before {
-            animation: card-header-bg-lift var(--card-shrink-ease) both;
-            animation-timeline: --card-scroll;
-            animation-range: 0px 120px;
-        }
-
-        /* lane 2 — title shrink-in-place via the SHARED title-collapse SCALE keyframe;
-           the text run lays out ONCE at --type-heading, the scroll-timeline only
-           composites the scale (transform-origin left top anchors the leading edge). */
-        .card-header--shrink > [data-slot="card-title"] {
-            animation: title-collapse var(--card-shrink-ease) both;
-            animation-timeline: --card-scroll;
-            animation-range: 0px 120px;
-            transform-origin: left top;
-        }
-
-        /* lane 3 — description retire (opacity fade + scaleY collapse), the faster
-           0..80px cliff (description retires before the header fully settles). */
-        .card-header--shrink > [data-slot="card-description"] {
-            animation: card-desc-shrink var(--card-shrink-ease) both;
-            animation-timeline: --card-scroll;
-            animation-range: 0px 80px;
-        }
-    }
-}