studio-engine 0.54.1 → 0.56.0

data/app/assets/tailwind/studio_engine/engine-motion.css

@@ -23,6 +23,10 @@
     .conic-surface        slow rotating conic-gradient wash   (authored fresh)
     .pulse-cta            attention pulse/glow for a CTA       (ported, TM)
 
+  Action:
+    .hold-btn             press-and-hold confirm button       (ported, TM)
+    .hold-stack/.fizz-bit the carbonation behind it           (ported, TM)
+
   Leveling:
     .level-badge(-1..-10) progressive level pill ladder       (ported, TM)
     .level-up-pop         level-up pop + glow burst           (ported, TM)
@@ -507,38 +511,56 @@
 }
 
 /* =============================================================================
-   9b. studio-team-glow — single-color rotating "selected card" ring glow
+   9b. studio-team-glow — rotating "selected card" ring glow, one or two colors
    Ported from turf-monster's per-team selected-card glow (.holo-border-glow):
-   a single-color conic-gradient ring rotates around the element's edge, with a
-   blurred bloom twin behind it. DISTINCT from .studio-border-glow (an animated
-   RAINBOW border) and .studio-glow (a static soft box-shadow halo) — this is the
-   "this card is selected / live" ring, tinted one color.
+   a conic-gradient ring rotates around the element's edge, with a blurred bloom
+   twin behind it. DISTINCT from .studio-border-glow (an animated RAINBOW border)
+   and .studio-glow (a static soft box-shadow halo) — this is the "this card is
+   selected / live" ring.
 
    The color is a CSS var (default the CTA role, so purple on McRitchie Studio),
-   just like TM's per-team --glow-c. The wedge is swept by animating a registered
+   just like TM's per-team --glow-c. TWO opposed wedges travel the edge, and they
+   can carry two colors: --studio-team-glow-color-b defaults to the first, so a
+   one-color caller sees no change, and a caller with a pair to show (a Pokémon's
+   two types) gets one per wedge. The wedges are swept by animating a registered
    @property angle (rotating the GRADIENT, not the element — so no oversized-child
    clipping trick is needed). Opacity is a var (--studio-team-glow-opacity) with a
    transition, so a consumer can fade the glow in/out (the living style guide
    slides it between step cards as a modal's step machine advances).
 
-   THE HOST IS A BARE WRAPPER, NOT THE CARD. Both wedge layers are pseudo-elements
-   at z-index -1 / -2, and CSS paints an element's own background FIRST, then its
-   negative-z descendants on top of it (CSS 2.1 Appendix E, steps 1 and 2). So a
-   background on the HOST cannot cover the wedges — they wash its whole face, and
-   the ring is gone. What covers the middle is an opaque CHILD in front: in-flow
-   descendants paint later (step 3), leaving only the thickness-wide band around
-   the edge. That is TM's holo-wrap / holo-card split, and it is what both
-   consumers ship — the engine's style/_modal_specimen (bare glow wrapper + the
-   opaque .card article) and the hub's release-phase-meter (bare host + the bar's
-   own fill). Demoing it the other way is what shipped a washed card to
-   admin/style; the host also must NOT be clipped by an overflow-hidden ancestor
-   near its border.
-
-   Usage:  <div class="studio-team-glow rounded-xl">
-             <div class="rounded-xl bg-surface p-5">Selected</div>
-           </div>
-           red glow:  style="--studio-team-glow-color: #E11D48"
-   Tune:   --studio-team-glow-color / -opacity / -speed / -thickness / -bloom
+   THE HOST MAY CARRY ITS OWN BACKGROUND — the ring cuts the host's box out of
+   both wedge layers, so only the band around the edge paints. That hole is what
+   makes the primitive work in the two shapes its consumers need:
+
+     · the WRAPPER shape (TM's holo-wrap / holo-card split) — a bare host with an
+       opaque child in front. The engine's style/_modal_specimen and the hub's
+       release-phase-meter both ship this. Unchanged by the hole: the child was
+       already covering that interior.
+     · the CARD shape — the host IS the opaque surface. This is what a live board
+       card needs, because it cannot take a wrapper at all: Turbo targets the card
+       element for both replace and remove, so a wrapper is orphaned every time a
+       card leaves the board.
+
+   Without the hole the card shape is impossible, and not for a tunable reason:
+   both layers are pseudo-elements at z-index -1 / -2, and CSS paints an element's
+   own background FIRST, then its negative-z descendants ON TOP of it (CSS 2.1
+   Appendix E, steps 1 and 2) — so a background on the host is covered BY the
+   wedges, and the ring becomes a wash across the whole face. Only a child, or
+   this hole, can cover the middle.
+
+   The host must still NOT be clipped by an overflow-hidden ancestor near its
+   border, or the ring is cut off with it.
+
+   Usage:  <div class="studio-team-glow rounded-xl bg-surface p-5">Selected</div>
+           wrapper shape, when the face is its own element:
+             <div class="studio-team-glow rounded-xl">
+               <div class="rounded-xl bg-surface p-5">Selected</div>
+             </div>
+           red glow:   style="--studio-team-glow-color: #E11D48"
+           two types:  style="--studio-team-glow-color: #F08030;
+                              --studio-team-glow-color-b: #6890F0"
+   Tune:   --studio-team-glow-color / -color-b / -opacity / -speed / -thickness /
+           -bloom
    ========================================================================== */
 @property --studio-team-glow-angle {
   syntax: "<angle>";
@@ -547,6 +569,11 @@
 }
 .studio-team-glow {
   --studio-team-glow-color: var(--color-cta);
+  /* The SECOND wedge's color. Defaults to the first, so a one-color caller sees
+     no change; a caller with two colors to show (a Pokémon's two types, a pair of
+     brand colors) gets one per wedge. Resolved on this element, so an inline
+     --studio-team-glow-color override feeds this default too. */
+  --studio-team-glow-color-b: var(--studio-team-glow-color);
   --studio-team-glow-opacity: 1;
   --studio-team-glow-speed: 4s;
   --studio-team-glow-thickness: 4px;
@@ -571,14 +598,47 @@
     var(--studio-team-glow-color) 12%,
     transparent 33%,
     transparent 50%,
-    var(--studio-team-glow-color) 62%,
+    var(--studio-team-glow-color-b) 62%,
     transparent 83%
   );
   animation: studio-team-glow-spin var(--studio-team-glow-speed) linear infinite;
