/* ═══════════════════════════════════════════════════
   PongMaster – 2.5D Emoji Animations
   Keyframes, emoji styling, and motion effects
   ═══════════════════════════════════════════════════ */

/* ── 2.5D Emoji Base ────────────────────────────── */
.emoji-3d {
  display: inline-block;
  font-style: normal;
  text-shadow:
    0 4px 8px rgba(0, 0, 0, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.1);
  transform: perspective(600px) rotateX(5deg) rotateY(-3deg);
  transition: transform var(--transition-bounce);
  will-change: transform;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.12));
}

.emoji-3d:hover {
  transform: perspective(600px) rotateX(0deg) rotateY(0deg) scale(1.15);
}

.emoji-3d--lg {
  font-size: 3rem;
}

.emoji-3d--xl {
  font-size: 4.5rem;
}

.emoji-3d--xxl {
  font-size: 6rem;
}

/* ── Floating Background Emojis ─────────────────── */
.floating-emoji {
  position: fixed;
  font-size: 2.5rem;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  animation: floatIn 1s ease-out forwards, floatLoop 6s ease-in-out infinite;
  text-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.08);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.floating-emoji:nth-child(1) { animation-delay: 0s, 1s; top: 10%; left: 8%; font-size: 2.8rem; }
.floating-emoji:nth-child(2) { animation-delay: 0.2s, 1.2s; top: 20%; right: 12%; font-size: 2rem; }
.floating-emoji:nth-child(3) { animation-delay: 0.4s, 1.4s; top: 45%; left: 5%; font-size: 3.2rem; }
.floating-emoji:nth-child(4) { animation-delay: 0.6s, 1.6s; top: 65%; right: 8%; font-size: 2.4rem; }
.floating-emoji:nth-child(5) { animation-delay: 0.8s, 1.8s; top: 80%; left: 15%; font-size: 2rem; }
.floating-emoji:nth-child(6) { animation-delay: 0.3s, 1.3s; top: 35%; right: 5%; font-size: 2.6rem; }
.floating-emoji:nth-child(7) { animation-delay: 0.5s, 1.5s; bottom: 15%; left: 10%; font-size: 1.8rem; }
.floating-emoji:nth-child(8) { animation-delay: 0.7s, 1.7s; top: 55%; left: 85%; font-size: 2.2rem; }

/* ── Keyframes ──────────────────────────────────── */

/* Float in from random directions */
@keyframes floatIn {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.5) rotate(-15deg);
  }
  100% {
    opacity: 0.25;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

/* Continuous gentle float */
@keyframes floatLoop {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-12px) rotate(3deg);
  }
  50% {
    transform: translateY(-6px) rotate(-2deg);
  }
  75% {
    transform: translateY(-15px) rotate(2deg);
  }
}

/* Bounce in for form elements */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  60% {
    opacity: 1;
    transform: translateY(-5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Slide up entrance */
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Gold pulse for winner crown */
@keyframes pulseGold {
  0%, 100% {
    text-shadow:
      0 0 8px var(--color-gold-glow),
      0 0 16px var(--color-gold-glow),
      0 4px 8px rgba(0, 0, 0, 0.15);
    transform: scale(1);
  }
  50% {
    text-shadow:
      0 0 16px var(--color-gold-glow),
      0 0 32px var(--color-gold-glow),
      0 0 48px rgba(255, 215, 0, 0.2),
      0 4px 8px rgba(0, 0, 0, 0.15);
    transform: scale(1.1);
  }
}

/* Live match glow */
@keyframes liveGlow {
  0%, 100% {
    box-shadow:
      0 0 0 0 var(--color-live-glow),
      var(--clay-shadow);
  }
  50% {
    box-shadow:
      0 0 0 8px transparent,
      0 0 20px var(--color-live-glow),
      var(--clay-shadow);
  }
}

/* Live dot pulse */
@keyframes liveDot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.5);
  }
}

/* Success: ball hitting cup */
@keyframes successBounce {
  0% {
    transform: translateY(-80px) scale(0.6);
    opacity: 0;
  }
  40% {
    transform: translateY(10px) scale(1.1);
    opacity: 1;
  }
  60% {
    transform: translateY(-15px) scale(0.95);
  }
  80% {
    transform: translateY(5px) scale(1.02);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Confetti-like particles */
@keyframes confettiFall {
  0% {
    transform: translateY(-10px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* Ticker scroll for slogans */
@keyframes ticker {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Fade in */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Scale in */
@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Shake for errors */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Spin */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ── Animation Utility Classes ──────────────────── */
.animate-bounce-in {
  animation: bounceIn 0.6s ease-out both;
}

.animate-slide-up {
  animation: slideUp 0.4s ease-out both;
}

.animate-fade-in {
  animation: fadeIn 0.4s ease-out both;
}

.animate-scale-in {
  animation: scaleIn 0.3s ease-out both;
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

.animate-pulse-gold {
  animation: pulseGold 2s ease-in-out infinite;
}

.animate-live-glow {
  animation: liveGlow 2s ease-in-out infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Staggered children */
.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.35s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.4s; }

/* ── Winner Crown ───────────────────────────────── */
.winner-crown {
  display: inline-block;
  font-size: 1.5rem;
  animation: pulseGold 2s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.4));
}

/* ── Live Indicator ─────────────────────────────── */
.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-live);
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.live-dot {
  width: 8px;
  height: 8px;
  background: var(--color-live);
  border-radius: 50%;
  animation: liveDot 1.5s ease-in-out infinite;
}

/* ── Slogan Ticker ──────────────────────────────── */
.slogan-ticker {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
}

.slogan-ticker span {
  display: inline-block;
  animation: ticker 8s linear infinite;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ── Loading Spinner ────────────────────────────── */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-surface);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spinner--lg {
  width: 40px;
  height: 40px;
  border-width: 4px;
}