studio-engine 0.55.0 → 0.56.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 203b2f8cf1001d19c7ffb24c778ab0f1bdcb0b9aafa59762ded0ea5689eb2423
-  data.tar.gz: a6dbf4164a79cd6b5de2a9cbee178e5455e55c619dfa7197f0db08ba398aaf5b
+  metadata.gz: 2e0f0009a05bd6e06865465368969671524d772ab938b78622539d846532d387
+  data.tar.gz: cf267435b701685424683ce6031948498b52a834551762d6be055cd126b46625
 SHA512:
-  metadata.gz: 0bb5c9bebe4977fef13ab139729ebbc5c560b52f31e573d153e63a00a8a40b970519ac783ad51b45773661e182f5dc848e424b4922e5748117c29560fdfc2b20
-  data.tar.gz: 4e16f3663bb43a61139cac420af9a2c265f91c5c5a6f708c32edf1ad5d1e92c6a559b545b148b4e134afe90d614a81de527906988a122b8326b9ae9ef881e6be
+  metadata.gz: 366f4b22dd590398e706f01b56b75ab5f82a60ca1bd6407f288a3898721cea9ab8914dc9e90c1865028ac3458ed299d9076d3768ae3bb3b86cb51ee26704fa70
+  data.tar.gz: a45734bb24a793ad91620694aa36457ce057ed12c86b1754cc3aa6a1365e552510fcbe2eb28932273a7a41e53c755f457395252d0f014e78ae6207dafd9fb5ee

data/CHANGELOG.md

@@ -6,6 +6,53 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ### Added
 
+- **The hold-to-confirm button, with its fizz — a new ACTION family in
+  `engine-motion.css`.** A press-and-hold CTA for an action a host does not want
+  taken by accident, ported from Turf Monster where it confirms a contest entry.
+  Render `studio/hold_button`; the specimens are on `/admin/style` (Tricks →
+  "Hold to confirm").
+
+  What ships:
+
+  - **`.hold-btn`** — the face and its five states: idle, `.process` (holding,
+    with the ring filling over `--duration`), `.loading` (submitted, spinning
+    arc), `.success` (confirmed, white check) and `.error` (blocked). The idle
+    face is a gradient down the primary ramp; the confirmed face is a deeper cut
+    of the SAME ramp, because an off-family success color reads as a jump to
+    some other button.
+  - **`.hold-stack` / `.hold-fizz` / `.fizz-bit`** — the carbonation. The
+    bubbles are the button's SIBLING, never its child: the button's `transform`
+    makes it a stacking context, so a bubble inside it can never get behind its
+    background. They show only where they escape its edges.
+  - **Six zones, three colors each.** The button is cut into a 3×2 grid and a
+    bubble only wears the colors of its own zone, so a six-item palette reads as
+    six things standing around the button. Bind `--fizz-c-1..18` (three per zone,
+    in order) on the stack — statically with the `fizz_colors:` local, or live
+    with `fizz_bind:` (an Alpine expression). Turf Monster's board binds the six
+    picked teams' light / dark / alt colors. Anything unbound falls back to the
+    bubble's own hue, so the effect is never colorless.
+  - **Two levels.** `fizz_level: :lively` (the default) rests at a full boil and
+    on hover DOUBLES THE BUBBLE COUNT — a second layer, seeded apart so it lands
+    in the first one's gaps, fades in over it. `fizz_level: :calm` simmers at
+    rest and boils on hover, one layer.
+  - **Per-instance theming without new CSS.** Every color reads a `--hold-*`
+    input before its default, so an ancestor can restyle one button or a page of
+    them: `--hold-bg-from` / `--hold-bg-mid` / `--hold-bg-to` for the resting
+    face, `--hold-success-from` / `--hold-success-to` / `--hold-success-glow-rgb`
+    for the confirmed one.
+  - **`prefers-reduced-motion` switches the bubbles off**, with `!important`,
+    because the state rules are more specific than anything the media query can
+    write — without it a lively button keeps fizzing at someone who asked it not
+    to.
+
+  Per-instance behavior travels as `data-*` on the button and is evaluated
+  against the surrounding `x-data` scope: `guard`, `validate` / `validate_at`,
+  `early_action` / `early_action_at` / `early_action_guard`, `on_hold_start` and
+  `on_success`. `Studio::FizzHelper` owns the bubble table and is seeded per
+  `hold_id`, so a button scatters identically on every render (a Turbo-restored
+  page matches the one it replaced) and two buttons on a page do not fizz in
+  lockstep.
+
 - **`.studio-team-glow` rings a host that paints its own background**, and can
   carry **two colors**.
 

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)
@@ -1251,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;
+  }
+}