/* ============================================================
   MyFlowChamp — Animations & Motion
   All keyframes live here. No inline animation styles elsewhere.
   Every animation has a prefers-reduced-motion fallback.
   ============================================================ */

/* ── 1. fadeSlideUp — page load / card mount ─────────────── */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeSlideUp 0.25s ease-out both;
}

/* ── 2. pulse-ring — active flow XP pulse ────────────────── */
@keyframes pulse-ring {
  0%   { opacity: 0.8; transform: scale(1);   }
  100% { opacity: 0;   transform: scale(1.7); }
}

.flow-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.flow-check.pulse-active::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--mfc-gold);
  animation: pulse-ring 1.4s ease-out infinite;
  pointer-events: none;
}

/* ── 3. xp-earn — XP badge scale pulse ───────────────────── */
@keyframes xpEarn {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); filter: brightness(1.3); }
  100% { transform: scale(1); }
}

.xp-earn {
  animation: xpEarn 0.4s ease-out;
}

/* ── 4. streak-burst — streak milestone glow ─────────────── */
@keyframes streakBurst {
  0%   { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6); }
  70%  { box-shadow: 0 0 0 18px rgba(61, 220, 132, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); }
}

.streak-burst {
  animation: streakBurst 0.6s ease-in-out;
}

/* ── 5. level-up-flash — full-viewport glow ──────────────── */
@keyframes levelUpFlash {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; pointer-events: none; }
}

.level-up-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(245, 166, 35, 0.22) 0%,
    rgba(108, 99, 255, 0.14) 50%,
    transparent 80%
  );
  animation: levelUpFlash 1.2s ease-in-out forwards;
}

/* ── 6. progress-fill — bar width expand ─────────────────── */
@keyframes progressFill {
  from { width: 0%; }
  to   { width: var(--target-width, 100%); }
}

.progress-fill.animate {
  animation: progressFill 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ── 7. bar-grow — chart bars grow from bottom ───────────── */
@keyframes barGrow {
  from {
    transform: scaleY(0);
    transform-origin: bottom;
  }
  to {
    transform: scaleY(1);
    transform-origin: bottom;
  }
}

.bar-track span {
  animation: barGrow 0.5s ease-out both;
}

/* Stagger delay for sequential bars */
.bar-row:nth-child(1) .bar-track span { animation-delay: 0ms;   }
.bar-row:nth-child(2) .bar-track span { animation-delay: 80ms;  }
.bar-row:nth-child(3) .bar-track span { animation-delay: 160ms; }
.bar-row:nth-child(4) .bar-track span { animation-delay: 240ms; }
.bar-row:nth-child(5) .bar-track span { animation-delay: 320ms; }
.bar-row:nth-child(6) .bar-track span { animation-delay: 400ms; }
.bar-row:nth-child(7) .bar-track span { animation-delay: 480ms; }

/* ── 8. shimmer — skeleton loader ────────────────────────── */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 9. spin — loading spinner ───────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spin {
  animation: spin 0.8s linear infinite;
}

/* ── Reduced motion fallbacks ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Pulse ring: stop entirely (do not substitute a slower version) */
  .flow-check.pulse-active::after {
    animation: none;
  }

  /* Progress bar: instant */
  .progress-fill,
  .progress-fill.animate {
    animation: none;
    transition: none;
  }

  /* Bar grow: instant */
  .bar-track span {
    animation: none;
  }

  /* Level up flash: no overlay */
  .level-up-overlay {
    display: none;
  }

  /* Fade-in: instant appear */
  .fade-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
}