/* ============================================
   ANIMATIONS & TRANSITIONS
   ============================================ */

/* ---- PRELOADER ANIMATIONS ---- */
@keyframes paddle-spin {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-15deg); }
  100% { transform: rotate(0deg); }
}

@keyframes preloader-fill {
  0% { width: 0%; }
  50% { width: 70%; }
  100% { width: 100%; }
}

/* ---- SCROLL REVEAL ---- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }
.reveal--delay-5 { transition-delay: 0.5s; }

/* ---- HERO SCROLL INDICATOR ---- */
@keyframes scroll-pulse {
  0%, 100% {
    opacity: 1;
    transform: scaleY(1);
  }
  50% {
    opacity: 0.3;
    transform: scaleY(0.5);
    transform-origin: top;
  }
}

/* ---- FLOATING PARTICLES ---- */
@keyframes particle-float {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% {
    transform: translate(var(--tx), var(--ty)) rotate(360deg);
    opacity: 0;
  }
}

.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: particle-float var(--duration) var(--delay) ease-in-out infinite;
}

/* ---- GLOW PULSE ---- */
@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px var(--lime-glow);
  }
  50% {
    box-shadow: 0 0 40px var(--lime-glow), 0 0 80px rgba(200, 255, 0, 0.15);
  }
}

/* ---- STAT COUNTER ---- */
@keyframes count-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- COURT LINE DRIFT ---- */
@keyframes court-drift {
  0% { background-position: 0 0; }
  100% { background-position: 80px 80px; }
}
.hero__court-lines {
  animation: court-drift 20s linear infinite;
}

/* ---- TIER CARD SHIMMER ---- */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.tier-card--premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 168, 83, 0.05),
    transparent
  );
  animation: shimmer 3s ease-in-out infinite;
  pointer-events: none;
}
.tier-card--featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(200, 255, 0, 0.04),
    transparent
  );
  animation: shimmer 3s ease-in-out infinite;
  pointer-events: none;
}

/* ---- MAGNETIC HOVER EFFECT (via JS) ---- */
.magnetic-hover {
  transition: transform 0.3s var(--ease-out);
}

/* ---- TEXT REVEAL ---- */
@keyframes text-reveal-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ---- BALL BOUNCE ---- */
@keyframes ball-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* ---- GRADIENT SHIFT ---- */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---- HOVER LIFT ---- */
.hover-lift {
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* ---- NOISE TEXTURE ANIMATION ---- */
@keyframes noise-shift {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -5%); }
  20% { transform: translate(-10%, 5%); }
  30% { transform: translate(5%, -10%); }
  40% { transform: translate(-5%, 15%); }
  50% { transform: translate(-10%, 5%); }
  60% { transform: translate(15%, 0); }
  70% { transform: translate(0, 10%); }
  80% { transform: translate(-15%, 0); }
  90% { transform: translate(10%, 5%); }
  100% { transform: translate(5%, 0); }
}

/* ---- PICKLEBALL NET PATTERN ---- */
@keyframes net-wave {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.02); }
}

/* ---- CAROUSEL SLIDE ---- */
@keyframes slide-in-right {
  from { transform: translateX(30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slide-in-left {
  from { transform: translateX(-30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ---- FORMAT DOT PULSE ---- */
.format__item:hover .format__dot {
  animation: glow-pulse 1.5s ease-in-out infinite;
}

/* ---- PICKLEBALL RALLY ANIMATION ---- */
/* Left paddle = ABOVE net (far side), Right paddle = BELOW net (near side) */
/* Ball uses `left` (% of court) for horizontal + translateY for vertical */
/* translateY: negative = above net, positive = below net */
@keyframes ball-rally {
  /* At left paddle — above the net (far side) */
  0%   { left: 12%; transform: translateY(-28px); }
  /* Hit! Ball heading right + downward toward net */
  5%   { left: 20%; transform: translateY(-18px); }
  /* Ball rising slightly as it crosses over the net */
  18%  { left: 42%; transform: translateY(-38px); }
  /* Past the net, descending to near side */
  32%  { left: 65%; transform: translateY(5px); }
  /* Arriving at right paddle — below the net (near side) */
  42%  { left: 84%; transform: translateY(30px); }
  /* Brief pause at right paddle */
  50%  { left: 84%; transform: translateY(30px); }
  /* Hit back! Ball heading left + upward toward net */
  55%  { left: 74%; transform: translateY(15px); }
  /* Ball rising as it crosses back over the net */
  68%  { left: 52%; transform: translateY(-38px); }
  /* Past the net, descending to far side */
  82%  { left: 30%; transform: translateY(-10px); }
  /* Arriving back at left paddle — above the net */
  92%  { left: 14%; transform: translateY(-26px); }
  95%  { left: 12%; transform: translateY(-28px); }
  100% { left: 12%; transform: translateY(-28px); }
}

/* Ball shadow tracks horizontal position, scales with ball height */
@keyframes ball-rally-shadow {
  0%   { left: 12%; transform: scale(0.7); opacity: 0.08; }
  5%   { left: 20%; transform: scale(0.6); opacity: 0.06; }
  18%  { left: 42%; transform: scale(0.3); opacity: 0.02; }
  32%  { left: 65%; transform: scale(0.5); opacity: 0.06; }
  42%  { left: 84%; transform: scale(0.8); opacity: 0.10; }
  50%  { left: 84%; transform: scale(0.8); opacity: 0.10; }
  55%  { left: 74%; transform: scale(0.6); opacity: 0.06; }
  68%  { left: 52%; transform: scale(0.3); opacity: 0.02; }
  82%  { left: 30%; transform: scale(0.6); opacity: 0.06; }
  92%  { left: 14%; transform: scale(0.7); opacity: 0.08; }
  95%  { left: 12%; transform: scale(0.7); opacity: 0.08; }
  100% { left: 12%; transform: scale(0.7); opacity: 0.08; }
}

/* Left paddle (above net): swing at 0-5% (hitting) and 90-95% (receiving) */
@keyframes paddle-swing-left {
  0%  { transform: rotate(25deg); }
  3%  { transform: rotate(45deg); }
  8%  { transform: rotate(25deg); }
  88% { transform: rotate(25deg); }
  93% { transform: rotate(10deg); }
  100%{ transform: rotate(25deg); }
}

/* Right paddle (below net): swing at 42-55% (receiving + hitting back) */
@keyframes paddle-swing-right {
  0%  { transform: rotate(-25deg); }
  40% { transform: rotate(-25deg); }
  46% { transform: rotate(-45deg); }
  55% { transform: rotate(-25deg); }
  100%{ transform: rotate(-25deg); }
}

/* ---- TILT ON HOVER (cards) ---- */
.tilt-card {
  transform-style: preserve-3d;
  perspective: 1000px;
}