/* ==========================================================================
   韓運字 — Animations
   ========================================================================== */

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

@keyframes dial-spin {
  0% { transform: rotate(0deg) scale(1); }
  60% { transform: rotate(360deg) scale(1.15); }
  100% { transform: rotate(720deg) scale(1); }
}

@keyframes stamp-pop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.stamp-day.filled .stamp-mark { animation: stamp-pop 0.4s cubic-bezier(.3,.9,.4,1); }

@keyframes card-collect {
  0% { transform: scale(0.6) rotate(-8deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.word-card-enter { animation: card-collect 0.4s ease-out; }

@keyframes gauge-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}
.gauge-fill.pulsing { animation: gauge-pulse 0.9s ease-in-out infinite; }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
.toast { animation: toast-in 0.3s ease-out; }

@keyframes particle-float {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: var(--p-op, 0.5); }
  90% { opacity: var(--p-op, 0.5); }
  100% { transform: translateY(-120vh) translateX(var(--p-drift, 20px)); opacity: 0; }
}
.particle {
  position: absolute;
  bottom: -10vh;
  border-radius: 50%;
  animation: particle-float linear infinite;
  pointer-events: none;
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(249,202,36,0.3); }
  50% { box-shadow: 0 0 22px rgba(249,202,36,0.6); }
}
.glow-pulse { animation: glow-pulse 2.2s ease-in-out infinite; }

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes fade-scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
.fade-scale-in { animation: fade-scale-in 0.35s ease-out; }

@keyframes shake-no {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.shake { animation: shake-no 0.5s; }

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