/* ==========================================================================
   GSAP & CSS ANIMATIONS - AL NOKHBA THEME
   Smooth Scroll, 3D Tilt, Stagger Reveal, Ball Trajectory Physics
   ========================================================================== */

/* 1. Hero Cinematic Animation Elements */
.hero-lights-beam-left {
  position: absolute;
  top: -100px;
  right: 10%;
  width: 300px;
  height: 600px;
  background: radial-gradient(ellipse at top, rgba(212, 175, 55, 0.18), transparent 70%);
  transform: rotate(-25deg);
  pointer-events: none;
  z-index: 1;
}

.hero-lights-beam-right {
  position: absolute;
  top: -100px;
  left: 10%;
  width: 300px;
  height: 600px;
  background: radial-gradient(ellipse at top, rgba(0, 245, 212, 0.12), transparent 70%);
  transform: rotate(25deg);
  pointer-events: none;
  z-index: 1;
}

/* 2. Card Floating & Neon Glow Animations */
@keyframes goldPulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3), 0 0 30px rgba(212, 175, 55, 0.1);
  }
  50% {
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.6), 0 0 50px rgba(255, 223, 115, 0.3);
  }
}

@keyframes neonCyanPulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(0, 245, 212, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(0, 245, 212, 0.7);
  }
}

.glow-gold-pulse {
  animation: goldPulseGlow 3s infinite ease-in-out;
}

.glow-cyan-pulse {
  animation: neonCyanPulse 2.5s infinite ease-in-out;
}

/* 3. Shockwave Wave Burst */
@keyframes shockwaveBurst {
  0% {
    transform: scale(0.2);
    opacity: 1;
    border-width: 6px;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
    border-width: 1px;
  }
}

.shockwave-active {
  animation: shockwaveBurst 1.2s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

/* 4. 3D Perspective Card Tilt Support */
.card-3d-tilt {
  transform-style: preserve-3d;
  will-change: transform;
}

.card-3d-content {
  transform: translateZ(30px);
}

/* 5. Player Card Hover Transitions */
.player-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.35s ease, 
              border-color 0.35s ease;
  will-change: transform;
}

.player-card .image-wrapper {
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}

.player-card .player-image {
  width: 100%;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 6. Stagger Opacity Reveal Classes */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  will-change: transform, opacity;
}

/* 7. Floating Badges Physics */
@keyframes floatBadge {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(1deg);
  }
}

.badge-float {
  animation: floatBadge 4s infinite ease-in-out;
}