@mkbabb/glass-ui 6.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/draw-in.css

@@ -1,89 +0,0 @@
-/* draw-in.css
-   BI.W-DRAW-IN — the codified self-drawing arrival register (D-MOTION PASS-1 §2.4;
-   SUFFUSION-MAP R21). ONE named law for a hairline / divider / underline that DRAWS
-   ITSELF in — `.draw-rule` / `[data-draw-in]`.
-
-   THE LAW: a rule drawing itself NEVER overshoots past full width. Draw-in is a
-   SPATIAL channel on the NO-OVERSHOOT arrival ease `--ease-out-expo` (REUSED from the
-   §6 easing table, scheme-spring.css — never re-minted; a duplicate alias reds
-   proof:animation-coherence), categorically NOT a spring. This closes UF-G6 ("refined
-   drawing animations … codify this to not be ad-hoc … the divider draw-in is a bit
-   too bouncy. Needs smoothing.") — the ad-hoc masthead divider rode `--ease-cartoon-
-   punch` (+22% overshoot); it re-points onto this register (a rule that strikes past
-   its own end and springs back reads as jitter, not craft).
-
-   Compositor-only: the draw rides `transform: scaleX()` (the DEFAULT) OR a `clip-path:
-   inset()` wipe — NEVER `width`/`inline-size` (proof:no-layout-animation holds by
-   construction; proof:draw-in asserts the keyframes touch no reflow prop).
-
-   The clock is `--draw-in-duration = calc(<base> * var(--motion-tempo))` — the tuned
-   masthead-strike base (0.52s) co-scaled by the ONE governing `--motion-tempo` axis
-   (property-regs.css §M11) so draw-in tightens/loosens in lockstep with every other
-   motion clock (P7 one-clock). The direction anchors at the drawing edge via
-   `--draw-in-origin` (default `left`); a delay stages a strike via `--draw-in-delay`.
-
-   PRM: the base rule paints the rule at rest (`scaleX(1)` / no clip) and the animation
-   engages ONLY under `prefers-reduced-motion: no-preference`, so under reduce (and on a
-   gap engine) the rule is STATIC — the opacity is kept, `scaleX` snaps to 1, zero
-   motion frames.
-
-   The register NAMES the shared arrival law; it does NOT re-author the two hero-scale
-   draw MEMBERS — CompletionSeal's gold `--seal-draw` stroke-dashoffset wipe and
-   HandMark's `draw-on` (dashoffset / clip-path) both keep their OWN recipes; they are
-   recorded as members (the ≥2-consumer evidence) in
-   docs/tranches/BI/audit/W-DRAW-IN-REGISTER.md. */
-
-:root {
-    /* The draw-in clock — a hairline draws itself in <base> × tempo. */
-    --draw-in-duration: calc(0.52s * var(--motion-tempo));
-}
-
-/* The scaleX draw (the DEFAULT) — a rule grows from its anchored edge to full width. */
-@keyframes draw-rule-in {
-    from {
-        transform: scaleX(0);
-    }
-    to {
-        transform: scaleX(1);
-    }
-}
-
-/* The clip-path wipe (the opt-in alternate — `.draw-rule--wipe` / `[data-draw-in="wipe"]`).
-   For a rule whose own transform is load-bearing (it cannot spend `scaleX`), the reveal
-   rides a compositor-safe `clip-path: inset()` wipe on the SAME expo arrival. */
-@keyframes draw-rule-wipe {
-    from {
-        clip-path: inset(0 100% 0 0);
-    }
-    to {
-        clip-path: inset(0 0 0 0);
-    }
-}
-
-/* The RESTING rule — painted at full width. This is the static fallback on a gap engine
-   AND the PRM (reduce) end-state (the animation engages only under no-preference, so
-   under reduce the rule simply reads at scaleX(1), no motion frames). */
-.draw-rule,
-[data-draw-in] {
-    transform-origin: var(--draw-in-origin, left);
-    transform: scaleX(1);
-}
-
-@media (prefers-reduced-motion: no-preference) {
-    /* The scaleX draw — the DEFAULT register (everything that is NOT the wipe opt-in). */
-    .draw-rule:not(.draw-rule--wipe),
-    [data-draw-in]:not([data-draw-in="wipe"]) {
-        transform: scaleX(0);
-        animation: draw-rule-in var(--draw-in-duration) var(--ease-out-expo)
-            var(--draw-in-delay, 0s) both;
-    }
-
-    /* The clip-path wipe opt-in. */
-    .draw-rule--wipe,
-    [data-draw-in="wipe"] {
-        transform: none;
-        clip-path: inset(0 100% 0 0);
-        animation: draw-rule-wipe var(--draw-in-duration) var(--ease-out-expo)
-            var(--draw-in-delay, 0s) both;
-    }
-}