/* ============================================================
   Keyframes & reusable motion classes
   ============================================================ */

@keyframes hue-drift   { to { filter: hue-rotate(360deg); } }
@keyframes spin        { to { transform: rotate(360deg); } }
@keyframes float-y     { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes bob         { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes pulse-soft  { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes pop-in {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes rise-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  15% { transform: translateX(-10px) rotate(-1deg); }
  30% { transform: translateX(9px) rotate(1deg); }
  45% { transform: translateX(-7px); }
  60% { transform: translateX(6px); }
  80% { transform: translateX(-3px); }
}
@keyframes correct-punch {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06) rotate(-1deg); }
  100% { transform: scale(1); }
}
@keyframes ring-sweep { to { stroke-dashoffset: 0; } }
@keyframes shimmer {
  0%   { background-position: -180% 0; }
  100% { background-position: 180% 0; }
}
@keyframes badge-shine {
  0%,100% { box-shadow: 0 0 0 rgba(255,210,63,0); }
  50%     { box-shadow: 0 0 26px rgba(255,210,63,0.7); }
}
@keyframes toast-in {
  from { transform: translateY(-24px) scale(0.9); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes confetti-fall {
  to { transform: translate3d(var(--dx,0), 118vh, 0) rotate(var(--dr, 720deg)); opacity: 0; }
}
@keyframes count-pop {
  0% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes flash-good {
  0% { box-shadow: 0 0 0 0 rgba(61,255,176,0.0), inset 0 0 0 0 rgba(61,255,176,0); }
  30%{ box-shadow: 0 0 60px 6px rgba(61,255,176,0.35), inset 0 0 40px rgba(61,255,176,0.18); }
  100%{ box-shadow: 0 0 0 0 rgba(61,255,176,0); }
}
@keyframes flash-bad {
  0%  { box-shadow: inset 0 0 0 0 rgba(255,84,112,0); }
  30% { box-shadow: inset 0 0 60px rgba(255,84,112,0.28); }
  100%{ box-shadow: inset 0 0 0 0 rgba(255,84,112,0); }
}

.anim-float { animation: float-y 4s var(--e-in-out) infinite; }
.anim-bob   { animation: bob 3.4s var(--e-in-out) infinite; }
.anim-pop   { animation: pop-in var(--dur-3) var(--e-spring) both; }
.anim-rise  { animation: rise-in var(--dur-3) var(--e-out) both; }
.anim-shake { animation: shake 0.5s var(--e-in-out); }

/* staggered list entrance */
.stagger > * { animation: rise-in var(--dur-3) var(--e-out) both; }
.stagger > *:nth-child(1){ animation-delay: 40ms; }
.stagger > *:nth-child(2){ animation-delay: 90ms; }
.stagger > *:nth-child(3){ animation-delay: 140ms; }
.stagger > *:nth-child(4){ animation-delay: 190ms; }
.stagger > *:nth-child(5){ animation-delay: 240ms; }
.stagger > *:nth-child(6){ animation-delay: 290ms; }
.stagger > *:nth-child(7){ animation-delay: 340ms; }
.stagger > *:nth-child(8){ animation-delay: 390ms; }
.stagger > *:nth-child(9){ animation-delay: 440ms; }

@media (prefers-reduced-motion: reduce) {
  .anim-float, .anim-bob, .anim-pop, .anim-rise, .anim-shake,
  .stagger > * { animation: none !important; }
  #css-fallback { animation: none !important; }
}

/* User-forced "less motion" (settings toggle). */
body.reduce *, body.reduce *::before, body.reduce *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0ms !important;
  transition-duration: 0.001ms !important;
}
body.reduce #css-fallback { animation: none !important; }