/* ==========================================================================
   Animations
   ========================================================================== */

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

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

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

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

@keyframes toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

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

@keyframes ripple {
  from { transform: scale(0); opacity: 0.45; }
  to { transform: scale(2.6); opacity: 0; }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0px var(--amber-glow); }
  50% { box-shadow: 0 0 22px var(--amber-glow); }
}

@keyframes count-flicker {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}

.animate-fade-up { animation: fade-in-up var(--dur-med) var(--ease-out) both; }
.animate-glow { animation: glow-pulse 2.4s ease-in-out infinite; }

.stagger > * { animation: fade-in-up var(--dur-med) var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 120ms; }
.stagger > *:nth-child(4) { animation-delay: 180ms; }
.stagger > *:nth-child(5) { animation-delay: 240ms; }
.stagger > *:nth-child(6) { animation-delay: 300ms; }

/* Ripple effect container (JS adds .ripple-span on click) */
.ripple-host { position: relative; overflow: hidden; }
.ripple-span {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: ripple 550ms ease-out;
  pointer-events: none;
}

.value-flash { animation: count-flicker 220ms ease-out; }