/* ── KEYFRAMES ── */

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

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

@keyframes slideRight {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideLeft {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes checkPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3) rotate(-8deg); }
  70%  { transform: scale(0.9) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes progressFill {
  from { width: 0%; }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 var(--c-green-glow); }
  50%       { box-shadow: 0 0 0 8px transparent; }
}

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

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(8px) scale(0.96); }
}

@keyframes floatBg {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%       { transform: translate(20px, -15px) rotate(2deg); }
  66%       { transform: translate(-10px, 10px) rotate(-1deg); }
}

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

@keyframes confettiFall {
  0%   { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(60px) rotate(360deg); opacity: 0; }
}

/* ── UTILITY ANIMATION CLASSES ── */

.anim-fade-up   { animation: fadeUp  var(--t-slow) var(--ease-out) both; }
.anim-fade-in   { animation: fadeIn  var(--t-mid)  var(--ease-out) both; }
.anim-scale-in  { animation: scaleIn var(--t-mid)  var(--ease-out) both; }
.anim-slide-right { animation: slideRight var(--t-slow) var(--ease-out) both; }

/* Stagger delays for grid children */
.stagger-1  { animation-delay: 40ms; }
.stagger-2  { animation-delay: 80ms; }
.stagger-3  { animation-delay: 120ms; }
.stagger-4  { animation-delay: 160ms; }
.stagger-5  { animation-delay: 200ms; }
.stagger-6  { animation-delay: 240ms; }
.stagger-7  { animation-delay: 280ms; }
.stagger-8  { animation-delay: 320ms; }
.stagger-9  { animation-delay: 360ms; }
.stagger-10 { animation-delay: 400ms; }
.stagger-11 { animation-delay: 440ms; }
.stagger-12 { animation-delay: 480ms; }
.stagger-13 { animation-delay: 520ms; }
.stagger-14 { animation-delay: 560ms; }

/* Phase item stagger */
.item-anim { animation: staggerFadeUp var(--t-mid) var(--ease-out) both; }

/* Check animation */
.check-pop { animation: checkPop 0.4s var(--ease-spring); }

/* Shimmer loading */
.shimmer {
  background: linear-gradient(90deg,
    var(--c-bg3) 25%,
    var(--c-bg4) 50%,
    var(--c-bg3) 75%);
  background-size: 200% auto;
  animation: shimmer 1.5s infinite linear;
}

/* Progress bar entrance */
.progress-bar-animate {
  animation: progressFill 0.8s var(--ease-out) both;
}