/* =================================================================
   PAES Practice · Shared juice CSS (Phase 1)
   ----------------------------------------------------------------
   Five juice effects every game can opt into without re-writing
   keyframes. Brief Section 3 Phase 1: "Standardise five juice
   effects (screen shake, score-pop, easing overshoot, particle
   burst, button press scale). Make them shared components every
   game can call."

   1. .juice-shake     short screen-shake on a wrapper
   2. .juice-pop       count-up pop (apply on score chip change)
   3. .juice-overshoot bouncy enter (apply when an element appears)
   4. .juice-burst     element flash on correct events
   5. button:active    site-wide press scale (no class needed)

   Particle burst itself ships as PAESConfetti.{burst,cannon,from}
   in confetti.js, so the CSS layer here only covers the wrapper
   classes. All keyframes respect prefers-reduced-motion.
   ================================================================= */

/* 5 — site-wide button press scale. Applies to any button-like
   element so the whole site feels tactile. Filing's drag tiles
   and POS's tender buttons inherit this for free. */
button:active,
.btn:active,
.game-card:active,
.ws-task-tile:active,
[role="button"]:active {
  transform: translateY(1px) scale(0.97);
  transition: transform 0.04s ease-out;
}

/* 1 — Screen shake. Apply to a stage wrapper for ~0.4s on a wrong
   answer or a 50LB collision. */
@keyframes juice-shake {
  0%, 100% { transform: translateX(0); }
  10%      { transform: translateX(-4px); }
  20%      { transform: translateX(4px); }
  30%      { transform: translateX(-3px); }
  40%      { transform: translateX(3px); }
  50%      { transform: translateX(-2px); }
  60%      { transform: translateX(2px); }
  70%      { transform: translateX(-1px); }
  80%      { transform: translateX(1px); }
  90%      { transform: translateX(0); }
}
.juice-shake { animation: juice-shake 0.4s ease-in-out; }

/* 2 — Score pop. Counter chips and total values pulse when they
   change. Bouncy cubic-bezier sells the increment. Add the class
   for one frame, then remove on animationend. */
@keyframes juice-pop {
  0%   { transform: scale(1);    }
  50%  { transform: scale(1.18); }
  100% { transform: scale(1);    }
}
.juice-pop { animation: juice-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* 3 — Easing overshoot. Use this when a card, modal, or feedback
   bubble enters the screen. The 1.6 cubic-bezier overshoots then
   settles, which is the difference between sterile and alive. */
@keyframes juice-overshoot {
  0%   { transform: scale(0.6) translateY(8px); opacity: 0; }
  60%  { transform: scale(1.06) translateY(-2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.juice-overshoot { animation: juice-overshoot 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* 4 — Burst flash. A subtle radial flash behind the element that
   was just answered correctly. Cheaper than a particle burst when
   you only want a "correct" confirmation, not a celebration. */
@keyframes juice-burst {
  0%   { box-shadow: 0 0 0 0 rgba(93, 216, 160, 0.6); }
  100% { box-shadow: 0 0 0 24px rgba(93, 216, 160, 0); }
}
.juice-burst { animation: juice-burst 0.6s ease-out; }

/* Reduced-motion respect: drop animations to no-ops. The structural
   transitions still apply (button squash uses transition, not
   keyframes, so it stays). */
@media (prefers-reduced-motion: reduce) {
  .juice-shake,
  .juice-pop,
  .juice-overshoot,
  .juice-burst {
    animation: none !important;
  }
}