/* ═══════════════════════════════════════════════════════════
   teeparty — Keyframe Animations
    Design System — fast, purposeful, accessible
   ═══════════════════════════════════════════════════════════ */

/* ── Core Keyframes ─────────────────────────────────────── */

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

@keyframes checkmarkDraw {
  0%   { stroke-dashoffset: 56; }
  100% { stroke-dashoffset: 0; }
}

/* ── New Keyframes ──────────────────────────────────────── */

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px var(--color-key-glow); }
  50%      { box-shadow: 0 0 40px var(--color-key-glow), 0 0 60px var(--color-key-glow); }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.4;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes slideOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* ── Utility Classes ─────────────────────────────────────── */

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-fadeIn {
  animation: fadeIn 150ms ease forwards;
}

.animate-slideUp {
  animation: slideUp 350ms ease-out forwards;
}

.animate-slideDown {
  animation: slideDown 250ms ease-out forwards;
}

.animate-scaleIn {
  animation: scaleIn 350ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-pulseGlow {
  animation: pulseGlow 3s ease-in-out infinite;
}

.animate-gradientShift {
  background-size: 200% 200%;
  animation: gradientShift 6s ease infinite;
}

/* ── Stagger Delays ──────────────────────────────────────── */

.stagger-1 { animation-delay: 50ms; }
.stagger-2 { animation-delay: 100ms; }
.stagger-3 { animation-delay: 150ms; }
.stagger-4 { animation-delay: 200ms; }
.stagger-5 { animation-delay: 250ms; }

/* ── Reduced Motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .animate-spin { animation-duration: 0s; }
  .animate-fadeIn { animation: none; opacity: 1; }
  .animate-slideUp { animation: none; opacity: 1; transform: none; }
  .animate-slideDown { animation: none; opacity: 1; transform: none; }
  .animate-scaleIn { animation: none; opacity: 1; transform: none; }
  .animate-pulseGlow { animation: none; }
  .animate-gradientShift { animation: none; }
  * { transition-duration: 0s !important; }
}