/* Liar's Poker — stepped (pixel-feel) animations. Durations mirror DURATIONS in animations.js.
   Add the class to trigger; remove it (or use play() from animations.js) to re-trigger. */

:root {
  --dur-bid-pop: 360ms;
  --dur-shake: 480ms;
  --dur-flash: 480ms;
  --dur-banner: 1600ms;
  --dur-flip: 400ms;
  --dur-slide-in: 280ms;
  --stagger: 300ms;
  --dur-tally: 160ms;
  --dur-blink: 800ms;
  --dur-digit-blink: 360ms;
}

/* generic blink (cursor, "PRESS START") */
@keyframes lp-blink { 0% { opacity: 1; } 50% { opacity: 0; } }
.anim-blink { animation: lp-blink var(--dur-blink) steps(1, end) infinite; }
.anim-blink-fast { animation: lp-blink var(--dur-digit-blink) steps(1, end) infinite; }

/* BID: bid display drops in and pops (overshoot), 6 frames */
@keyframes lp-bid-pop {
  0%   { transform: translateY(-24px) scale(.5); opacity: 0; }
  33%  { transform: translateY(0) scale(1.2); opacity: 1; }
  66%  { transform: scale(.92); }
  100% { transform: scale(1); }
}
.anim-bid-pop { animation: lp-bid-pop var(--dur-bid-pop) steps(2, end) both; }

/* new bid slides in from right (use on .px-bid__value) */
@keyframes lp-slide-left { 0% { transform: translateX(48px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
.anim-bid-slide { animation: lp-slide-left var(--dur-slide-in) steps(4, end) both; }

/* CHALLENGE: screen shake (apply to the game root) */
@keyframes lp-shake {
  0% { transform: translate(8px, 0); } 12.5% { transform: translate(-8px, 4px); }
  25% { transform: translate(8px, -4px); } 37.5% { transform: translate(-4px, 0); }
  50% { transform: translate(4px, 4px); } 62.5% { transform: translate(-4px, -4px); }
  75% { transform: translate(4px, 0); } 87.5% { transform: translate(0, 4px); }
  100% { transform: translate(0, 0); }
}
.anim-shake { animation: lp-shake var(--dur-shake) steps(1, end) both; }

/* CHALLENGE: red flash (apply to .px-flash overlay) — 2 hard flashes */
@keyframes lp-flash { 0% { opacity: .85; } 25% { opacity: 0; } 50% { opacity: .6; } 75%, 100% { opacity: 0; } }
.anim-flash { animation: lp-flash var(--dur-flash) steps(1, end) both; }

/* CHALLENGE / WIN / LOSE: banner wipes in (6 frames), holds, wipes out */
@keyframes lp-banner {
  0%   { transform: translateX(-110%); }
  18%  { transform: translateX(0); }
  82%  { transform: translateX(0); }
  100% { transform: translateX(110%); }
}
.anim-banner { animation: lp-banner var(--dur-banner) steps(24, end) both; }
/* banner that stays (for final win/lose): wipe in only */
@keyframes lp-banner-in { 0% { transform: translateX(-110%); } 100% { transform: translateX(0); } }
.anim-banner-in { animation: lp-banner-in 300ms steps(6, end) both; }
/* text inside the banner jitters for "LIAR!" */
@keyframes lp-jitter { 0% { transform: translate(0, 0); } 25% { transform: translate(2px, -2px); } 50% { transform: translate(-2px, 2px); } 75% { transform: translate(2px, 2px); } }
.anim-jitter { display: inline-block; animation: lp-jitter 200ms steps(1, end) infinite; }

/* REVEAL: bill flip (squash on X; JS swaps face-down → face-up at 50%) */
@keyframes lp-flip { 0% { transform: scaleX(1); } 50% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
.anim-flip { animation: lp-flip var(--dur-flip) steps(8, end) both; }

/* REVEAL: bills slide up one by one. Set style="--i: n" on each for stagger. */
@keyframes lp-slide-up { 0% { transform: translateY(32px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.anim-slide-in { animation: lp-slide-up var(--dur-slide-in) steps(4, end) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }

/* REVEAL: tally number bump each increment */
@keyframes lp-bump { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
.anim-bump { animation: lp-bump var(--dur-tally) steps(2, end) both; }

/* WIN: gold color cycle; LOSE: drop + grey */
@keyframes lp-win-cycle { 0% { color: var(--c-highlight); } 33% { color: var(--c-text); } 66% { color: var(--c-money-light); } }
.anim-win { animation: lp-win-cycle 480ms steps(1, end) infinite; }
@keyframes lp-lose-drop { 0% { transform: translateY(-16px); } 50% { transform: translateY(4px); } 100% { transform: translateY(0); } }
.anim-lose { animation: lp-lose-drop 400ms steps(4, end) both; }

/* Reduced motion: no movement/flashing. Things simply appear in their final state. */
@media (prefers-reduced-motion: reduce) {
  .anim-blink, .anim-blink-fast, .anim-bid-pop, .anim-bid-slide, .anim-shake, .anim-flash, .anim-banner, .anim-banner-in,
  .anim-jitter, .anim-flip, .anim-slide-in, .anim-bump, .anim-win, .anim-lose, .px-chip.is-active::before {
    animation: none !important;
  }
}