/* ============ SPORTS PAGE ANIMATIONS ============ */
/* Complex keyframes and effects for the Sports page retro/synthwave aesthetic. */
/* Layout, spacing, typography, and colors are handled by Tailwind inline. */

/* --- CSS Variables (Sports Theme) --- */
#main-content {
  --sp-neon-pink: #FF2D78;
  --sp-electric-blue: #00D4FF;
  --sp-sunset-orange: #FF6B35;
  --sp-deep-violet: #1a0533;
  --sp-cream: #FFF5E8;
  --sp-sand: #F2E6D0;
  --sp-palm-green: #00C9A7;
  --sp-gold: #FFD700;
  --sp-dark: #0a0a0a;
}

/* --- Noise Texture Overlay --- */
.sports-page::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* --- Selection Color --- */
.sports-page ::selection {
  background: var(--sp-neon-pink);
  color: white;
}

/* --- Hero Animations --- */
@keyframes sp-sunPulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.03); }
}

@keyframes sp-gridScroll {
  0% { background-position: 0 0; }
  100% { background-position: 0 40px; }
}

@keyframes sp-fadeSlideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes sp-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(10px); }
}

/* --- Neon Sign Animations --- */
@keyframes sp-neonImgFlicker {
  0%, 100% { filter: brightness(1.05) contrast(1.05); }
  4% { filter: brightness(1.02) contrast(1.04); }
  5% { filter: brightness(0.92) contrast(1.03); }
  5.5% { filter: brightness(1.06) contrast(1.05); }
  6% { filter: brightness(1.05) contrast(1.05); }
  30% { filter: brightness(1.04) contrast(1.05); }
  31% { filter: brightness(0.94) contrast(1.04); }
  31.5% { filter: brightness(1.05) contrast(1.05); }
  50% { filter: brightness(1.03) contrast(1.04); }
  65% { filter: brightness(1.05) contrast(1.05); }
  65.5% { filter: brightness(0.88) contrast(1.03); }
  66% { filter: brightness(0.93) contrast(1.04); }
  66.5% { filter: brightness(1.06) contrast(1.05); }
  80% { filter: brightness(1.04) contrast(1.05); }
}

@keyframes sp-neonGlowPinkPulse {
  0%, 100% { opacity: 1; }
  4.5% { opacity: 0.6; }
  5.5% { opacity: 1; }
  30.5% { opacity: 0.65; }
  31.5% { opacity: 1; }
  50% { opacity: 0.9; }
  65.5% { opacity: 0.5; }
  66.5% { opacity: 1; }
}

@keyframes sp-neonGlowBluePulse {
  0%, 100% { opacity: 1; }
  15% { opacity: 0.92; }
  38% { opacity: 0.7; }
  39% { opacity: 0.95; }
  55% { opacity: 0.88; }
  72% { opacity: 0.6; }
  73% { opacity: 0.96; }
  85% { opacity: 0.93; }
}

@keyframes sp-neonWhitePulse {
  0%, 100% { opacity: 1; }
  5% { opacity: 0.4; }
  5.5% { opacity: 1; }
  31% { opacity: 0.5; }
  31.5% { opacity: 1; }
  66% { opacity: 0.3; }
  66.5% { opacity: 1; }
}

@keyframes sp-neonWhitePulseB {
  0%, 100% { opacity: 1; }
  38.5% { opacity: 0.4; }
  39% { opacity: 1; }
  72.5% { opacity: 0.35; }
  73% { opacity: 0.95; }
}

@keyframes sp-neonWallPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

@keyframes sp-neonFloorPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* --- Marquee --- */
@keyframes sp-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- Misc Animations --- */
@keyframes sp-stickerSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes sp-pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 201, 167, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(0, 201, 167, 0); }
}

@keyframes sp-floatBadge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* --- Hero Grid --- */
.sp-hero-grid {
  background:
    linear-gradient(90deg, rgba(0, 212, 255, 0.15) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 212, 255, 0.15) 1px, transparent 1px);
  background-size: 60px 40px;
  transform: perspective(500px) rotateX(60deg);
  transform-origin: bottom;
  animation: sp-gridScroll 3s linear infinite;
}

@media (max-width: 768px) {
  .sp-hero-grid {
    background-size: 36px 28px;
  }
}

/* --- Hero Sun --- */
.sp-hero-sun {
  background: linear-gradient(180deg, #FF2D78, #FF6B35, #FFD700);
  animation: sp-sunPulse 4s ease-in-out infinite;
}

.sp-hero-sun::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(0deg, transparent, transparent 12px, rgba(26, 5, 51, 0.4) 12px, rgba(26, 5, 51, 0.4) 16px);
}

/* --- Neon Sign Classes --- */
.sp-neon-img {
  animation: sp-neonImgFlicker 7s infinite;
  filter: brightness(1.05) contrast(1.05);
}

.sp-neon-glow-pink {
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 45, 120, 0.25) 0%, rgba(255, 45, 120, 0.08) 40%, transparent 70%);
  animation: sp-neonGlowPinkPulse 7s infinite;
}

.sp-neon-glow-blue {
  background: radial-gradient(ellipse at 50% 55%, rgba(0, 180, 255, 0.2) 0%, rgba(0, 180, 255, 0.06) 40%, transparent 70%);
  animation: sp-neonGlowBluePulse 8s infinite;
}

