/* ═══════════════════════════════════════════
   CAREER OS — ANIMATIONS
   ═══════════════════════════════════════════ */

/* ── Entry animations ── */
@keyframes fadeIn {
  from { opacity:0; } to { opacity:1; }
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeDown {
  from { opacity:0; transform:translateY(-14px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(0.92); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.spin {
  animation: spin 2s linear infinite;
}
@keyframes slideInLeft {
  from { opacity:0; transform:translateX(-24px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes slideInRight {
  from { opacity:0; transform:translateX(24px); }
  to   { opacity:1; transform:translateX(0); }
}

/* ── XP & task completion ── */
@keyframes xpPulse {
  0%   { box-shadow:0 0 0 0 var(--primary-glow); }
  60%  { box-shadow:0 0 0 12px transparent; }
  100% { box-shadow:0 0 0 0 transparent; }
}
@keyframes checkPop {
  0%   { transform:scale(1); }
  40%  { transform:scale(1.35); }
  70%  { transform:scale(0.88); }
  100% { transform:scale(1); }
}
@keyframes xpFloat {
  0%   { opacity:1; transform:translateY(0) scale(1); }
  80%  { opacity:1; }
  100% { opacity:0; transform:translateY(-50px) scale(0.8); }
}
@keyframes badgePop {
  0%   { opacity:0; transform:scale(0.5) translateY(20px); }
  60%  { opacity:1; transform:scale(1.15) translateY(-4px); }
  100% { opacity:1; transform:scale(1) translateY(0); }
}

/* ── Streak flame ── */
@keyframes flameDance {
  0%,100% { transform:scaleY(1) rotate(-1deg); }
  25%      { transform:scaleY(1.05) rotate(1deg); }
  50%      { transform:scaleY(0.95) rotate(-0.5deg); }
  75%      { transform:scaleY(1.08) rotate(0.8deg); }
}

/* ── Level up ── */
@keyframes levelGlow {
  0%,100% { box-shadow: 0 0 20px var(--primary-glow); }
  50%     { box-shadow: 0 0 60px var(--primary-glow), 0 0 100px var(--primary-glow); }
}
@keyframes confettiFall {
  0%   { transform:translateY(-20px) rotate(0deg); opacity:1; }
  100% { transform:translateY(100vh) rotate(720deg); opacity:0; }
}

/* ── Progress bar fill ── */
@keyframes progressFill {
  from { width:0; }
}

/* ── Shimmer (loading) ── */
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}

/* ── Pulse ring ── */
@keyframes pulseRing {
  0%   { transform:scale(1);   opacity:0.8; }
  100% { transform:scale(1.6); opacity:0; }
}

/* ── Toast slide ── */
@keyframes toastIn {
  from { opacity:0; transform:translateX(110%); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes toastOut {
  from { opacity:1; transform:translateX(0); }
  to   { opacity:0; transform:translateX(110%); }
}

/* ── Nav item highlight ── */
@keyframes navActiveSlide {
  from { transform:scaleX(0); }
  to   { transform:scaleX(1); }
}

/* ── Utility animation classes ── */
.anim-fade-in  { animation: fadeIn  var(--dur-base) var(--ease) both; }
.anim-fade-up  { animation: fadeUp  var(--dur-slow) var(--ease) both; }
.anim-scale-in { animation: scaleIn var(--dur-slow) var(--ease-spring) both; }

.anim-stagger > * {
  animation: fadeUp var(--dur-slow) var(--ease) both;
}
.anim-stagger > *:nth-child(1)  { animation-delay: 0ms; }
.anim-stagger > *:nth-child(2)  { animation-delay: 60ms; }
.anim-stagger > *:nth-child(3)  { animation-delay: 120ms; }
.anim-stagger > *:nth-child(4)  { animation-delay: 180ms; }
.anim-stagger > *:nth-child(5)  { animation-delay: 240ms; }
.anim-stagger > *:nth-child(6)  { animation-delay: 300ms; }
.anim-stagger > *:nth-child(7)  { animation-delay: 360ms; }
.anim-stagger > *:nth-child(8)  { animation-delay: 420ms; }

/* ── Progress bar transition ── */
.prog-fill {
  transition: width 0.6s var(--ease);
}

/* ── Hover lift ── */
.hover-lift {
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ── Flame animation ── */
.flame-icon {
  display:inline-block;
  animation: flameDance 1.8s ease-in-out infinite;
  transform-origin: bottom center;
}