/* =====================================================================
   ANIMATIONS
   =====================================================================
   Keyframes + utility classes for page-load reveals, glow pulses, and
   loading states. All timings key off the 300ms base transition from
   tokens.css. Respect for prefers-reduced-motion is handled globally
   in base.css, so nothing extra is needed per-animation here.
   ===================================================================== */

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

@keyframes sidebarSlideIn {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}
.animate-fade-in-up {
  animation: fadeInUp var(--transition-slow) both;
}
/* Stagger helper — pair with inline style="--delay: 2" on siblings */
.animate-stagger { animation-delay: calc(var(--delay, 0) * 80ms); }

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.animate-float { animation: floatY 4s ease-in-out infinite; }

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(var(--color-primary-rgb), 0.35); }
  50%      { box-shadow: 0 0 32px rgba(var(--color-primary-rgb), 0.6); }
}
.animate-glow-pulse { animation: glowPulse 2.4s ease-in-out infinite; }

@keyframes footballOrbit {
  0% { transform: translate3d(-42vw, 34vh, 0) rotate(0deg); opacity: 0; }
  12% { opacity: .9; }
  50% { transform: translate3d(4vw, -6vh, 0) rotate(360deg); opacity: 1; }
  88% { opacity: .72; }
  100% { transform: translate3d(46vw, 30vh, 0) rotate(720deg); opacity: 0; }
}
.football-orbit {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.football-orbit::before {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  left: 50%;
  top: 45%;
  border: 1px solid rgba(var(--color-primary-rgb), .18);
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(var(--color-primary-rgb), .10), inset 0 0 40px rgba(var(--color-secondary-rgb), .08);
  transform: translate(-50%, -50%) rotate(22deg) scaleX(1.8);
}
.football-ball {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 25px;
  filter: drop-shadow(0 0 14px rgba(var(--color-primary-rgb), .8));
  animation: footballOrbit 9s cubic-bezier(.45, .05, .55, .95) infinite;
}

@keyframes livePing {
  0% { box-shadow: 0 0 0 0 rgba(var(--color-success-rgb), .55); }
  70% { box-shadow: 0 0 0 9px rgba(var(--color-success-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--color-success-rgb), 0); }
}
.animate-live-ping { animation: livePing 1.8s ease-out infinite; }

@keyframes scoreFlash {
  0%, 100% { border-color: var(--glass-border); }
  50% { border-color: rgba(var(--color-secondary-rgb), .72); box-shadow: 0 0 24px rgba(var(--color-secondary-rgb), .12); }
}
.animate-score-flash { animation: scoreFlash 3.2s ease-in-out infinite; }

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton-arena {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 37%, rgba(255,255,255,0.04) 63%);
  background-size: 400px 100%;
  animation: shimmer 1.6s linear infinite;
  border-radius: var(--radius-sm);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner-arena {
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,0.15);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

/* Typing indicator dots — used in chat (Step 8's real-time feature) */
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%           { transform: translateY(-4px); opacity: 1; }
}
.typing-dots { display: inline-flex; gap: 4px; align-items: center; }
.typing-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-secondary);
  animation: typingBounce 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }