/* ============================================================================
 * motion.css — Ganbei TMA motion layer (v5.1 KTV neon)
 * ----------------------------------------------------------------------------
 * Denser, smoother interactivity on top of the play-shell keyframe set.
 * Pure CSS + custom properties. JS in motion.js drives --fill / --tilt / ripples.
 * Respects prefers-reduced-motion. Does not change game math or money rails.
 * ========================================================================== */

:root {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --fill: 0.58;
  --slosh: 0deg;
  --fx-ease: cubic-bezier(0.22, 1.15, 0.36, 1);
  --fx-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Room atmosphere (idle) — neon KTV, not warm tavern ---------- */
.room-smoke {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 8;
  background:
    radial-gradient(ellipse 42% 20% at 16% 10%, rgba(255,45,146,0.12), transparent 70%),
    radial-gradient(ellipse 36% 18% at 86% 16%, rgba(45,226,255,0.1), transparent 70%),
    radial-gradient(ellipse 48% 22% at 50% 100%, rgba(168,85,247,0.1), transparent 70%);
  animation: smoke-drift 14s ease-in-out infinite;
  mix-blend-mode: screen;
}
.ktv-haze {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 8;
  background:
    radial-gradient(ellipse 55% 28% at 50% 72%, rgba(8,4,16,0.35), transparent 70%),
    radial-gradient(ellipse 30% 14% at 30% 40%, rgba(255,45,146,0.08), transparent 75%),
    radial-gradient(ellipse 28% 12% at 72% 38%, rgba(45,226,255,0.07), transparent 75%);
  animation: ktv-haze-drift 18s ease-in-out infinite;
  mix-blend-mode: screen;
}
.ktv-beams {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 7;
  background:
    linear-gradient(118deg, transparent 38%, rgba(255,45,146,0.07) 50%, transparent 62%),
    linear-gradient(62deg, transparent 40%, rgba(45,226,255,0.06) 52%, transparent 64%);
  background-size: 180% 180%;
  animation: ktv-beam-sweep 11s ease-in-out infinite;
  mix-blend-mode: screen;
}
.ktv-scan {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9;
  background: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 3px,
    rgba(45,226,255,0.025) 3px,
    rgba(45,226,255,0.025) 4px
  );
  animation: ktv-scan 7s linear infinite;
  mix-blend-mode: screen;
  opacity: 0.55;
}
.neon-flicker {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9;
  box-shadow:
    inset 0 -48px 90px rgba(255,45,146,0.14),
    inset 0 0 140px rgba(45,226,255,0.07),
    inset 40px 0 80px rgba(168,85,247,0.06);
  animation: neon-flicker 7.5s ease-in-out infinite;
}
@keyframes smoke-drift {
  0%, 100% { opacity: 0.55; transform: translate3d(0, 0, 0) scale(1); }
  40%      { opacity: 0.9;  transform: translate3d(-1.5%, -1%, 0) scale(1.03); }
  70%      { opacity: 0.7;  transform: translate3d(1.2%, 0.6%, 0) scale(1.01); }
}
@keyframes ktv-haze-drift {
  0%, 100% { opacity: 0.65; transform: translate3d(0, 0, 0) scale(1); }
  45%      { opacity: 1; transform: translate3d(1.4%, -1.2%, 0) scale(1.04); }
  75%      { opacity: 0.75; transform: translate3d(-1%, 0.8%, 0) scale(1.02); }
}
@keyframes ktv-beam-sweep {
  0%, 100% { background-position: 0% 40%, 100% 60%; opacity: 0.45; }
  50%      { background-position: 80% 55%, 20% 40%; opacity: 0.85; }
}
@keyframes ktv-scan {
  0%   { transform: translateY(0); }
  100% { transform: translateY(8px); }
}
@keyframes neon-flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.72; }
  94.5% { opacity: 1; }
  96% { opacity: 0.8; }
}

.fx-layer {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 140;
  overflow: hidden;
}

/* ---------- Tray: pointer tilt + rim shimmer + 3D breathe ---------- */
.table-surface { touch-action: manipulation; }
.tray {
  transform:
    rotateX(calc(35deg + var(--tilt-x, 0deg)))
    rotateY(var(--tilt-y, 0deg))
    translateZ(0);
  transition:
    transform 0.45s var(--fx-ease),
    box-shadow 0.5s ease,
    filter 0.4s ease;
}
.tray::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 32%,
    rgba(255,45,146,0.16) 44%,
    rgba(45,226,255,0.16) 52%,
    transparent 64%
  );
  background-size: 220% 100%;
  animation: tray-sheen 5.2s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity: 0.55;
}
@keyframes tray-sheen {
  0%, 100% { background-position: 120% 0; opacity: 0.25; }
  50%      { background-position: -20% 0; opacity: 0.7; }
}
.tray-led {
  animation: tray-led-run 3.8s linear infinite;
}
@keyframes tray-led-run {
  0%   { opacity: 0.16; filter: hue-rotate(0deg); }
  40%  { opacity: 0.4; filter: hue-rotate(18deg); }
  70%  { opacity: 0.22; filter: hue-rotate(-8deg); }
  100% { opacity: 0.16; filter: hue-rotate(0deg); }
}
.win-line .wl-cn {
  animation: win-line-pulse 2.8s ease-in-out infinite;
}
@keyframes win-line-pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.18) saturate(1.15); }
}
.tray.pulse {
  animation: tray-pulse var(--pulse-dur) ease-in-out infinite,
             tray-breathe calc(var(--pulse-dur) * 1.15) ease-in-out infinite;
}
@keyframes tray-breathe {
  0%, 100% { transform: rotateX(calc(35deg + var(--tilt-x, 0deg))) rotateY(var(--tilt-y, 0deg)) scale(1); }
  50%      { transform: rotateX(calc(33.5deg + var(--tilt-x, 0deg))) rotateY(var(--tilt-y, 0deg)) scale(1.018); }
}
.tray.wobble {
  animation: tray-wobble 0.72s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes tray-wobble {
  0%,100% { transform: rotateX(35deg) rotateZ(0deg) scale(1); }
  18%     { transform: rotateX(38deg) rotateZ(-4.5deg) translateY(-7px) scale(1.02); }
  36%     { transform: rotateX(32deg) rotateZ(4deg) translateY(-3px) scale(0.99); }
  54%     { transform: rotateX(36deg) rotateZ(-2.6deg) translateY(-5px); }
  72%     { transform: rotateX(34deg) rotateZ(1.8deg); }
}
.tray.round-in {
  animation: tray-round-in 0.55s var(--fx-spring);
}
@keyframes tray-round-in {
  0%   { transform: rotateX(48deg) scale(0.88); filter: brightness(0.6); }
  100% { transform: rotateX(calc(35deg + var(--tilt-x, 0deg))) rotateY(var(--tilt-y, 0deg)) scale(1); filter: none; }
}

/* ---------- Glasses: pour / pending / drain / enter ---------- */
.glass {
  --fill: 0.58;
  --slosh: 0deg;
  transform-origin: 50% 80%;
  transition: transform 0.18s var(--fx-ease), filter 0.2s;
}
.glass.enter {
  animation: glass-enter 0.52s var(--fx-spring) both;
}
@keyframes glass-enter {
  0%   { opacity: 0; transform: translateY(18px) scale(0.55) rotate(-8deg); }
  70%  { opacity: 1; transform: translateY(-4px) scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: none; }
}
.glass .glass-hit {
  position: absolute; inset: -8px;
  border-radius: 16px;
  border: 2px solid rgba(45,226,255,0);
  pointer-events: none;
  opacity: 0;
}
.glass.hit .glass-hit {
  animation: glass-hit-ring 0.48s var(--fx-ease) forwards;
}
@keyframes glass-hit-ring {
  0%   { opacity: 1; transform: scale(0.7); border-color: rgba(45,226,255,0.95); }
  100% { opacity: 0; transform: scale(1.35); border-color: rgba(255,45,146,0); }
}

.liquid-group {
  transform-origin: 50% 78%;
  transform: translateY(calc((1 - var(--fill, 0.58)) * 26px)) rotate(var(--slosh, 0deg));
  transition: transform 0.35s var(--fx-ease);
}
.glass-liquid-fill { fill: var(--amber-deep); }
.glass.revealed.safe .glass-liquid-fill { fill: url(#whisky); }
.glass.revealed.mine .glass-liquid-fill { fill: url(#poison); }
.glass-meniscus {
  fill: rgba(255,210,120,0.5);
  transform-origin: 50% 50%;
}
.glass-pour-stream {
  fill: none;
  stroke: url(#whisky);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(245,205,110,0.8));
}
.glass-bubbles circle {
  fill: rgba(255,235,180,0.45);
  opacity: 0;
}

/* Pending = pour in progress: liquid rises, sloshes, stream runs, bubbles lift */
.glass.pending {
  animation: glass-pending 0.55s ease-in-out infinite;
  --fill: 0.86;
}
.glass.pending .liquid-group {
  animation: liquid-slosh 0.42s ease-in-out infinite;
}
.glass.pending .glass-pour-stream {
  opacity: 0.95;
  animation: pour-run 0.38s linear infinite;
}
.glass.pending .glass-bubbles circle {
  animation: bubble-rise 0.7s ease-in infinite;
}
.glass.pending .glass-bubbles .b2 { animation-delay: 0.18s; }
.glass.pending .glass-bubbles .b3 { animation-delay: 0.34s; }

@keyframes glass-pending {
  0%, 100% { transform: scale(0.97) rotate(-1.5deg); filter: brightness(1.12); }
  50%      { transform: scale(1.055) rotate(1.5deg); filter: brightness(1.4) drop-shadow(0 0 16px rgba(45,226,255,0.95)) drop-shadow(0 0 8px rgba(255,45,146,0.7)); }
}
@keyframes glass-pending-ring {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50%      { opacity: 1; transform: scale(1.08); }
}
@keyframes liquid-slosh {
  0%, 100% { transform: translateY(calc((1 - var(--fill, 0.86)) * 26px)) rotate(-7deg); }
  50%      { transform: translateY(calc((1 - var(--fill, 0.86)) * 26px)) rotate(8deg); }
}
@keyframes pour-run {
  to { stroke-dashoffset: -36; }
}
@keyframes bubble-rise {
  0%   { opacity: 0; transform: translateY(10px) scale(0.5); }
  25%  { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-18px) scale(1.1); }
}

.glass.revealed.safe.drained { --fill: 0.02; }
.glass.revealed.safe.drained .liquid-group {
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.glass.revealed.safe.drained .glass-meniscus { opacity: 0; transition: opacity 0.3s; }

.glass.pour-settle {
  animation: pour-settle 0.42s var(--fx-spring);
}
@keyframes pour-settle {
  0%   { transform: scale(1.08) rotate(3deg); }
  100% { transform: none; }
}

/* ---------- Multiplier / HUD ---------- */
.hud .mult .val,
.strip .mult .val {
  display: inline-block;
  transform-origin: 50% 70%;
}
.hud .mult.bump .val,
.strip .mult.bump .val {
  animation: mult-bump 0.5s var(--fx-spring);
}
@keyframes mult-bump {
  0%   { transform: scale(1) rotate(0); }
  28%  { transform: scale(1.42) rotate(-4deg); }
  55%  { transform: scale(0.94) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}
.hud > div,
.strip > div {
  transition: transform 0.22s var(--fx-ease), border-color 0.3s, box-shadow 0.3s;
}
.hud > div:active,
.strip > div:active { transform: scale(0.97); }
.hud .mult.live,
.strip .mult.live {
  border-color: rgba(45,226,255,0.5);
  box-shadow: 0 0 16px rgba(45,226,255, calc(0.2 + var(--glow) * 0.45));
}
.hud .profit.tick .val,
.strip .profit.tick .val { animation: profit-flash 0.45s ease; }
@keyframes profit-flash {
  0%   { transform: scale(1); color: var(--jade-bright); }
  40%  { transform: scale(1.18); color: #fff; }
  100% { transform: scale(1); }
}

/* ---------- History chips ---------- */
.history-chip {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s var(--fx-spring), box-shadow 0.25s;
}
.history-chip::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.28) 48%, transparent 62%);
  transform: translateX(-120%);
  pointer-events: none;
}
.history-chip.new {
  animation: chip-pop 0.55s var(--fx-spring);
}
.history-chip.new::after {
  animation: chip-shine 0.7s 0.12s ease forwards;
}
.history-chip:active { transform: scale(0.9); }
.history-chip.bust { animation: chip-pop 0.5s var(--fx-spring), chip-crack 0.7s 0.15s ease; }
@keyframes chip-pop {
  0%   { transform: scale(0.35) translateX(-16px) rotate(-8deg); opacity: 0; }
  70%  { transform: scale(1.12) translateX(0) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes chip-shine {
  to { transform: translateX(130%); }
}
@keyframes chip-crack {
  0%, 100% { filter: none; }
  30% { filter: saturate(1.4) brightness(1.15); transform: rotate(-3deg) scale(1.05); }
}

/* ---------- Cashout / play CTA ---------- */
.main-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.12s, box-shadow 0.25s, filter 0.25s;
}
.main-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.28) 50%, transparent 65%);
  transform: translateX(-140%);
  pointer-events: none;
}
.main-btn.cashout::after {
  animation: cta-sheen 2.1s ease-in-out infinite;
}
.main-btn.play:not(:disabled)::after {
  animation: cta-sheen 3.4s ease-in-out infinite;
}
@keyframes cta-sheen {
  0%, 55% { transform: translateX(-140%); }
  85%, 100% { transform: translateX(140%); }
}
.main-btn.cashout {
  animation: cashout-pulse var(--pulse-dur) ease-in-out infinite;
}
@keyframes cashout-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 14px rgba(82,183,136, calc(0.4 + var(--glow) * 0.4)); }
  50%      { transform: scale(1.028); box-shadow: 0 8px 28px rgba(82,183,136, calc(0.7 + var(--glow) * 0.65)), 0 0 24px rgba(82,183,136,0.35); }
}
.main-btn.armed { animation: cashout-armed 0.45s var(--fx-spring); }
@keyframes cashout-armed {
  0%   { transform: scale(0.94); filter: brightness(1.3); }
  100% { transform: scale(1); }
}
.main-btn.burst {
  animation: cashout-burst 0.55s var(--fx-spring);
}
@keyframes cashout-burst {
  0%   { transform: scale(0.92); filter: brightness(1.5); }
  45%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.fx-ripple {
  position: absolute;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.55), transparent 70%);
  pointer-events: none;
  animation: fx-ripple 0.62s ease-out forwards;
}
@keyframes fx-ripple {
  0%   { transform: scale(0.2); opacity: 0.9; }
  100% { transform: scale(18); opacity: 0; }
}

