/*
 * Stadium Deco animations — reveal, shimmer, draw, pulse
 * v3: live animations use green, enhanced hover transitions
 */

/* === Staggered reveal on scroll === */
@keyframes cardReveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal-card {
  opacity: 0;
  animation: cardReveal var(--transition-reveal) forwards;
}

.reveal-card:nth-child(1) { animation-delay: 0ms; }
.reveal-card:nth-child(2) { animation-delay: 80ms; }
.reveal-card:nth-child(3) { animation-delay: 160ms; }
.reveal-card:nth-child(4) { animation-delay: 240ms; }
.reveal-card:nth-child(5) { animation-delay: 320ms; }
.reveal-card:nth-child(6) { animation-delay: 400ms; }
.reveal-card:nth-child(7) { animation-delay: 480ms; }
.reveal-card:nth-child(8) { animation-delay: 560ms; }
.reveal-card:nth-child(9) { animation-delay: 640ms; }

/* === Gold shimmer effect === */
@keyframes goldShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.shimmer {
  background: linear-gradient(
    90deg,
    var(--color-gold-dark) 0%,
    var(--color-gold-light) 25%,
    var(--color-gold) 50%,
    var(--color-gold-light) 75%,
    var(--color-gold-dark) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmer 3s ease-in-out infinite;
}

/* === Probability arc draw === */
@keyframes drawArc {
  from { stroke-dashoffset: var(--arc-length); }
  to { stroke-dashoffset: 0; }
}

.arc-draw {
  animation: drawArc 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* === Pulse for live indicators (green, matching live status) === */
@keyframes livePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.6);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(0, 230, 118, 0);
  }
}

.live-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00E676;
  animation: livePulse 2s ease-in-out infinite;
}

/* === Live match breathing border (green) === */
@keyframes matchLiveBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.35); }
  50% { box-shadow: 0 0 0 8px rgba(0, 230, 118, 0); }
}

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

.fade-in { animation: fadeIn var(--transition-base) forwards; }
.fade-in--slow { animation-duration: var(--transition-slow); }

/* === Slide up === */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.slide-up { animation: slideUp var(--transition-reveal) forwards; }

/* === Scale in for modals/overlays === */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.scale-in { animation: scaleIn var(--transition-slow) forwards; }

/* === Spin for loaders === */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(212, 175, 55, 0.2);
  border-top-color: var(--color-gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* === Number counting === */
@keyframes countUp {
  from { opacity: 0; }
  to { opacity: 1; }
}

.count-number {
  display: inline-block;
  animation: countUp 0.3s ease forwards;
}

/* === Hover lift === */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-gold), var(--shadow-xl);
}

/* === Glow on hover === */
.hover-glow {
  transition: box-shadow var(--transition-base);
}
.hover-glow:hover {
  box-shadow: 0 0 32px rgba(212, 175, 55, 0.25);
}

/* === Page transition === */
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-enter { animation: pageEnter var(--transition-base) forwards; }