studio-engine 0.55.0 → 0.56.1

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)
@@ -81,6 +85,15 @@
     `spin` is kept because it is byte-identical to Tailwind's built-in.
 */
 
+/* CASCADE LAYER — read before removing.
+   Everything below sits in @layer components so a CONSUMER's own utility
+   keeps winning until it deliberately adopts the primitive. Unlayered CSS
+   outranks every layered rule, so an unlayered engine sheet silently
+   overrode a consumer's same-named utility class the moment its lock bumped —
+   nothing in the consumer's own repo had to change for its styling to move.
+   @property blocks stay OUTSIDE: they are global registrations, not rules. */
+
+@layer components {
 /* =============================================================================
    1. studio-border-glow — mask-composite rainbow border glow
    Extracted verbatim from mcritchie-studio app/assets/tailwind/application.css.
@@ -519,7 +532,9 @@
    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
+@layer components {
    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).
@@ -558,11 +573,13 @@
    Tune:   --studio-team-glow-color / -color-b / -opacity / -speed / -thickness /
            -bloom
    ========================================================================== */
+}
 @property --studio-team-glow-angle {
   syntax: "<angle>";
   inherits: false;
   initial-value: 0deg;
 }
+@layer components {
 .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
@@ -697,11 +714,13 @@
    Usage:  <div class="conic-surface rounded-2xl p-8"> ...content... </div>
    Tune:   --conic-surface-from / --conic-surface-to / --conic-surface-duration
    ========================================================================== */
+}
 @property --conic-surface-angle {
   syntax: "<angle>";
   inherits: false;
   initial-value: 0deg;
 }
+@layer components {
 .conic-surface {
   position: relative;
   isolation: isolate;
@@ -1035,12 +1054,14 @@
 
 /* Registered custom property — makes --bar-progress interpolatable so a single
    transition animates all five segment widths together (one ease, not five). */
+}
 @property --bar-progress {
   syntax: "<number>";
   initial-value: 0;
   inherits: true;
 }
 
+@layer components {
 /* The motion PROPERTIES (transition / animation) live on these classes — NOT on
    the view's inline style — precisely so the reduced-motion override below can
    reach and cancel them. An inline `style="transition: …"` beats a class rule on
@@ -1251,3 +1272,574 @@ 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 {
+  /* NOT the shared `spin` keyframe. `spin` declares only `to`, so its implicit
+     `from` is whatever the element already carries — and this element carries
+     `rotate(-90deg)` (the ring's 12-o'clock origin, set above). That made the
+     loading icon sweep -90deg -> 360deg, i.e. 450deg per iteration, and snap
+     back across a 90deg seam 1.25x a second. `spin` stays correct for `.spinner`,
+     which has no base transform, so this needs its own keyframe rather than an
+     edit there. The scale is carried through so the animation does not drop it. */
+  animation: hold-spin-progress 0.8s linear infinite;
+  transition: none;
+}
+
+@keyframes hold-spin-progress {
+  from {
+    transform: rotate(-90deg) scale(var(--progress-scale, 1));
+  }
+  to {
+    transform: rotate(270deg) scale(var(--progress-scale, 1));
+  }
+}
+
+.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;
+  }
+}
+}