/* ---------- Cheer / win / bust overlays ---------- */
.cheer-overlay.show {
  animation: cheer-pop 1.75s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes cheer-pop {
  0%   { opacity: 0; transform: scale(0.92) translateY(8px); filter: saturate(0.8); }
  12%  { opacity: 1; transform: scale(1.04); filter: saturate(1.25); }
  70%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.12) translateY(-6px); }
}
.cheer-burst.show { animation: burst 1.05s ease forwards; }
@keyframes burst {
  0%   { opacity: 0; transform: scale(0.55); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.65); }
}

body.success-flash::before {
  animation: success-flash 0.85s ease-out forwards;
}
@keyframes success-flash {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  100% { opacity: 0; }
}
body.bust-shake .app { animation: bust-shake 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes bust-shake {
  8%, 92% { transform: translate3d(-3px, 1px, 0) rotate(-0.5deg); }
  18%, 82% { transform: translate3d(5px, -3px, 0) rotate(0.7deg); }
  28%, 50%, 70% { transform: translate3d(-8px, 3px, 0) rotate(-1deg); }
  40%, 60% { transform: translate3d(8px, -2px, 0) rotate(0.85deg); }
}

.scene-bg {
  transition: filter 0.45s ease, transform 0.6s var(--fx-ease);
}
.scene-bg.win { transform: scale(1.04); }
.scene-bg.bigwin { animation: scene-glow 1s ease; }
@keyframes scene-glow {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.055); }
  70% { transform: scale(1.02); }
}