.sp-neon-glow-white-top {
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.06) 0%, transparent 55%);
  animation: sp-neonWhitePulse 7s infinite 0.2s;
}

.sp-neon-glow-white-bottom {
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.04) 0%, transparent 50%);
  animation: sp-neonWhitePulseB 8s infinite 0.15s;
}

.sp-neon-wall-splash {
  background:
    radial-gradient(ellipse at 50% 38%, rgba(255, 45, 120, 0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 58%, rgba(0, 180, 255, 0.05) 0%, transparent 45%);
  animation: sp-neonWallPulse 4s ease-in-out infinite;
}

.sp-neon-floor-reflection {
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 45, 120, 0.1) 0%, rgba(0, 180, 255, 0.06) 30%, transparent 65%);
  animation: sp-neonFloorPulse 4.5s ease-in-out infinite;
}

/* --- Marquee Track --- */
.sp-marquee-track {
  animation: sp-marquee 20s linear infinite;
}

/* --- Manifesto Sticker --- */
.sp-sticker {
  animation: sp-stickerSpin 20s linear infinite;
}

/* --- Portal Pulse Dot --- */
.sp-pulse-dot {
  animation: sp-pulseDot 2s infinite;
}

/* --- Portal Float Badge --- */
.sp-float-badge {
  animation: sp-floatBadge 3s ease-in-out infinite;
}

/* --- Hero Badge --- */
.sp-hero-badge {
  animation: sp-fadeSlideUp 0.8s ease-out;
}

/* --- Hero Title --- */
.sp-hero-title {
  animation: sp-fadeSlideUp 0.8s ease-out 0.1s both;
}

/* --- Hero Neon Wrapper --- */
.sp-neon-wrapper {
  animation: sp-fadeSlideUp 1s ease-out 0.25s both;
}

/* --- Hero Subtitle --- */
.sp-hero-subtitle {
  animation: sp-fadeSlideUp 0.8s ease-out 0.4s both;
}

/* --- Hero CTAs --- */
.sp-hero-ctas {
  animation: sp-fadeSlideUp 0.8s ease-out 0.55s both;
}

/* --- Hero Scroll Indicator --- */
.sp-scroll-indicator {
  animation: sp-bounce 2s infinite;
}

.sp-scroll-dot::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  background: var(--sp-neon-pink);
  border-radius: 4px;
  animation: sp-scrollDot 2s infinite;
}

/* --- Button Shine Effect --- */
.sp-btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s;
}

.sp-btn-primary:hover::before {
  transform: translateX(100%);
}

/* --- Portal Screen Perspective --- */
.sp-portal-screen {
  transform: rotateY(-5deg) rotateX(2deg);
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.sp-portal-screen:hover {
  transform: rotateY(0deg) rotateX(0deg);
}

@media (max-width: 768px) {
  .sp-portal-screen,
  .sp-portal-screen:hover {
    transform: none;
  }
}

/* --- Process Gradient Line --- */
.sp-process-line::before {
  content: '';
  position: absolute;
  top: 60px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, var(--sp-neon-pink), var(--sp-electric-blue), var(--sp-palm-green), var(--sp-sunset-orange));
  z-index: 1;
}

@keyframes sp-lineReveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 768px) {
  .sp-process-line::before {
    display: none;
  }
}

/* --- Perk Card Gradient Border --- */
.sp-perk-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg, transparent 40%, var(--sp-neon-pink) 50%, var(--sp-electric-blue) 60%, transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

.sp-perk-card:hover::before {
  opacity: 1;
}

/* --- Testimonial Quote Mark --- */
.sp-testimonial-quote::before {
  content: '\201C';
  font-size: 8rem;
  color: var(--sp-neon-pink);
  opacity: 0.2;
  position: absolute;
  top: -60px;
  left: -20px;
  font-family: Georgia, serif;
}

@media (max-width: 768px) {
  .sp-testimonial-quote::before {
    font-size: 4rem;
    top: -24px;
    left: -4px;
  }
}

/* --- Final CTA Glow Orb --- */
.sp-final-cta-orb {
  background: radial-gradient(circle, rgba(255, 45, 120, 0.15), transparent 60%);
}

/* --- Sponsored Section Orb --- */
.sp-sponsored-orb {
  background: radial-gradient(circle, rgba(0, 212, 255, 0.06), transparent 70%);
}

/* --- Portal Section Orb --- */
.sp-portal-orb {
  background: radial-gradient(circle, rgba(0, 212, 255, 0.07), transparent 60%);
}

/* --- Process Section Orb --- */
.sp-process-orb {
  background: radial-gradient(circle, rgba(255, 45, 120, 0.1), transparent 70%);
}

/* --- Manifesto Image Hover --- */
.sp-manifesto-img {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.sp-manifesto-img:hover {
  transform: rotate(0deg) scale(1.03) !important;
}

/* --- Product Card Image Hover --- */
.sp-product-card img {
  transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.sp-product-card:hover img {
  transform: scale(1.08);
}

/* --- Product Overlay Hover --- */
.sp-product-overlay {
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.85) 100%);
  transition: background 0.5s;
}

.sp-product-card:hover .sp-product-overlay {
  background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, 0.9) 100%);
}

/* --- Title Outline Text --- */
.sp-text-outline {
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.35);
  color: transparent;
}