/* ── Animaties (#98 CSS-extractie) ────────────────────────────────────
   Generieke keyframes + trigger-classes gebruikt door meerdere schermen.
   Scherm-specifieke keyframes (pulse, star-pop, streak-bump, pulse-group)
   blijven in hun eigen stylesheet. */

@keyframes bounce-pop {
  0%   { transform: scale(0.75); opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-7px); }
  40%       { transform: translateX(7px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
@keyframes confetti-fly {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}
.pop   { animation: bounce-pop 0.3s ease-out; }
.shake { animation: shake 0.4s ease-out; }