/* ---------- Cameo: liquid in the held glass + extra presence ---------- */
.char-cameo.drinking .cameo-glass .cameo-liq {
  animation: cameo-liq-drain 2.4s ease-out forwards;
}
@keyframes cameo-liq-drain {
  0%, 16% { opacity: 0.95; transform: translateY(0); }
  40%     { opacity: 0.7; transform: translateY(6px); }
  55%, 100% { opacity: 0; transform: translateY(16px); }
}
.char-cameo.drinking .cameo-burst {
  animation: cameo-burst-life 2.4s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes cameo-burst-life {
  0%, 8%   { opacity: 0; transform: scale(0.35) rotate(0); }
  18%      { opacity: 1; transform: scale(1.75) rotate(40deg); }
  42%      { opacity: 0.85; transform: scale(2.55) rotate(100deg); }
  70%      { opacity: 0.3; transform: scale(3.4) rotate(160deg); }
  100%     { opacity: 0; transform: scale(3.8) rotate(200deg); }
}
.char-cameo.falling .cameo-portrait {
  animation: cameo-card-pulse 2.6s ease-out forwards;
}
@keyframes cameo-card-pulse {
  0%, 8% { box-shadow: 0 16px 40px rgba(0,0,0,0.9), 0 0 24px rgba(217,83,79,0.4); }
  16%    { box-shadow: 0 16px 40px rgba(0,0,0,0.9), 0 0 70px rgba(217,83,79,1); }
  100%   { box-shadow: 0 16px 40px rgba(0,0,0,0.9), 0 0 20px rgba(217,83,79,0.3); }
}

/* ---------- Picker cards ---------- */
.char-card {
  transform-style: preserve-3d;
  transition: transform 0.18s var(--fx-ease), box-shadow 0.25s, border-color 0.2s;
}
.char-card.tilting {
  transition: transform 0.08s linear;
}
.char-card.selected {
  animation: card-selected 2.4s ease-in-out infinite;
}
@keyframes card-selected {
  0%, 100% { box-shadow: 0 0 0 2px var(--tier-color), 0 8px 20px rgba(0,0,0,0.5); }
  50%      { box-shadow: 0 0 0 3px var(--tier-color), 0 10px 28px rgba(245,205,110,0.28); }
}
.char-card.locked.denied {
  animation: card-deny 0.42s ease;
}
@keyframes card-deny {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px) rotate(-1.5deg); }
  40% { transform: translateX(6px) rotate(1.5deg); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
/* ---------- Controls ---------- */
.bet-chips button,
.poison-chips button,
.bet-quick button {
  position: relative;
  overflow: hidden;
  transition: transform 0.12s var(--fx-spring), background 0.2s, border-color 0.2s;
}
.bet-chips button:hover,
.poison-chips button:hover,
.bet-quick button:hover {
  border-color: rgba(45,226,255,0.55);
  background: rgba(45,226,255,0.16);
}
.bet-chips button:active,
.poison-chips button:active,
.bet-quick button:active { transform: scale(0.9); }
.bet-chips button.picked,
.poison-chips button.picked,
.bet-quick button.picked {
  animation: bet-picked 0.35s var(--fx-spring);
  border-color: var(--cyan);
  background: rgba(45,226,255,0.2);
}
@keyframes bet-picked {
  0% { transform: scale(0.88); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.mode-toggle button {
  transition: background 0.22s, color 0.22s, transform 0.15s;
}
.mode-toggle button:active { transform: scale(0.94); }
input[type=range]::-webkit-slider-thumb {
  transition: transform 0.15s var(--fx-spring), box-shadow 0.2s;
}
input[type=range]:active::-webkit-slider-thumb {
  transform: scale(1.18);
  box-shadow: 0 0 0 5px rgba(45,226,255,0.35), 0 2px 8px rgba(0,0,0,0.45);
}

/* ---------- Toast / reaction / round-end ---------- */
.toast.show {
  animation: toast-in 0.45s var(--fx-spring);
}
@keyframes toast-in {
  0%   { transform: translateX(-50%) translateY(-28px) scale(0.86); opacity: 0; }
  70%  { transform: translateX(-50%) translateY(4px) scale(1.04); opacity: 1; }
  100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}
.char-reaction.show {
  animation: react-in 0.42s var(--fx-spring);
}
@keyframes react-in {
  0%   { transform: translateY(28px) scale(0.94); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.outcome.show {
  animation: outcome-in 0.32s var(--fx-spring);
}
@keyframes outcome-in {
  0%   { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ---------- Avatar idle breath when not cheering ---------- */
.avatar-btn-inner {
  animation: avatar-idle 3.6s ease-in-out infinite;
}
@keyframes avatar-idle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}
.avatar-btn.cheer .avatar-btn-inner { animation: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .room-smoke, .neon-flicker, .ktv-haze, .ktv-beams, .ktv-scan, .tray::after, .tray-led,
  .tray.pulse, .main-btn.cashout, .main-btn.play:not(:disabled)::after,
  .main-btn.cashout::after, .char-card.selected,
  .avatar-btn-inner, .stage-mult, .stage-board, .climb-toast,
  .win-line .wl-cn {
    animation: none !important;
  }
  .glass.pending { animation: none; filter: brightness(1.2); }
  .glass.pending .liquid-group,
  .glass.pending .glass-pour-stream,
  .glass.pending .glass-bubbles circle { animation: none; }
  .glass.enter { animation: none; opacity: 1; }
  .tray { transition: none; }
  .history-chip.new { animation: none; }
}