/* Money Adventure — motion.
 *
 * Animation is used where it carries meaning: a coin landing, a wrong answer
 * wobbling, a hint pulsing, stars arriving one at a time. Nothing loops
 * forever, nothing moves while a child is reading, and every rule here is
 * switched off by `.reduced-motion` at the bottom of the file.
 */

@keyframes ma-pop {
  0% { transform: scale(0.82); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes ma-wobble {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  45% { transform: translateX(6px); }
  70% { transform: translateX(-4px); }
}

@keyframes ma-drop-in {
  from { transform: translateY(-16px) scale(0.9); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes ma-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 138, 91, 0.55); }
  50% { box-shadow: 0 0 0 14px rgba(255, 138, 91, 0); }
}

@keyframes ma-star-in {
  from { transform: scale(0.2) rotate(-40deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes ma-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes ma-arrow-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* A coin dropping into the tray. */
.tray .money-card.is-placed { animation: ma-drop-in 240ms cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Counting a coin lifts it out of the row. */
.money-card.is-counted { transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Wrong answers wobble — they never flash red and never buzz. */
.choice-card.is-wrong,
.tray.is-wrong { animation: ma-wobble 420ms ease; }

.choice-card.is-correct { animation: ma-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1); }

/* The hint ladder: stage one glows, stage two adds the bobbing arrow. */
.hint-glow { animation: ma-pulse 1.5s ease-in-out 2; border-radius: var(--radius-sm); }
.hint-arrow { animation: ma-arrow-bob 900ms ease-in-out infinite; }

/* Stars land one after another so three stars feel like three events. */
.result-stars svg { animation: ma-star-in 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.result-stars svg { animation-delay: calc(var(--star-index, 1) * 180ms); }

.reward-row { animation: ma-drop-in 320ms ease both; }
.play__prompt { animation: ma-drop-in 220ms ease; }
.district:not(:disabled) .district__emoji { animation: ma-float 3.6s ease-in-out infinite; }
.district:nth-child(2n) .district__emoji { animation-delay: 0.8s; }

.numberline.is-arrived .numberline__marker { animation: ma-pop 300ms cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Honour the OS setting and the in-game override. Nothing above survives this:
 * transitions collapse to instant rather than being merely shortened, so a
 * child who needs stillness gets stillness. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}