/* Keyframes and motion switches.
   Only transform and opacity are animated (smooth 60 fps on cheap tablets).
   Calm mode (html.calm, set from the settings dialog) and the OS "reduce motion"
   preference both swap entrances for plain fades and pause decorative loops. */

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pop-in {
  0% { opacity: 0; transform: scale(0.55) translateY(24px); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes drop-in {
  0% { opacity: 0; transform: translateY(-60px) scale(0.9); }
  100% { opacity: 1; transform: none; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes drift { from { transform: translateX(-30vw); } to { transform: translateX(130vw); } }
@keyframes twinkle { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes pulse-glow { 0%, 100% { transform: scale(1); opacity: 0.75; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes ready-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
@keyframes wobble {
  0%, 82%, 100% { transform: rotate(0) scale(1); }
  85% { transform: rotate(-4deg) scale(1.04); }
  88% { transform: rotate(4deg) scale(1.06); }
  91% { transform: rotate(-3deg) scale(1.04); }
  94% { transform: rotate(2deg) scale(1.02); }
}
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes wave { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-28deg); } 75% { transform: rotate(12deg); } }
@keyframes bubble-in {
  0% { opacity: 0; transform: scale(0.4) translateY(10px); }
  70% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: none; }
}
@keyframes sparkle {
  0% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  40% { opacity: 1; transform: scale(1.2) rotate(70deg); }
  100% { opacity: 0; transform: scale(0.4) rotate(140deg); }
}
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes star-in { 0% { opacity: 0; transform: scale(0.2) rotate(-40deg); } 70% { opacity: 1; transform: scale(1.3) rotate(8deg); } 100% { opacity: 1; transform: none; } }
@keyframes glow-ring {
  0% { box-shadow: 0 0 0 0 var(--good-glow); }
  100% { box-shadow: 0 0 0 22px rgba(60, 207, 110, 0); }
}

/* Staggered springy entrance for lists of cards/tiles: add class "stagger" to the list. */
.stagger > * {
  animation: var(--enter) 560ms var(--ease-spring) both;
}
.stagger > :nth-child(1) { animation-delay: 40ms; }
.stagger > :nth-child(2) { animation-delay: 80ms; }
.stagger > :nth-child(3) { animation-delay: 120ms; }
.stagger > :nth-child(4) { animation-delay: 160ms; }
.stagger > :nth-child(5) { animation-delay: 200ms; }
.stagger > :nth-child(6) { animation-delay: 240ms; }
.stagger > :nth-child(7) { animation-delay: 280ms; }
.stagger > :nth-child(8) { animation-delay: 320ms; }
.stagger > :nth-child(9) { animation-delay: 360ms; }
.stagger > :nth-child(10) { animation-delay: 400ms; }
.stagger > :nth-child(11) { animation-delay: 440ms; }
.stagger > :nth-child(12) { animation-delay: 480ms; }
.stagger > :nth-child(13) { animation-delay: 520ms; }
.stagger > :nth-child(14) { animation-delay: 560ms; }
.stagger > :nth-child(15) { animation-delay: 600ms; }
.stagger > :nth-child(16) { animation-delay: 640ms; }
.stagger > :nth-child(17) { animation-delay: 680ms; }
.stagger > :nth-child(18) { animation-delay: 720ms; }
.stagger > :nth-child(19) { animation-delay: 760ms; }
.stagger > :nth-child(20) { animation-delay: 800ms; }
.stagger > :nth-child(n+21) { animation-delay: 840ms; }

.rise { animation: var(--enter-rise) var(--dur-3) var(--ease-out) both; }
.rise--2 { animation-delay: 120ms; }
.rise--3 { animation-delay: 240ms; }

/* ---------- calm mode & reduced motion ---------- */
html.calm {
  --enter: fade-in;
  --enter-rise: fade-in;
  --loops: paused;
  scroll-behavior: auto;
}
/* the completion screen fades in instead of bouncing */
html.calm .complete.is-shown .complete__card,
html.calm .complete.is-shown .complete__trophy svg,
html.calm .complete.is-shown .complete__star.is-earned { animation-name: fade-in; }
@media (prefers-reduced-motion: reduce) {
  :root {
    --enter: fade-in;
    --enter-rise: fade-in;
    --loops: paused;
  }
  html { scroll-behavior: auto; }
  .complete.is-shown .complete__card,
  .complete.is-shown .complete__trophy svg,
  .complete.is-shown .complete__star.is-earned { animation-name: fade-in; }
}