/* ==========================================================================
   STACKSAGE ANIMATIONS — Micro-interactions
   ========================================================================== */

@keyframes flamePulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.1); }
}

@keyframes flameWiggle {
  0%, 100% { transform: rotate(0deg); }
  25%       { transform: rotate(-6deg); }
  75%       { transform: rotate(6deg); }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 197, 24, 0.3);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(245, 197, 24, 0);
  }
}

@keyframes pulseDot {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 197, 24, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(245, 197, 24, 0);
  }
}

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

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

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

@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.5); }
  60%  { opacity: 1; transform: scale(1.06); }
  80%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

/* XP toast entrance/exit */
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

/* Shake (gate wrong password) */
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-5px); }
  80%       { transform: translateX(5px); }
}

/* Fullscreen confetti canvas */
#confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}