+  /* THE HOST'S OWN BOX IS PUNCHED OUT of both wedge layers, so what paints is the
+     band around the edge and nothing else. `padding` makes each layer's CONTENT
+     box exactly the host's box; mask-composite then removes that box from the
+     layer — the same mask trick §1's .studio-border-glow uses.
+     Why it is here: an opaque child in front covers the middle only when the host
+     CAN take a child. A live board card cannot — Turbo targets the card element
+     itself for replace and remove, so a wrapper is orphaned on every remove. With
+     the hole cut here the ring rides the card directly. For a wrapper host this
+     changes nothing visible: the child was already covering that interior. */
+  padding: var(--studio-team-glow-thickness);
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
 }
 .studio-team-glow::after {
-  /* Blurred bloom twin, a touch larger. */
-  inset: calc(-1 * (var(--studio-team-glow-thickness) + 4px));
+  /* Blurred bloom twin, a touch larger: its wedges reach 4px PAST the ring, which
+     is what makes the bloom read as a halo, not a soft edge on the ring. Drop the
+     4px and every WRAPPER consumer's ring visibly lightens (measured: 26% of the
+     pixels on style/_modal_specimen, 13% on the hub's release-phase-meter). The
+     box then carries a transparent BORDER of bloom-reach on top of that, and the
+     mask still holes out the host's box — so the blur
+     spreads outward into that reach and is cut where it has already faded, while
+     the inward half is cut at the host's edge (invisible: that edge is either the
+     card's own or the wrapper child's). Mask applies AFTER filter, which is why
+     the reach has to out-measure the blur — without it the halo ends on a hard
+     line at the layer's own box. */
+  inset: calc(-1 * (var(--studio-team-glow-thickness) + 4px + var(--studio-team-glow-bloom) * 2));
+  padding: calc(var(--studio-team-glow-thickness) + 4px);
+  border: calc(var(--studio-team-glow-bloom) * 2) solid transparent;
+  /* The wedges stop at the padding box (host + ring + the 4px); the border is empty
+     room the blur is allowed to spread into. */
+  background-clip: padding-box;
   z-index: -2;
   filter: blur(var(--studio-team-glow-bloom)) saturate(1.35);
 }
