/* =============================================================
   mygamesandi — Animations
   Elite Gamer Arena keyframes and utility classes.
   All animations respect prefers-reduced-motion (base.css strips them).
   ============================================================= */

/* ─── Shimmer — skeleton loaders ────────────────────────────*/
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Slide up — toasts, bottom sheets ──────────────────────*/
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Slide down ─────────────────────────────────────────────*/
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Fade in ─────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── Scale in — modals, cards ───────────────────────────────*/
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ─── Pulse — generic opacity pulse ─────────────────────────*/
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ─── Glow pulse — cyan (online indicators, cards) ──────────*/
@keyframes glow-pulse-cyan {
  0%, 100% {
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.3),
                0 0 20px rgba(0, 212, 255, 0.1);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.6),
                0 0 40px rgba(0, 212, 255, 0.2);
    opacity: 0.85;
  }
}

/* ─── Glow pulse — yellow (CTA buttons) ─────────────────────*/
@keyframes glow-pulse-yellow {
  0%, 100% {
    text-shadow: 0 0 8px rgba(245, 197, 24, 0.4);
    opacity: 1;
  }
  50% {
    text-shadow: 0 0 20px rgba(245, 197, 24, 0.9),
                 0 0 40px rgba(245, 197, 24, 0.4);
    opacity: 0.9;
  }
}

/* ─── Glow pulse — red (live badges, danger) ────────────────*/
@keyframes glow-pulse-red {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ─── Glow pulse — purple (event logo) ──────────────────────*/
@keyframes glow-pulse-purple {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(155, 89, 255, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 48px rgba(155, 89, 255, 0.9));
  }
}

/* ─── Neon flicker — hero title (subtle) ────────────────────*/
@keyframes neon-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(245, 197, 24, 0.6),
                 0 0 30px rgba(245, 197, 24, 0.3);
  }
  20%, 24%, 55% {
    opacity: 0.9;
    text-shadow: none;
  }
}

/* ─── Particle float — event screen stars ───────────────────*/
@keyframes particle-float {
  0% {
    transform: translateY(100vh) translateX(0) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-20px) translateX(var(--drift, 20px)) scale(1);
    opacity: 0;
  }
}

/* ─── Streak pop — claimed daily reward ─────────────────────*/
@keyframes streak-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.3) rotate(-5deg); }
  60%  { transform: scale(0.9) rotate(3deg); }
  80%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ─── Timer tick — countdown seconds pulse ──────────────────*/
@keyframes timer-tick {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}

/* ─── Bounce — excitement state ─────────────────────────────*/
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(-16px);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* ─── Confetti fall — win celebration ────────────────────────*/
@keyframes confettiFall {
  0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

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

/* ─── Wobble — error shake ───────────────────────────────────*/
@keyframes wobble {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

/* ─── Andi wave arm ──────────────────────────────────────────*/
@keyframes andWave {
  0%, 100% { transform: rotate(0deg); transform-origin: bottom center; }
  25%       { transform: rotate(20deg); }
  75%       { transform: rotate(-10deg); }
}


/* =============================================================
   Utility animation classes
   ============================================================= */

.animate-slide-up    { animation: slideUp var(--duration-base) var(--ease-out) both; }
.animate-slide-down  { animation: slideDown var(--duration-base) var(--ease-out) both; }
.animate-fade-in     { animation: fadeIn var(--duration-base) var(--ease-out) both; }
.animate-scale-in    { animation: scaleIn var(--duration-base) var(--ease-out) both; }
.animate-bounce      { animation: bounce 0.8s ease-in-out infinite; }
.animate-pulse       { animation: pulse 2s ease-in-out infinite; }
.animate-spin        { animation: spin 0.6s linear infinite; }
.animate-wobble      { animation: wobble 0.4s ease-in-out; }
.animate-streak-pop  { animation: streak-pop 0.5s var(--ease-out); }
.animate-glow-cyan   { animation: glow-pulse-cyan 2s ease-in-out infinite; }
.animate-glow-yellow { animation: glow-pulse-yellow 2s ease-in-out infinite; }
.animate-neon-flicker { animation: neon-flicker 4s linear infinite; }

/* Stagger helpers */
.animate-delay-1 { animation-delay: 50ms; }
.animate-delay-2 { animation-delay: 100ms; }
.animate-delay-3 { animation-delay: 150ms; }
.animate-delay-4 { animation-delay: 200ms; }
.animate-delay-5 { animation-delay: 300ms; }
.animate-delay-6 { animation-delay: 400ms; }


/* =============================================================
   Andi mascot — CSS fallback animation states
   ============================================================= */

.andi--idle      { /* static */ }
.andi--wave      { animation: andWave 0.8s ease-in-out 3; }
.andi--excited   { animation: bounce 0.6s ease-in-out infinite; }
.andi--thinking  { animation: pulse 1.5s ease-in-out infinite; }
.andi--celebrate { animation: bounce 0.4s ease-in-out infinite; }
.andi--consoling { animation: pulse 2s ease-in-out infinite; }


/* =============================================================
   Confetti particles
   ============================================================= */

.confetti-piece {
  position: fixed;
  width: 10px;
  height: 10px;
  top: -20px;
  border-radius: 2px;
  animation: confettiFall linear forwards;
  pointer-events: none;
  z-index: 9999;
}