@mkbabb/glass-ui 4.1.0 → 5.0.0

package/dist/styles/cards.css

@@ -1,248 +1 @@
-/* Card-feature styles — the coherent home for card surface decorations.
- * `.cartoon-card` + `.elevated-card` recipe classes were removed at C.W5 per the
- * W0 overfitting audit (Card's tier system covers both). `cartoon-surface` is the
- * Q.W3 Lane B re-model of the former `.glass-cartoon` recipe: a decoration-only
- * utility (no tier of its own), relocated here from glass.css — which now holds
- * only the 5-rung glass ladder. */
-
-@layer components {
-    /* Paper texture overlay */
-    .paper-texture {
-        background-image: var(--paper-clean-texture);
-        background-repeat: repeat;
-        background-size: var(--paper-texture-size);
-        background-blend-mode: multiply;
-    }
-
-    :where(.dark) .paper-texture {
-        background-blend-mode: screen;
-    }
-
-    /* BB.W-PAPER-GRID-TEXTURE — the GEOMETRIC sibling of `.paper-texture`.
-       Paints the two-frequency `--paper-grid-texture` engineering-grid as a
-       card's INTERIOR ground, clipped to the plate's own `border-radius`
-       automatically (a host `background-image`), so the math/grid brand pillar
-       reads THROUGH a document-register card at the ambient `--paper-grid-
-       opacity` — not only in the page margin an opaque plate occludes. A
-       decoration-only register (NOT a tier): it composes ON TOP of any glass/
-       paper tier, exactly like `.paper-texture` / `cartoon-surface` /
-       `veil-surface`.
-
-       BC.W-GRID-SIMPLE — the card-interior pitch UNIFIES onto the ONE
-       `--grid-*` rhythm source: `--paper-grid-texture-size` now reads
-       `var(--grid-pitch)` (scale-paper.css), retiring the prior 32px literal so
-       the demo page grid + this card interior share ONE pitch (the
-       two-parallel-28px/32px-systems fix). This card-interior register keeps its
-       OWN quieter ambient strength (`--paper-grid-opacity`), DISTINCT from the
-       full-bleed page-bg 3%/11% tier — a card interior reads softer than a page
-       wash. It is a host `background-image` only — NO `backdrop-filter`/`filter`
-       on this element, so the grid lines are NEVER convolved into the "blurry
-       mess" the page grid suffered (the de-blur discipline: the grid is the
-       card's own underlay, not a crisp grid read THROUGH a blurred glass plate).
-
-       THE SEAM (the two-pseudo-budget reveal, recorded — the Triumvirate's
-       through-glass-read locate-the-seam, NOT a token-α loop): a glass tier
-       already claims BOTH pseudos — `::before` is the moving-specular catch-
-       light (glass/material.css) and `::after` is the grain overlay
-       (glass/ladder.css). A `.paper-grid::after` would CLOBBER the grain's
-       `background-image` on the SAME single pseudo — so the grid + grain could
-       not compose (the orthogonality the spec requires). The grid therefore
-       rides the HOST element's `background-image` longhand: the glass tier's
-       `background:` SHORTHAND sets the translucent fill `background-color`, and
-       a later `background-image` longhand COEXISTS with that color (the image
-       paints OVER the color, UNDER the content + UNDER both pseudos), so the
-       grid is the card's own underlay felt THROUGH the glass tint with ZERO
-       pseudo contention — grain (`::after`) + specular (`::before`) + grid
-       (host bg-image) all paint at once. The host bg-image is clipped by the
-       host `border-radius` by construction (no `border-radius: inherit` pseudo
-       needed). A STATIC raster — gradient-stack `background-image`, one
-       compositor-cached paint, no per-frame repaint (the W6 paint-path
-       discipline). The ambient strength lives in the line-ink alpha (the
-       `--paper-grid-opacity`-scaled `--foreground` mix, scale-paper.css) since
-       a host bg-image has no independent layer-opacity — so ONE knob
-       (`--paper-grid-opacity`) still tunes the through-card strength. */
-    .paper-grid {
-        background-image: var(--paper-grid-texture);
-        background-repeat: repeat;
-        background-size:
-            calc(var(--paper-grid-texture-size) * 4)
-                calc(var(--paper-grid-texture-size) * 4),
-            calc(var(--paper-grid-texture-size) * 4)
-                calc(var(--paper-grid-texture-size) * 4),
-            var(--paper-grid-texture-size) var(--paper-grid-texture-size),
-            var(--paper-grid-texture-size) var(--paper-grid-texture-size);
-        background-blend-mode: multiply;
-    }
-
-    /* The scheme-aware dark arm — PLAIN-ancestor `.dark` (NOT a scoped
-       `:global()`; the recurring scoped-global-drop trap, recorded; this is a
-       library CSS partial, but the discipline holds). The line ink is
-       `--foreground`-derived, so the warm-cream foreground flips dark→light in
-       the `.dark` block and the grid ink auto-lifts off the near-black `--card`
-       interior with NO parallel `--paper-grid-*-dark` family — only the BLEND
-       flips (light `multiply` → dark `screen`, the legible-on-dark equivalent
-       the `.paper-texture` dark arm uses). */
-    :where(.dark) .paper-grid,
-    .dark .paper-grid {
-        background-blend-mode: screen;
-    }
-}
-
-/* ═══════════════════════════════════════════════
-   A11y — the geometric grid honors the SAME transparency idiom the organic
-   paper register establishes (paper.css). A reduced-transparency user gets a
-   clean card interior, no texture; the static grid needs no motion gate (the
-   PRM block guards a future drift only). One a11y idiom, not a grid-local fork.
-   ═══════════════════════════════════════════════ */
-@media (prefers-reduced-transparency: reduce) {
-    .paper-grid {
-        background-image: none;
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .paper-grid {
-        /* Static raster at rest; guard a future `@property` transform drift. */
-        animation: none !important;
-    }
-}
-
-/* ── Selection-card decoration (BC.W-SELECTION-CARD — the I5 selection card) ──────
-   The ONE new Atlas component, realized as a `<Card variant="selection">`
-   DECORATION (NOT a new SFC, NOT a new tier, NOT a new compositing seam). It
-   COMPOSES the two BUILT seams — the A-2 `--glass-accent` rim (glass/rim.css +
-   glass/material.css) + the A-3 `.metal-*-border` swept rim (utilities/metal.css)
-   — and authors ZERO competing rim/background recipe of its own. The rule is a
-   TOKEN-SUBSTITUTION on the base tier (the `.glass-opaque`/`.glass-deep` precedent):
-   it re-points the EXISTING `--glass-accent-strength` (+ an OPTIONAL sub-perceptual
-   floating-tier lift) locally; it does NOT declare a `background`/`border`.
-
-   THE RIM-NOT-FILL DISCIPLINE (the no-saturated-slab structural bar): selection is
-   read by (a) the metal rim (the `.metal-*-border` class Card composes when
-   `:selected`), (b) a BOUNDED accent-strength LIFT (unselected → selected, both ≤
-   the W-GLASS-ACCENT rim ceiling), and OPTIONALLY (c) a sub-perceptual
-   `--glass-bg-floating`-tier lift (the "selected reads as glass" register). The
-   plate STAYS warm-cream translucent — the BC.W-GLASS-IDENTITY floor is inviolate.
-   This rule NEVER writes `--glass-tint-source`/`--glass-tint-strength` (the A-2
-   distinct-axis fence — the accent is rim+glint DECORATION, not whole-plate
-   legibility) and NEVER paints a `--foreground`/`--primary`/`--surface-tint` opaque
-   plate FILL (the "selected = loud fill" anti-pattern is the disease-root the gate's
-   S3 bite reds).
-
-   THE ACCENT-STRENGTH LADDER (the bounded lift, two tokens a consumer retunes):
-     unselected → --selection-accent-strength            (~16% — a calm rim glow)
-     selected   → --selection-accent-strength-selected   (~28% — brighter at the rim,
-                  still ≤ the W-GLASS-ACCENT ceiling; the data hue reads stronger at
-                  the rim/glint, NOT a flooded plate)
-   The host (Card.vue) writes `--glass-accent` (the HUE) per-instance off `data-hue`;
-   this rule supplies the STRENGTH so the calm/selected lift is ONE source. An UNSET
-   `data-hue` leaves `--glass-accent: transparent` (the @property default), so even
-   with the strength engaged the `color-mix(in oklab, X, transparent N%)` === X — the
-   A-2 no-op floor: a `variant="selection"` card with no `data-hue` is byte-identical
-   to a bare Card. A consumer may override `--glass-accent-strength` per-instance
-   (Card.vue's `data-hue-strength`); this rule is the default. */
-[data-variant="selection"] {
-    /* The bounded accent-strength ladder — both ≤ the W-GLASS-ACCENT rim ceiling.
-       A consumer retunes the calm/selected pair from these two knobs. */
-    --selection-accent-strength: 16%;
-    --selection-accent-strength-selected: 28%;
-    /* Re-point the EXISTING accent-strength seam to the calm rung (the rim glow at
-       rest). At an unset `--glass-accent: transparent` this is a provable no-op. */
-    --glass-accent-strength: var(--selection-accent-strength);
-}
-
-[data-variant="selection"][data-selected="true"] {
-    /* SELECTED — lift the accent-strength to the brighter (still-bounded) rung. The
-       brighter rim + the `.metal-*-border` Card composes are the selection read; the
-       plate is UNTOUCHED (no background/fill here — rim-not-fill). */
-    --glass-accent-strength: var(--selection-accent-strength-selected);
-    /* OPTIONAL sub-perceptual "selected reads as glass" lift — re-point the base
-       tier's resting fill toward the floating rung (the W-REGISTER-IOS tier), a
-       TOKEN re-point, NOT a `--surface-tint` gray plate, NEVER a `--foreground`
-       brand fill. The plate stays warm-cream translucent (the floating rung is the
-       SAME warm-cream material at a heavier rung, the BC.W-GLASS-IDENTITY ladder). */
-    --glass-bg-resting: var(--glass-bg-floating, var(--glass-bg-resting));
-}
-
-/* ── Cartoon surface decoration ───────────────────────────────────
-   The Memphis-sticker register. Composes ON TOP of a glass tier — it is
-   NOT itself a tier. The former `.glass-cartoon` recipe declared
-   `var(--glass-bg-cartoon, var(--glass-bg-quiet))` etc., but the
-   `--glass-{bg,blur,border}-cartoon` tokens were never defined anywhere
-   in src/ (Qχ §2): the fall-through always resolved to the `quiet` rung.
-   That phantom-token layer is dropped — background / backdrop-filter /
-   border-color come from the `glass-${tier}` class the host already
-   applies. `cartoon-surface` carries ONLY the three real deltas over a
-   bare tier: a 2px border weight, an offset-stamp shadow, and a
-   hover-lift. <Card surface="cartoon"> layers it onto its resolved tier. */
-@utility cartoon-surface {
-    border-width: 2px;
-    box-shadow: var(--shadow-cartoon-md);
-    /* Individual-transform identity base (AQ.W3 §W3.2) — state-driven 2D lift on
-       a card surface that often hosts portaled content; `translate: 0` at rest
-       mints the stacking context once. Longhand maps `translate(x, y)` 1:1. */
-    translate: 0;
-    transition:
-        translate var(--duration-normal) var(--spring-smooth),
-        box-shadow var(--duration-normal) var(--ease-standard);
-
-    &:hover:not(:disabled) {
-        translate: var(--lift-sm) var(--lift-sm);
-        box-shadow: var(--shadow-cartoon-lg);
-    }
-}
-
-/* ── Veil surface decoration (R5-7) ──────────────────────────────
-   The text-legibility PLATE register, ratified by three slides sites (the
-   deck cover subtitle / standfirst / closer lede). Conceptually the W55
-   adaptive-legibility tint applied as a LOCAL plate: a translucent glass
-   fill + blur that darkens content-on-glass over a busy/bright backdrop so
-   text clears AA, but with the BOXED look STRIPPED — no border, no rim, no
-   highlight (the user's read: the border+rim "reads as a dividing line on a
-   text plate"). It is the `surface` sibling of `cartoon` — a decoration-only
-   utility, NOT a tier of its own.
-
-   It routes the glass MATERIAL through the `--glass-*` ladder (`--veil-bg`
-   defaults to the `quiet` rung's adaptive-tint mix, `--veil-blur` to the
-   quiet blur), so the glass-cohesion model sees a sanctioned glass register
-   (the level knob scales the blur; the W55 bright-bucket darkens the fill via
-   the same inheriting tint axis the rung already reads). What it carries on TOP
-   of a bare rung is the THREE veil deltas, each a `--veil-*` knob a consumer
-   retunes:
-
-     border  : none            (--veil-border, the dividing-line strip)
-     shadow  : none            (--veil-shadow, the rim/highlight strip)
-     feather : none (default)  (--veil-feather — an OPTIONAL radial mask that
-               fades the plate edges into the backdrop; off by default so the
-               plate is a clean rectangle, on when a consumer wants the
-               soft-edged "bleed into the page" text-plate look)
-
-   <Card surface="veil"> selects it; `--veil-bg`/`--veil-blur` ride the same
-   `--glass-*` rungs as the ladder, so one `--glass-level` / `--glass-backdrop`
-   override retunes it in lockstep with every other glass surface. */
-@utility veil-surface {
-    /* The glass material — routed through the `--glass-*` ladder so the
-       cohesion model reads a sanctioned glass register, and the W55 adaptive
-       darken (the inheriting `--glass-tint-*` axis) + the `--glass-level` clarity
-       knob reach the plate with NO veil-local recipe. Defaults to the `quiet`
-       rung; a consumer re-points `--veil-bg`/`--veil-blur` to any other rung. */
-    --veil-bg: color-mix(in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength));
-    --veil-blur: var(--glass-blur-quiet);
-    /* The three veil deltas over a bare rung — each overridable. */
-    --veil-border: none;
-    --veil-shadow: none;
-    --veil-feather: none;
-
-    background: var(--veil-bg);
-    -webkit-backdrop-filter: var(--veil-blur);
-
-    backdrop-filter: var(--veil-blur);
-    border: var(--veil-border);
-    box-shadow: var(--veil-shadow);
-    /* The optional radial feather — a `mask-image` only painted when
-       `--veil-feather` is set to a gradient (default `none` = no mask = a clean
-       rectangle). `mask-image: none` is the identity, so the default plate is
-       unmasked. `mask-image` Baseline 2023-12 — a non-supporting engine ignores
-       it and keeps the clean rectangle. */
-    mask-image: var(--veil-feather);
-}
+@layer components { [data-slot="card"]:where( [data-surface="glass"], [data-surface="cartoon"] ) { --glass-tint-strength: 8%; --glass-border-rung: color-mix(in srgb, var(--foreground) 9%, transparent); } [data-slot="card"][data-surface="glass"]:not(.paper-grid) { background-blend-mode: var(--card-field-floor-blend, screen, normal); } @media (prefers-contrast: more) { [data-slot="card"][data-surface="glass"]:not(.paper-grid) { background-blend-mode: normal; } } [data-slot="card"][data-surface="glass"]:not(.paper-grid) { background-image: var( --card-field-floor-image, radial-gradient( 60% 55% at 80% 16%, oklch(0.96 0.04 78 / 0.5), oklch(0.96 0.04 78 / 0) 72% ), radial-gradient( 120% 110% at 78% 22%, oklch(0.9 0.075 72 / 0.5), oklch(0.9 0.075 72 / 0) 70% ) ); } :where([data-paper-field]) [data-slot="card"][data-surface="glass"]:not(.paper-grid) { background-image: none; } .paper-texture { background-image: var(--paper-grain-tooth); background-repeat: repeat; background-size: var(--paper-grain-tile); background-blend-mode: multiply; } :where(.dark) .paper-texture { background-blend-mode: screen; } .paper-grid { background-image: var(--paper-grid-texture); background-repeat: repeat; background-size: calc(var(--paper-grid-texture-size) * 4) calc(var(--paper-grid-texture-size) * 4), calc(var(--paper-grid-texture-size) * 4) calc(var(--paper-grid-texture-size) * 4), var(--paper-grid-texture-size) var(--paper-grid-texture-size), var(--paper-grid-texture-size) var(--paper-grid-texture-size); background-blend-mode: multiply; } :where(.dark) .paper-grid, .dark .paper-grid { background-blend-mode: screen; } } @media (prefers-reduced-transparency: reduce) { .paper-grid { background-image: none; } } @media (prefers-reduced-motion: reduce) { .paper-grid { animation: none !important; } } [data-variant="selection"] { --selection-accent-strength: 16%; --selection-accent-strength-selected: 28%; --glass-accent-strength: var(--selection-accent-strength); } [data-variant="selection"][data-selected="true"] { --glass-accent-strength: var(--selection-accent-strength-selected); --glass-bg-resting: var(--glass-bg-floating, var(--glass-bg-resting)); } @utility cartoon-surface { border-width: 2px; box-shadow: var(--shadow-cartoon-md); translate: 0; position: relative; --motion-weight: 1; --cartoon-press-t: var(--card-press-t, 0); transition: translate var(--duration-normal) var(--ease-cartoon-punch), scale var(--duration-normal) var(--ease-cartoon-punch), box-shadow var(--duration-normal) var(--ease-standard); &:hover:not(:active):not(:disabled) { translate: var(--lift-sm) var(--lift-sm); scale: 1.015 0.985; box-shadow: var(--shadow-cartoon-lg); & .cartoon-cast { box-shadow: var(--shadow-cartoon-lg); } } &:active:not(:disabled) { scale: 1.04 0.94; } } .cartoon-cast { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; box-shadow: var(--shadow-cartoon-md); --cast-travel: calc(6px * var(--motion-weight) * var(--cartoon-press-t)); --cast-spread: calc(1 + 0.18 * var(--motion-weight) * var(--cartoon-press-t)); translate: calc(-1 * var(--cast-travel) + var(--cartoon-cast-dx)) calc(var(--cast-travel) + var(--cartoon-cast-dy)); scale: var(--cast-spread); transition: translate calc(var(--duration-normal) * 1.15) var(--ease-cartoon-punch), scale calc(var(--duration-normal) * 1.15) var(--ease-cartoon-punch), --cartoon-cast-dx var(--duration-normal) var(--ease-cartoon-punch), --cartoon-cast-dy var(--duration-normal) var(--ease-cartoon-punch); will-change: translate, scale; } .btn-punch .cartoon-cast { box-shadow: var(--shadow-lg); } @media (prefers-reduced-motion: reduce) { .cartoon-surface, .cartoon-cast { --motion-weight: 0; transition: none; } } @utility veil-surface { --veil-bg: color-mix(in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength)); --veil-blur: var(--glass-blur-quiet); --veil-border: none; --veil-shadow: none; --veil-feather: none; background: var(--veil-bg); -webkit-backdrop-filter: var(--veil-blur); backdrop-filter: var(--veil-blur); border: var(--veil-border); box-shadow: var(--veil-shadow); mask-image: var(--veil-feather); }

