@keyframes card-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes correct-pop {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.025); }
}

@keyframes wrong-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  55% { transform: translateX(5px); }
  80% { transform: translateX(-2px); }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes confetti-fall {
  to { transform: translate3d(var(--drift), 105vh, 0) rotate(720deg); }
}

.enter-card { animation: card-in 300ms ease both; }
.prompt-card.is-correct { animation: correct-pop 300ms ease; border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.prompt-card.is-wrong { animation: wrong-shake 280ms ease; border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.toast { animation: toast-in 200ms ease both; }
.confetti { animation: confetti-fall var(--fall-duration) linear forwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
  .confetti-layer { display: none; }
}