/* ============================================================
   JAMSHEDPUR STEELERS — Animations & Keyframes
   ============================================================ */

/* ===== KEYFRAME DEFINITIONS ===== */

@keyframes heroBgZoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1.00); }
}

@keyframes ringRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes barFill {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

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

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

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

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes floatCricket {
  0%, 100% { transform: translateY(-50%) rotate(0deg); }
  33% { transform: translateY(calc(-50% - 20px)) rotate(5deg); }
  66% { transform: translateY(calc(-50% + 10px)) rotate(-3deg); }
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.4; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.8; transform: translateX(-50%) scale(1.2); }
}

@keyframes scrollDot {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(14px); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes flicker {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.2); }
}

@keyframes particleFloat {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.2; }
  100% { transform: translateY(-120vh) translateX(var(--drift, 50px)) scale(0.3); opacity: 0; }
}

@keyframes shimmer {
  from { background-position: -200% center; }
  to { background-position: 200% center; }
}

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

@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(30,94,255,0.3); }
  50% { box-shadow: 0 0 30px rgba(30,94,255,0.7), 0 0 60px rgba(30,94,255,0.3); }
}

@keyframes rotateBadge {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes slideUpReveal {
  from { opacity: 0; transform: translateY(40px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ripple {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}

@keyframes steelShine {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* ===== SCROLL-TRIGGERED REVEAL CLASSES ===== */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Staggered delays */
.delay-1 { transition-delay: 0.1s !important; }
.delay-2 { transition-delay: 0.2s !important; }
.delay-3 { transition-delay: 0.3s !important; }
.delay-4 { transition-delay: 0.4s !important; }
.delay-5 { transition-delay: 0.5s !important; }
.delay-6 { transition-delay: 0.6s !important; }

/* ===== HOVER EFFECTS ===== */

/* Steel shine effect on cards */
.steel-shine {
  position: relative;
  overflow: hidden;
}

.steel-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  transition: none;
}

.steel-shine:hover::after {
  animation: steelShine 0.7s ease forwards;
}

/* Ripple effect on buttons */
.btn-primary, .btn-secondary, .btn-outline, .btn-outline-light, .btn-tickets, .btn-submit {
  position: relative;
  overflow: hidden;
}

.btn-primary::after,
.btn-secondary::after,
.btn-outline::after,
.btn-outline-light::after,
.btn-tickets::after,
.btn-submit::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
  opacity: 0;
}

.btn-primary:active::after,
.btn-secondary:active::after,
.btn-outline:active::after,
.btn-tickets:active::after,
.btn-submit:active::after {
  width: 300px;
  height: 300px;
  opacity: 0;
}

/* ===== PARTICLE ANIMATION SYSTEM ===== */

.spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary);
  pointer-events: none;
  animation: sparkFly 1s ease forwards;
}

@keyframes sparkFly {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx, 40px), var(--ty, -80px)) scale(0); }
}

/* ===== PROGRESS BAR ANIMATION ===== */

.sb-fill {
  animation: fillBar 2s ease-out forwards;
  width: 0 !important;
}

.sb-fill.animated {
  width: var(--target-width, 75%) !important;
}

@keyframes fillBar {
  from { width: 0 !important; }
}

/* ===== LOADING SKELETON ===== */

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

/* ===== ACTIVE NAV INDICATOR ===== */

.nav-links a.active {
  position: relative;
}

/* ===== SCORE FLIP ANIMATION ===== */

@keyframes scoreFlip {
  0% { transform: rotateX(0); }
  50% { transform: rotateX(-90deg); }
  100% { transform: rotateX(0); }
}

/* ===== FORM SUCCESS ANIMATION ===== */

.form-success {
  animation: fadeInUp 0.5s ease;
}

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

/* ===== TICKER PAUSE ON HOVER ===== */

.ticker-wrap:hover .ticker-content {
  animation-play-state: paused;
}

/* ===== TABLE ROW HIGHLIGHT ===== */

.highlight-row {
  position: relative;
  animation: highlightPulse 3s ease-in-out infinite;
}

@keyframes highlightPulse {
  0%, 100% { background-color: rgba(30,94,255,0.08); }
  50% { background-color: rgba(30,94,255,0.14); }
}

/* ===== PLAYER CARD HOVER ===== */

.player-card .pc-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(30,94,255,0.1) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.player-card:hover .pc-bg::before { opacity: 1; }

/* ===== LOGO SPIN ON HOVER ===== */

/* .nav-logo:hover .logo-emblem svg {
  animation: rotateBadge 0.6s ease;
} */

/* ===== GLOW ANIMATION FOR FEATURED ===== */

.featured-card {
  animation: borderGlow 3s ease-in-out infinite;
}

/* ===== SOCIAL BUTTON BOUNCE ===== */

.social-btn:hover {
  animation: socialBounce 0.4s ease;
}

@keyframes socialBounce {
  0% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
  70% { transform: translateY(-4px); }
  100% { transform: translateY(-4px); }
}

/* ===== NEXT MATCH COUNTDOWN PULSE ===== */

#countdown .cd-item span {
  animation: countdownPulse 1s ease-in-out infinite;
}

@keyframes countdownPulse {
  0%, 100% { background: rgba(255,255,255,0.05); }
  50% { background: rgba(30,94,255,0.08); }
}

/* ===== RESULT CARD ENTRY ===== */

.result-card {
  animation: slideUpReveal 0.6s ease both;
}

.result-card:nth-child(1) { animation-delay: 0.1s; }
.result-card:nth-child(2) { animation-delay: 0.2s; }
.result-card:nth-child(3) { animation-delay: 0.3s; }

/* ===== TEAM LOGO ORBIT ===== */

@keyframes orbit {
  from { transform: rotate(0deg) translateX(20px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}

/* ===== FIRE EFFECT ON ORANGE CAP BADGE ===== */

.orange-badge {
  animation: fireFlicker 1.2s ease-in-out infinite;
}

@keyframes fireFlicker {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(30, 94, 255, 0.8)); }
  50% { filter: drop-shadow(0 0 14px rgba(68, 170, 255, 1)); }
}

/* ===== PURPLE CAP ===== */

.purple-badge {
  animation: purpleGlow 2s ease-in-out infinite;
}

@keyframes purpleGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(147, 51, 234, 0.7)); }
  50% { filter: drop-shadow(0 0 14px rgba(147, 51, 234, 1)); }
}

/* ===== HERO TEXT SHINE ===== */

.hero-title .line2 {
  background-size: 200% auto;
  animation: gradientShift 4s linear infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ===== SECTION TAG PULSE ===== */

.section-tag {
  animation: tagFade 3s ease-in-out infinite;
}

@keyframes tagFade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ===== SCROLL PROGRESS BAR ===== */

#scrollProgress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--gradient-primary);
  z-index: 2000;
  transition: width 0.1s linear;
}

/* ===== MOBILE MENU SLIDE ===== */

.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: block !important;
}

.mobile-menu.open {
  max-height: 400px;
}