package/dist/styles/completion-seal.css

@@ -1,131 +1 @@
-/* BC.W-AX-COMPLETION-SEAL — the hero-scale earned-GOLD completion seal.
- *
- * A determinate process completes and a HERO-SCALE gold mark DRAWS itself onto the
- * surface: the stroke INKS (a `stroke-dashoffset` wipe on the registered `--seal-draw`
- * <percentage>), settles with a small spring overshoot (the `--seal-scale` SPATIAL leg
- * on the seal's own `--spring-snappy`/`--spring-bouncy` clock), and glints ONCE on
- * settle (the `--seal-glint` + the W-AX-METAL-GLOW gold catch-light). It is GOLD because
- * completion is EARNED — the ink reads the W-PHASE-PALETTE completion register
- * (`--phase-complete-color`/`--color-gold`), so a consumer re-inking completion re-inks
- * the seal in lockstep. The seal mints NO new gold token + does NOT re-author the metal
- * glow — it COMPOSES both (the earned-gold register has ONE home).
- *
- * ONE-SHOT: the draw fires ONCE on `play` (the `.completion-seal[data-play]` arm), then
- * holds the static fully-drawn seal — no looping shimmer (the §6 calm register; the disco
- * family stays gone). PRM-gated: under `prefers-reduced-motion: reduce` the seal appears
- * instantly fully-drawn (`--seal-draw: 100%` snap), no stroke animation, no glint sweep
- * (the seal is correct, the motion off — the vestibular floor).
- *
- * COMPOSITOR-ONLY: the draw rides `stroke-dashoffset` (a paint prop) + `transform` (the
- * scale) + `filter`/`opacity` (the glint) — NO layout property animates
- * (`proof:no-layout-animation` holds). The registrations live in
- * tokens/property-regs.css §18 (the specular/border-progress split: the @property reg
- * there, the consumption here). */
-
-.completion-seal {
-    /* The seal stroke ink — the EARNED-gold completion register (Q2). The runtime
-       cascade default is the token form: a consumer (or any ancestor) re-inking
-       `--phase-complete-color` re-inks the seal. The @property `initial-value` literal
-       light-gold is only the non-supporting-engine fallback. */
-    --seal-ink: var(--phase-complete-color, var(--color-gold));
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    /* The settle scale rides the SPATIAL leg — a small overshoot on the seal's own
-       spring clock (NOT a generic --duration-*). Compositor-only (transform). */
-    transform: scale(var(--seal-scale, 1));
-}
-
-/* The hero-scale gold-draw glyph — an SVG <path>/<circle> stroked in `--seal-ink`. The
-   stroke INKS itself via the `--seal-draw` wipe (a stroke-dashoffset paint, never a
-   fade). The glint reads the W-AX-METAL-GLOW catch-light (composed, not re-authored). */
-.completion-seal__mark {
-    fill: none;
-    stroke: var(--seal-ink);
-    stroke-width: var(--seal-stroke-width, 6);
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    /* The stroke-reveal: the dash array is the full path length, the offset rides the
-       `--seal-draw` extent (100% = drawn → offset 0; 0% = undrawn → offset = full
-       length). pathLength="100" normalizes the glyph so the wipe is path-agnostic. */
-    stroke-dasharray: 100;
-    stroke-dashoffset: calc(100 - var(--seal-draw, 100%) / 1%);
-    /* The one-pass gold glint on settle — the W-AX-METAL-GLOW catch-light, scaled by
-       `--seal-glint` (0 at rest → 1 on settle-pass). A drop-shadow halo of the seal's
-       OWN gold ink at the metal-glow radius/strength — composed, never re-authored.
-       The seal is NOT a `.metal-*` element, so the bare `--metal-glow-blur`/`-opacity`
-       (declared scoped inside `.metal-{gold,silver,bronze}`) do not cascade here; the
-       seal CONSUMES THE REGISTER by chaining to the `:root` `-default` retune seam
-       (glass-fx.css), NOT a hardcoded magic-number copy — a consumer who retunes
-       `--metal-glow-blur-default` re-tunes the seal halo in lockstep. */
-    --metal-glow-blur: var(--metal-glow-blur-default, 0.5em);
-    --metal-glow-opacity: var(--metal-glow-opacity-default, 0.35);
-    filter: drop-shadow(
-        0 0
-        calc(var(--metal-glow-blur) * var(--seal-glint, 0))
-        color-mix(
-            in oklab,
-            var(--seal-ink),
-            transparent
-                calc(100% - var(--metal-glow-opacity) * var(--seal-glint, 0) * 100%)
-        )
-    );
-}
-
-/* THE ONE-SHOT DRAW — fires ONCE on `play`, then holds static. PRM-gated: the whole
-   motion sits inside the no-preference gate (under reduce the seal is the static
-   fully-drawn mark, the @property initial-values). The draw is NOT a loop — a single
-   pass each on the stroke-reveal + the settle + the glint. */
-@media (prefers-reduced-motion: no-preference) {
-    .completion-seal[data-play] {
-        animation: completion-seal-settle var(--spring-bouncy-duration, 0.57s)
-            var(--spring-bouncy) both;
-    }
-    .completion-seal[data-play] .completion-seal__mark {
-        animation:
-            completion-seal-draw var(--spring-snappy-duration, 0.34s)
-                var(--ease-out, ease-out) both,
-            completion-seal-glint var(--spring-snappy-duration, 0.34s)
-                var(--ease-out, ease-out)
-                var(--spring-snappy-duration, 0.34s) both;
-    }
-}
-
-/* The stroke-reveal: the gold INKS itself 0→full (a stroke-dashoffset paint wipe — the
-   editorial draw-on). The registered `--seal-draw` interpolates; the offset reads it. */
-@keyframes completion-seal-draw {
-    from {
-        --seal-draw: 0%;
-    }
-    to {
-        --seal-draw: 100%;
-    }
-}
-
-/* The settle: the seal lands with a small overshoot (the SPATIAL enter-bounce). The
-   transform scale rides the `--seal-scale` spring; the keyframe nudges the scale once
-   (the §6 calm overshoot — an ENTER may overshoot on arrival). Compositor-only. */
-@keyframes completion-seal-settle {
-    from {
-        --seal-scale: 0.92;
-    }
-    to {
-        --seal-scale: 1;
-    }
-}
-
-/* The glint: a ONE-PASS gold catch-light sweep on settle (0 → peak → 0). NOT a loop —
-   a single pass, then the seal holds static at glint 0 (the metal-glow whisper is the
-   resting register; the disco family stays gone). */
-@keyframes completion-seal-glint {
-    0% {
-        --seal-glint: 0;
-    }
-    45% {
-        --seal-glint: 1;
-    }
-    100% {
-        --seal-glint: 0;
-    }
-}
+.completion-seal { --seal-ink: var(--phase-complete-color, var(--color-gold)); display: inline-flex; align-items: center; justify-content: center; transform: scale(var(--seal-scale, 1)); } .completion-seal[data-best] { --seal-best: var(--color-gold-light, var(--gold-light)); --seal-ink: var(--seal-best); } .completion-seal[data-shape="disc"] { --seal-ring-delay: var(--spring-snappy-duration, 0.34s); --seal-check-delay: calc(var(--spring-snappy-duration, 0.34s) * 2); } .completion-seal__disc { fill: var( --seal-disc-fill, color-mix(in oklab, var(--seal-ink), transparent 82%) ); stroke: none; } .completion-seal__mark { fill: none; stroke: var(--seal-ink); stroke-width: var(--seal-stroke-width, 6); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--seal-draw, 100%) / 1%); --metal-glow-blur: var(--metal-glow-blur-default, 0.5em); --metal-glow-opacity: var(--metal-glow-opacity-default, 0.35); filter: drop-shadow( 0 0 calc(var(--metal-glow-blur) * var(--seal-glint, 0)) color-mix( in oklab, var(--seal-ink), transparent calc(100% - var(--metal-glow-opacity) * var(--seal-glint, 0) * 100%) ) ); } @media (prefers-reduced-motion: no-preference) { .completion-seal[data-play] { animation: completion-seal-settle var(--spring-bouncy-duration, 0.57s) var(--spring-bouncy) both; } .completion-seal:not([data-shape="disc"])[data-play] .completion-seal__mark { animation: completion-seal-draw var(--spring-snappy-duration, 0.34s) var(--ease-out, ease-out) both, completion-seal-glint var(--spring-snappy-duration, 0.34s) var(--ease-out, ease-out) var(--spring-snappy-duration, 0.34s) both; } .completion-seal[data-shape="disc"][data-play] .completion-seal__disc { animation: completion-seal-disc-in var(--spring-snappy-duration, 0.34s) var(--ease-out, ease-out) both; } .completion-seal[data-shape="disc"][data-play] .completion-seal__ring { animation: completion-seal-draw var(--spring-snappy-duration, 0.34s) var(--ease-out, ease-out) var(--seal-ring-delay, 0.34s) both; } .completion-seal[data-shape="disc"][data-play] .completion-seal__check { animation: completion-seal-draw var(--spring-snappy-duration, 0.34s) var(--ease-out, ease-out) var(--seal-check-delay, 0.68s) both, completion-seal-glint var(--spring-snappy-duration, 0.34s) var(--ease-out, ease-out) calc( var(--seal-check-delay, 0.68s) + var(--spring-snappy-duration, 0.34s) ) both; } } @keyframes completion-seal-draw { from { --seal-draw: 0%; } to { --seal-draw: 100%; } } @keyframes completion-seal-disc-in { from { opacity: 0; } to { opacity: 1; } } @keyframes completion-seal-settle { from { --seal-scale: 0.92; } to { --seal-scale: 1; } } @keyframes completion-seal-glint { 0% { --seal-glint: 0; } 45% { --seal-glint: 1; } 100% { --seal-glint: 0; } }