@@ -1195,3 +1255,557 @@ body.modal-open { overflow: hidden; }
 @media (prefers-reduced-motion: reduce) {
   .pulse-cta { animation: none; }
 }
+
+/* ── ACTION: hold-to-confirm ──────────────────────────────────────────────────
+   A press-and-hold CTA and the carbonation behind it. Ported from turf-monster
+   (2026-08), where the confirm-entry button is the last thing a player touches
+   before money moves — a hold is the affordance for "mean it", and the fizz is
+   what makes it worth looking at.
+
+   Markup contract (studio/_hold_button + studio/_fizz_layer):
+
+     span.hold-stack            positioning + z-order context
+       span.hold-fizz             resting bubble layer   (behind the button)
+       span.hold-fizz.hold-fizz-extra   hover-only layer (lively level only)
+       button.hold-btn            the button itself, painted OVER the bubbles
+         div.hold-icon            progress ring + tick
+         ul.hold-text             four sliding labels: idle/hold/done/blocked
+         div.nudge-debug          dev-only countdown to the next nudge
+
+   The face themes off ROLE tokens, so it wears each app's own brand: the
+   resting gradient is the primary ramp, the confirmed state a deeper cut of the
+   same ramp, and the blocked state the danger role. Every color also reads a
+   `--hold-*` INPUT first, so an ancestor can re-theme one button (or a page of
+   them) without touching this file — a declaration here would otherwise beat
+   anything inherited.
+
+   States are JS-applied classes on the button: .process (holding), .loading
+   (submitted, in flight), .success, .error, .nudge / .nudge-soft (the
+   attention shake). The bubbles read them with :has(), because they are the
+   button's SIBLING rather than its child — see the fizz section below. */
+
+.hold-btn {
+  --duration: 2000ms;
+  --color: #f6f8ff;
+  /* --bg is the button's SOLID color; .hold-icon::before punches the ring's
+     hole with it, so it has to stay a flat value. The face wears --bg-image on
+     top: lit from the top-left down into the deep end of the ramp, so the CTA
+     reads as a raised surface instead of a paint chip. A state that wants a
+     flat face (the transparent hold, the red error) sets --bg-image: none. */
+  --bg: var(--color-cta);
+  --bg-from: var(--hold-bg-from, rgb(var(--color-primary-400-rgb)));
+  --bg-mid: var(--hold-bg-mid, rgb(var(--color-primary-rgb)));
+  --bg-to: var(--hold-bg-to, rgb(var(--color-primary-700-rgb)));
+  --bg-image: linear-gradient(160deg, var(--bg-from) 0%, var(--bg-mid) 45%, var(--bg-to) 100%);
+  /* Confirmed stays in the SAME family as the face you pressed, dropped into
+     the near-black end of the ramp. An off-family success color (turf shipped a
+     mint/teal one for a year) reads as a jump to some other button, and a check
+     drawn in that same color barely shows on it — hence the white tick below. */
+  --success-from: var(--hold-success-from, rgb(var(--color-primary-rgb)));
+  --success-to: var(--hold-success-to, rgb(var(--color-primary-900-rgb)));
+  --success-glow-rgb: var(--hold-success-glow-rgb, var(--color-primary-800-rgb));
+  --progress-border: var(--color-inset);
+  --progress-active: #f6f8ff;
+  --progress-success: #f6f8ff;
+  --tick-stroke: var(--progress-active);
+
+  position: relative;
+  width: 100%;
+  padding: 14px 32px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 19px;
+  border: 1px solid rgb(var(--color-primary-rgb) / 0.5);
+  border-radius: 12px;
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  backface-visibility: hidden;
+  color: var(--color);
+  background: var(--bg);
+  background-image: var(--bg-image, none);
+  box-shadow: 0 0 20px rgb(var(--color-primary-rgb) / 0.25);
+  transform: scale(var(--scale, 1));
+  transition: transform 0.3s, box-shadow 0.3s, background 0.3s, border-color 0.3s;
+}
+
+/* The attention shake. JS adds the class and removes it on animationend. */
+.hold-btn.nudge {
+  animation: hold-nudge 0.5s ease-in-out 1;
+}
+
+.hold-btn.nudge-soft {
+  animation: hold-nudge-soft 0.4s ease-in-out 1;
+}
+
+/* The progress ring: a fat-stroked circle whose dash array fills over
+   --duration, with the button's own background punched through the middle. */
+.hold-btn > .hold-icon {
+  position: absolute;
+  top: 50%;
+  left: 14px;
+  width: 20px;
+  height: 20px;
+  margin-top: -10px;
+  border-radius: 50%;
+  background: var(--progress-border);
+  opacity: var(--icon-o, 0);
+  transform: translateX(var(--icon-x, -4px));
+  transition: transform 0.3s, opacity 0.2s;
+}
+
+.hold-btn > .hold-icon::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  z-index: 1;
+  width: 16px;
+  height: 16px;
+  background: var(--bg);
+  border-radius: inherit;
+  transform: scale(var(--bg-scale, 1));
+  transition: transform 0.32s ease;
+}
+
+.hold-btn > .hold-icon svg {
+  display: block;
+  width: 20px;
+  height: 20px;
+  fill: none;
+}
+
+.hold-btn > .hold-icon svg.progress {
+  transform: rotate(-90deg) scale(var(--progress-scale, 1));
+  transition: transform 0.5s ease;
+}
+
+.hold-btn > .hold-icon svg.progress circle {
+  stroke: var(--progress-active);
+  stroke-width: 16;
+  stroke-dashoffset: 1;
+  stroke-dasharray: var(--progress-array, 0) 52;
+  transition: stroke-dasharray var(--duration) linear;
+}
+
+.hold-btn > .hold-icon svg.tick {
+  position: absolute;
+  top: 0;
+  left: 0;
+  stroke: var(--tick-stroke);
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition: stroke 0.3s ease 0.7s;
+}
+
+.hold-btn > .hold-icon svg.tick polyline {
+  stroke-dasharray: 18 18 18;
+  stroke-dashoffset: var(--tick-offset, 18);
+  transition: stroke-dashoffset 0.4s ease 0.7s;
+}
+
+/* Four labels stacked in one column; the state slides the column. */
+.hold-btn .hold-text {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  text-align: center;
+  pointer-events: none;
+  backface-visibility: hidden;
+  transform: translate3d(var(--ul-x, 0), 0, 0);
+  transition: transform 0.3s;
+}
+
+.hold-btn .hold-text li {
+  backface-visibility: hidden;
+  transform: translateY(var(--ul-y, 0));
+  transition: transform 0.3s ease 0.16s, opacity 0.2s ease 0.16s;
+}
+
+.hold-btn .hold-text li:not(:first-child) {
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+
+.hold-btn .hold-text li:nth-child(1) {
+  top: 0;
+  opacity: var(--ul-o-1, 1);
+}
+
+.hold-btn .hold-text li:nth-child(2) {
+  top: 100%;
+  opacity: var(--ul-o-2, 0);
+}
+
+.hold-btn .hold-text li:nth-child(3) {
+  top: 200%;
+  opacity: var(--ul-o-3, 0);
+}
+
+.hold-btn .hold-text li:nth-child(4) {
+  top: 300%;
+  opacity: var(--ul-o-4, 0);
+}
+
+.hold-btn:hover:not(.process):not(.success) {
+  filter: brightness(0.92);
+  border-color: rgb(var(--color-primary-rgb) / 0.7);
+  box-shadow: 0 0 30px rgb(var(--color-primary-rgb) / 0.4);
+}
+
+.hold-btn:active:not(.success) {
+  --scale: 0.97;
+}
+
+/* Holding. The face goes flat and dark so the ring and the building glow have
+   somewhere to read against; the gradient would fight both. */
+.hold-btn.process {
+  --icon-x: 0;
+  --icon-o: 1;
+  --ul-x: 8px;
+  --ul-y: -100%;
+  --ul-o-1: 0;
+  --ul-o-2: 1;
+  --ul-o-3: 0;
+  --progress-array: 52;
+  --bg: var(--color-page);
+  --bg-image: none;
+  border-color: rgb(var(--color-primary-rgb) / 0.7);
+  box-shadow:
+    0 0 30px rgb(var(--color-primary-rgb) / 0.45),
+    0 0 80px rgb(var(--color-primary-rgb) / 0.25),
+    0 0 120px rgb(var(--color-primary-rgb) / 0.1),
+    inset 0 0 40px rgb(var(--color-primary-rgb) / 0.1);
+  animation: none;
+  transition: transform 0.3s, box-shadow 2.5s ease-out, border-color 1s, background 0.5s;
+}
+
+/* Confirmed. */
+.hold-btn.success {
+  --scale: 1.03;
+  --icon-x: 6px;
+  --icon-o: 1;
+  --ul-x: 8px;
+  --ul-y: -200%;
+  --ul-o-1: 0;
+  --ul-o-2: 0;
+  --ul-o-3: 1;
+  --progress-array: 52;
+  --progress-border: none;
+  --progress-scale: 0.11;
+  --tick-stroke: var(--progress-success);
+  --tick-offset: 36;
+  --bg-scale: 0;
+  --bg: var(--success-to);
+  --bg-image: linear-gradient(160deg, var(--success-from) 0%, var(--success-to) 100%);
+  --color: #fff;
+  border-color: var(--success-from);
+  box-shadow:
+    0 0 40px rgb(var(--success-glow-rgb) / 0.7),
+    0 0 100px rgb(var(--success-glow-rgb) / 0.4),
+    0 0 160px rgb(var(--success-glow-rgb) / 0.15);
+  animation: hold-glow-pulse 0.8s ease-in-out 1;
+}
+
+.hold-btn.success > .hold-icon svg.progress {
+  animation: hold-tick 0.3s linear forwards 0.4s;
+}
+
+/* Blocked. */
+.hold-btn.error {
+  --icon-o: 0;
+  --ul-x: 0;
+  --ul-y: -300%;
+  --ul-o-1: 0;
+  --ul-o-2: 0;
+  --ul-o-3: 0;
+  --ul-o-4: 1;
+  --bg: var(--color-danger);
+  --bg-image: none;
+  border-color: rgb(239 68 68 / 0.7);
+  box-shadow: 0 0 30px rgb(239 68 68 / 0.4);
+  animation: none;
+  cursor: default;
+}
+
+/* Submitted, waiting on the server. Keeps the hold's glow for continuity and
+   swaps the filled ring for a spinning arc, so it reads "still working" rather
+   than "done". */
+.hold-btn.loading {
+  --icon-x: 0;
+  --icon-o: 1;
+  --ul-x: 8px;
+  --ul-y: -100%;
+  --ul-o-1: 0;
+  --ul-o-2: 1;
+  --ul-o-3: 0;
+  --bg: var(--color-page);
+  --bg-image: none;
+  border-color: rgb(var(--color-primary-rgb) / 0.7);
+  box-shadow:
+    0 0 30px rgb(var(--color-primary-rgb) / 0.45),
+    0 0 80px rgb(var(--color-primary-rgb) / 0.25),
+    0 0 120px rgb(var(--color-primary-rgb) / 0.1),
+    inset 0 0 40px rgb(var(--color-primary-rgb) / 0.1);
+  cursor: default;
+}
+
+.hold-btn.loading > .hold-icon {
+  background: transparent;
+}
+
+.hold-btn.loading > .hold-icon::before {
+  display: none;
+}
+
+.hold-btn.loading > .hold-icon svg.progress {
+  animation: spin 0.8s linear infinite;
+  transition: none;
+}
+
+.hold-btn.loading > .hold-icon svg.progress circle {
+  stroke: rgb(var(--color-primary-rgb));
+  stroke-width: 3;
+  stroke-dasharray: 30 21;
+  stroke-dashoffset: 0;
+  transition: none;
+}
+
+/* Dev-only countdown to the next nudge. Hidden unless the host is in dev mode
+   (studio's .dev-mode body class), and always hidden once the hold starts. */
+.nudge-debug {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  width: 24px;
+  height: 24px;
+  display: none;
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.dev-mode .nudge-debug {
+  display: block;
+}
+
+.nudge-debug svg {
+  width: 24px;
+  height: 24px;
+  transform: rotate(-90deg);
+}
+
+.nudge-debug svg circle.track {
+  fill: none;
+  stroke: rgb(255 255 255 / 0.15);
+  stroke-width: 3;
+}
+
+.nudge-debug svg circle.fill {
+  fill: none;
+  stroke: var(--color-cta);
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-dasharray: 56.55;
+  stroke-dashoffset: 0;
+  transition: stroke-dashoffset 0.3s linear;
+}
+
+.nudge-debug .countdown-num {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: ui-monospace, monospace;
+  font-size: 9px;
+  font-weight: 800;
+  color: #f6f8ff;
+}
+
+.hold-btn.process .nudge-debug,
+.hold-btn.success .nudge-debug {
+  opacity: 0;
+}
+
+/* ── ACTION: the fizz ─────────────────────────────────────────────────────────
+   Carbonation behind the button. The bubbles are the button's SIBLING, never
+   its child: the button's `transform` makes it a stacking context, and a
+   stacking context paints its own background BEFORE its negative-z children, so
+   a bubble inside it can never get behind its face. As a sibling the button
+   paints over them and they show only where they escape its edges. `isolation`
+   keeps that z-order private to the stack.
+
+   The bubbles are placed and coloured by Studio::FizzHelper, which hands each
+   one its drift, size, delay, cycle and colour as custom properties — so ONE
+   keyframe set drives all of them, and amplitude is the STATE's job, expressed
+   as a multiplier on the bubble's own drift.
+
+   ZONES + PALETTE. The button is cut into a 3x2 grid of zones, and a bubble
+   only ever wears the colours of the zone it sits in, so a six-item palette
+   reads as six things standing around the button rather than one shaken bag of
+   confetti. Each zone owns three slots (--fizz-c-1..18): the resting layer
+   wears the first, and the hover layer alternates the second and third.
+   Nothing bound? Every bubble falls back to its own hue, so the effect is
+   never colourless.
+
+   LEVELS. .hold-stack rests with one layer simmering. .fizz-lively rests at a
+   full boil and, on hover, DOUBLES THE COUNT rather than the speed: a second
+   layer (seeded apart, so it lands in the first one's gaps) fades in over it
+   and fades back out when the pointer leaves. */
+
+.hold-stack {
+  position: relative;
+  display: block;
+  isolation: isolate;
+}
+
+.hold-stack > .hold-btn {
+  z-index: 1;
+}
+
+.hold-stack > .hold-fizz {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.hold-stack .fizz-bit {
+  position: absolute;
+  width: var(--fs, 4px);
+  height: var(--fs, 4px);
+  margin-top: calc(var(--fs, 4px) / -2);
+  margin-left: calc(var(--fs, 4px) / -2);
+  border-radius: 100px;
+  /* --fc resolves to this bubble's colour slot, or its own hue when the slot is
+     unbound. The hairline rim keeps a near-black palette colour visible on a
+     dark page. */
+  background: var(--fc, hsl(292 92% 70%));
+  box-shadow:
+    0 0 6px var(--fc, hsl(292 92% 70%)),
+    0 0 0 0.5px rgb(255 255 255 / 0.35);
+  opacity: 0;
+  will-change: transform, opacity;
+  animation: fizz-simmer var(--ft, 1.8s) linear var(--fd, 0s) infinite;
+}
+
+/* Hover and the nudge shake both mean "look at me" — boil for the moment.
+   Calm only: lively rests at this boil already and answers hover its own way,
+   below, so it must not pick this rule up (it outranks lively's rest rule). */
+.hold-stack:not(.fizz-lively):has(> .hold-btn:hover:not(.process):not(.loading):not(.success):not(.error)) .fizz-bit {
+  animation: fizz-boil calc(var(--ft, 1.8s) * 0.62) linear calc(var(--fd, 0s) * 0.35) infinite;
+}
+
+.hold-stack.fizz-lively .fizz-bit {
+  animation: fizz-boil calc(var(--ft, 1.8s) * 0.62) linear calc(var(--fd, 0s) * 0.35) infinite;
+}
+
+/* The hover layer keeps running while hidden. It has to: killing the animation
+   would snap the bubbles to their base opacity: 0 and leave nothing to fade. */
+.hold-stack > .hold-fizz-extra {
+  opacity: 0;
+  transition: opacity 0.45s ease;
+}
+
+/* The guard list is as much the point as the hover: a held, submitting,
+   confirmed or blocked button speaks for itself, so the hover crowd fades away
+   and leaves the ring and the burst to read cleanly. */
+.hold-stack.fizz-lively:has(> .hold-btn:hover:not(.process):not(.loading):not(.success):not(.error)) > .hold-fizz-extra {
+  opacity: 1;
+}
+
+.hold-stack:has(> .hold-btn.nudge) .fizz-bit,
+.hold-stack:has(> .hold-btn.nudge-soft) .fizz-bit {
+  animation: fizz-boil calc(var(--ft, 1.8s) * 0.55) linear calc(var(--fd, 0s) * 0.25) infinite;
+}
+
+.hold-stack:has(> .hold-btn.process) .fizz-bit,
+.hold-stack:has(> .hold-btn.loading) .fizz-bit {
+  animation: fizz-boil calc(var(--ft, 1.8s) * 0.45) linear calc(var(--fd, 0s) * 0.2) infinite;
+}
+
+.hold-stack:has(> .hold-btn.success) .fizz-bit {
+  animation: fizz-burst 1.1s cubic-bezier(0.12, 0.72, 0.24, 1) forwards;
+}
+
+.hold-stack:has(> .hold-btn.error) .fizz-bit {
+  animation: none;
+  opacity: 0;
+}
+
+@keyframes hold-tick {
+  100% { transform: rotate(-90deg) translate(0, -5px) scale(var(--progress-scale)); }
+}
+
+@keyframes hold-glow-pulse {
+  50% {
+    box-shadow:
+      0 0 60px rgb(var(--success-glow-rgb) / 0.9),
+      0 0 140px rgb(var(--success-glow-rgb) / 0.5),
+      0 0 200px rgb(var(--success-glow-rgb) / 0.2);
+  }
+}
+
+@keyframes hold-nudge {
+  0%, 100% { transform: scale(1) rotate(0deg); }
+  15% { transform: scale(1.06) rotate(-2deg); }
+  30% { transform: scale(1.06) rotate(2deg); }
+  45% { transform: scale(1.04) rotate(-1.5deg); }
+  60% { transform: scale(1.03) rotate(1deg); }
+  75% { transform: scale(1.02) rotate(-0.5deg); }
+  90% { transform: scale(1.01) rotate(0.3deg); }
+}
+
+@keyframes hold-nudge-soft {
+  0%, 100% { transform: scale(1) rotate(0deg); }
+  20% { transform: scale(1.03) rotate(-1deg); }
+  40% { transform: scale(1.03) rotate(1deg); }
+  60% { transform: scale(1.02) rotate(-0.5deg); }
+  80% { transform: scale(1.01) rotate(0.5deg); }
+}
+
+/* One bubble's life. --fx/--fy are ITS drift; the multiplier is the state's
+   intensity. Transform and opacity only, so every bubble stays on the
+   compositor. */
+@keyframes fizz-simmer {
+  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.5); }
+  30% { opacity: 0.4; }
+  70% { opacity: 0.24; }
+  100% { opacity: 0; transform: translate3d(calc(var(--fx, 0px) * 0.4), calc(var(--fy, 0px) * 0.4), 0) scale(1); }
+}
+
+@keyframes fizz-boil {
+  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.4); }
+  20% { opacity: 0.95; }
+  70% { opacity: 0.7; }
+  100% { opacity: 0; transform: translate3d(var(--fx, 0px), var(--fy, 0px), 0) scale(1.15); }
+}
+
+/* The burst holds its brightness through most of the flight on purpose: an
+   opacity that eases out with the travel is over in ~100ms and reads as a
+   flicker. */
+@keyframes fizz-burst {
+  0% { opacity: 0.3; transform: translate3d(0, 0, 0) scale(0.6); }
+  12% { opacity: 1; transform: translate3d(calc(var(--fx, 0px) * 0.4), calc(var(--fy, 0px) * 0.4), 0) scale(1.5); }
+  65% { opacity: 0.9; }
+  100% { opacity: 0; transform: translate3d(calc(var(--fx, 0px) * 2.6), calc(var(--fy, 0px) * 2.6), 0) scale(0.5); }
+}
+
+/* Decoration, not information — a reduced-motion viewer loses nothing by losing
+   it, and sixty looping bubbles is exactly what that setting is for.
+   !important because this is an OFF SWITCH: the state rules above are more
+   specific than any selector this media query can write, so without it the
+   guard silently loses and a lively button keeps fizzing at someone who asked
+   it not to. */
+@media (prefers-reduced-motion: reduce) {
+  .hold-stack .fizz-bit,
+  .hold-stack .hold-fizz-extra {
+    animation: none !important;
+    opacity: 0 !important;
+    transition: none !important;
+  }
+}