@keyframes pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes soft-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 184, 77, 0.7); }
  50% { box-shadow: 0 0 0 12px rgba(255, 184, 77, 0); }
}

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

@keyframes robot-wave {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(-7deg); }
  65% { transform: rotate(6deg); }
}

.is-correct { animation: pop 360ms ease; }
.is-incorrect { animation: soft-shake 260ms ease; }
.is-hinting { animation: pulse-glow 900ms ease 2; }
.screen--active .float-in { animation: float-in 280ms ease both; }
.mascot-card svg { animation: robot-wave 2400ms ease-in-out infinite; transform-origin: 50% 80%; }

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