/* ==========================================================================
   Animations and reduced-motion handling.
   ========================================================================== */

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

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

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

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  50% {
    transform: translateX(4px);
  }
  75% {
    transform: translateX(-2px);
  }
}

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

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.2);
  }
}

@keyframes flame {
  from {
    transform: scaleY(0.8) scaleX(0.9);
    opacity: 0.8;
  }
  to {
    transform: scaleY(1.15) scaleX(1.05);
    opacity: 1;
  }
}

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

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes confetti-fall {
  from {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
  to {
    opacity: 0.2;
    transform: translateY(105vh) rotate(var(--rotate));
  }
}

@keyframes rocket-bob {
  0%,
  100% {
    transform: rotate(180deg) translateY(0);
  }
  50% {
    transform: rotate(180deg) translateY(-3px);
  }
}

@keyframes star-burst {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(-16deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.12) rotate(3deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 217, 61, 0.3);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(255, 217, 61, 0);
  }
}

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

@keyframes bubble-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.result-rocket {
  animation: float-y 3.2s ease-in-out infinite;
}

.big-stars .star-filled {
  animation: star-burst 0.5s var(--ease) both;
}

.big-stars .star:nth-child(2) {
  animation-delay: 0.12s;
}

.big-stars .star:nth-child(3) {
  animation-delay: 0.24s;
}

.rocket-body {
  animation: rocket-bob 2.8s ease-in-out infinite;
}

.hero-logo {
  animation: float-y 4s ease-in-out infinite;
}

.answer-correct {
  animation: answer-pop 0.3s var(--ease);
}

/* Explicit user choice: reduce animation */
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.001ms !important;
}

html[data-motion="reduce"] .confetti-piece {
  display: none;
}

/* Device preference */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="allow"]) *,
  html:not([data-motion="allow"]) *::before,
  html:not([data-motion="allow"]) *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  html:not([data-motion="allow"]) .confetti-piece {
    display: none;
  }

  html:not([data-motion="allow"]) .hero-logo,
  html:not([data-motion="allow"]) .result-rocket,
  html:not([data-motion="allow"]) .rocket-body {
    animation: none;
  }
}