/* Court Motion Design System - DawgPark Landing Page */
/* =============================================== */

/* CSS Custom Properties - Court Color Palette */
:root {
  /* Primary - Pickleball Yellow/Neon Lime */
  --court-lime: #ccff00;
  --court-lime-glow: rgba(204, 255, 0, 0.6);
  --court-lime-dim: rgba(204, 255, 0, 0.2);

  /* Secondary - Court Colors */
  --court-blue: #1a4d5c;
  --court-green: #2d5a3d;
  --court-surface: #0a1628;
  --court-dark: #050a12;

  /* Accents */
  --electric-white: #ffffff;
  --speed-streak: rgba(255, 255, 255, 0.8);
  --net-mesh: rgba(255, 255, 255, 0.05);

  /* Typography */
  --font-display: 'League Spartan', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Animation Easings */
  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* =============================================== */
/* BASE STYLES & UTILITIES */
/* =============================================== */

.court-motion-page {
  background-color: var(--court-surface);
  color: #e5e7eb;
  font-family: var(--font-body);
  overflow-x: hidden;
}

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

/* Net Mesh Pattern */
.net-mesh {
  background-image:
    linear-gradient(90deg, var(--net-mesh) 1px, transparent 1px),
    linear-gradient(var(--net-mesh) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* =============================================== */
/* HERO SECTION - THE SERVE */
/* =============================================== */

/* Diagonal Court Lines */
.court-lines-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.court-line {
  position: absolute;
  background: linear-gradient(
    90deg,
    transparent,
    var(--court-lime),
    transparent
  );
  height: 2px;
  opacity: 0;
  animation: drawLine 1.2s var(--ease-expo-out) forwards;
  box-shadow:
    0 0 10px var(--court-lime-glow),
    0 0 20px var(--court-lime-glow);
}

.court-line-1 {
  width: 60%;
  top: 20%;
  left: -10%;
  transform: rotate(-15deg);
  animation-delay: 0.2s;
}

.court-line-2 {
  width: 50%;
  top: 60%;
  right: -10%;
  transform: rotate(12deg);
  animation-delay: 0.4s;
}

.court-line-3 {
  width: 40%;
  bottom: 30%;
  left: 5%;
  transform: rotate(-8deg);
  animation-delay: 0.6s;
}

@keyframes drawLine {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  100% {
    opacity: 0.6;
    clip-path: inset(0 0 0 0);
  }
}

/* Floating Pickleball Physics */
.floating-balls-container {
  pointer-events: none !important;
}

.floating-ball {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    #ffffcc,
    #ccff00 40%,
    #99cc00 100%
  );
  opacity: 0.15;
  pointer-events: none !important;
  will-change: transform;
  box-shadow:
    inset -5px -5px 10px rgba(0, 0, 0, 0.2),
    0 0 30px rgba(204, 255, 0, 0.3);
}

.floating-ball::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.1) 2px,
    rgba(0, 0, 0, 0.1) 3px
  );
}

.floating-ball-1 {
  top: 10%;
  left: 10%;
  animation: float 8s ease-in-out infinite;
}
.floating-ball-2 {
  top: 30%;
  right: 15%;
  animation: float 10s ease-in-out infinite 1s;
}
.floating-ball-3 {
  bottom: 20%;
  left: 20%;
  animation: float 12s ease-in-out infinite 2s;
}
.floating-ball-4 {
  top: 50%;
  left: 5%;
  animation: float 9s ease-in-out infinite 0.5s;
}
.floating-ball-5 {
  bottom: 40%;
  right: 10%;
  animation: float 11s ease-in-out infinite 1.5s;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-20px) rotate(90deg);
  }
  50% {
    transform: translateY(-10px) rotate(180deg);
  }
  75% {
    transform: translateY(-30px) rotate(270deg);
  }
}

/* Kinetic Typography */
.kinetic-text {
  overflow: hidden;
}

.kinetic-text-line {
  display: block;
  transform: translateY(100%);
  opacity: 0;
  animation: slideUpReveal 0.8s var(--ease-expo-out) forwards;
}

.kinetic-text-line:nth-child(1) {
  animation-delay: 0.3s;
}
.kinetic-text-line:nth-child(2) {
  animation-delay: 0.45s;
}
.kinetic-text-line:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes slideUpReveal {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Variable Font Weight Animation */
.variable-weight {
  font-variation-settings: 'wght' 600;
  transition: font-variation-settings 0.3s ease;
}

.variable-weight:hover,
.variable-weight.active {
  font-variation-settings: 'wght' 800;
}

/* Net Divider */
.net-divider {
  position: relative;
  height: 4px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 20%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.3) 80%,
    transparent 100%
  );
  margin: 2rem 0;
}

.net-divider::before {
  content: '';
  position: absolute;
  inset: -10px 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 8px,
    rgba(255, 255, 255, 0.1) 8px,
    rgba(255, 255, 255, 0.1) 10px
  );
}

.net-divider.vibrate {
  animation: netVibrate 0.3s ease-out;
}

@keyframes netVibrate {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.5);
  }
}

/* Paddle Cursor Zone */
.paddle-zone {
  position: relative;
}

.paddle-shadow {
  position: fixed;
  width: 80px;
  height: 80px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(
    circle,
    rgba(204, 255, 0, 0.2) 0%,
    transparent 70%
  );
  border-radius: 50%;
  z-index: 5;
}

.paddle-zone:hover .paddle-shadow {
  opacity: 1;
}

/* =============================================== */
/* SCROLL PHYSICS - RALLY MODE */
/* =============================================== */

/* Parallax Court Flooring */
.court-flooring {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.1;
  transform: rotate(2deg) scale(1.1);
  background: linear-gradient(
    90deg,
    var(--court-blue) 0%,
    var(--court-green) 50%,
    var(--court-blue) 100%
  );
}

.court-flooring::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 100px,
    rgba(255, 255, 255, 0.05) 100px,
    rgba(255, 255, 255, 0.05) 102px
  );
}

/* Ball Trail Dividers */
.ball-trail {
  position: absolute;
  width: 100%;
  height: 100px;
  pointer-events: none;
  overflow: visible;
}

.ball-trail-path {
  fill: none;
  stroke: var(--court-lime);
  stroke-width: 2;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  opacity: 0.3;
  filter: drop-shadow(0 0 5px var(--court-lime-glow));
}

.ball-trail-path.animate {
  animation: drawTrail 1s var(--ease-expo-out) forwards;
}

@keyframes drawTrail {
  to {
    stroke-dashoffset: 0;
  }
}

/* Velocity Skew */
.velocity-skew {
  transition: transform 0.1s ease-out;
  will-change: transform;
}

/* =============================================== */
/* SCOREBOARD CARDS */
/* =============================================== */

.scoreboard-card {
  background: linear-gradient(
    145deg,
    rgba(30, 41, 59, 0.9) 0%,
    rgba(15, 23, 42, 0.95) 100%
  );
  border: 1px solid rgba(204, 255, 0, 0.2);
  border-radius: 1rem;
  padding: 1.5rem;
  transform-style: preserve-3d;
  perspective: 1000px;
  opacity: 0;
  transform: rotateX(-90deg);
  animation: cardFlipIn 0.8s var(--ease-spring) forwards;
}

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

@keyframes cardFlipIn {
  0% {
    opacity: 0;
    transform: rotateX(-90deg) translateY(20px);
  }
  60% {
    transform: rotateX(10deg) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: rotateX(0) translateY(0);
  }
}

.scoreboard-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  background: linear-gradient(
    135deg,
    rgba(204, 255, 0, 0.1) 0%,
    transparent 50%
  );
  pointer-events: none;
}

/* =============================================== */
/* INTERACTIVE MICRO-MOMENTS */
/* =============================================== */

/* Ball Compression Button */
.btn-compress {
  position: relative;
  background: linear-gradient(135deg, var(--court-lime) 0%, #a3cc00 100%);
  color: var(--court-dark);
  font-weight: 800;
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  transition:
    transform 0.15s var(--ease-spring),
    box-shadow 0.3s ease;
  overflow: hidden;
  will-change: transform;
}

.btn-compress::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
    rgba(255, 255, 255, 0.5) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.3s;
}

.btn-compress:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 40px rgba(204, 255, 0, 0.4);
}

.btn-compress:active {
  transform: scale(0.95);
}

.btn-compress.clicked::before {
  opacity: 1;
  animation: ripple 0.6s ease-out;
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.8;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* Secondary Button */
.btn-outline-court {
  position: relative;
  background: transparent;
  color: white;
  font-weight: 600;
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s var(--ease-spring);
  overflow: hidden;
}

.btn-outline-court:hover {
  border-color: var(--court-lime);
  color: var(--court-lime);
  box-shadow: 0 0 20px rgba(204, 255, 0, 0.2);
}

/* Feature Card 3D Tilt - Nuclear option for clickability */
.feature-card-3d {
  background: linear-gradient(
    145deg,
    rgba(30, 41, 59, 0.8) 0%,
    rgba(15, 23, 42, 0.9) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.5rem;
  padding: 2rem;
  transform-style: preserve-3d;
  transition:
    transform 0.1s ease-out,
    box-shadow 0.3s ease;
  will-change: transform;
  position: relative;
  z-index: 10;
  overflow: hidden;
}

/* Card and surface must not block */
[data-tilt-target='card'] {
  position: relative;
  z-index: auto;
}

[data-tilt-target='surface'] {
  position: relative;
  z-index: auto;
}

/* Glare overlay must be behind everything */
[data-tilt-target='glare'] {
  pointer-events: none !important;
  z-index: -1 !important;
}

/* SVG elements inside cards shouldn't block */
.feature-card-3d svg {
  pointer-events: none !important;
}

/* Text and interactive elements */
.feature-card-3d h3,
.feature-card-3d p,
.feature-card-3d .feature-card-icon {
  position: relative;
  z-index: 1;
}

/* Links must be fully interactive - most aggressive approach */

.feature-card-3d::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none !important;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

/* Ensure all pseudo-elements in feature cards don't block */
.feature-card-3d::after,
.feature-card-3d *::before,
.feature-card-3d *::after {
  pointer-events: none !important;
}

/* But the link itself must be clickable */
.feature-card-3d a,
.feature-card-3d a::before,
.feature-card-3d a::after,
.feature-card-3d a * {
  pointer-events: auto !important;
}

.feature-card-3d:hover::before {
  transform: translateX(100%);
}

.feature-card-3d:hover {
  border-color: rgba(204, 255, 0, 0.3);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(204, 255, 0, 0.1);
}

.feature-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: linear-gradient(
    135deg,
    var(--court-lime-dim) 0%,
    rgba(204, 255, 0, 0.05) 100%
  );
  border-radius: 1rem;
  margin-bottom: 1.5rem;
  color: var(--court-lime);
  transform: translateZ(30px);
}

/* Motion Trails */
.motion-trail {
  position: relative;
}

.motion-trail::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  opacity: 0.3;
  transform: translate(-5px, -5px);
  filter: blur(4px);
  z-index: -1;
  animation: trail 0.3s ease-out;
}

@keyframes trail {
  0% {
    opacity: 0.5;
    transform: translate(-10px, -10px);
  }
  100% {
    opacity: 0;
    transform: translate(-20px, -20px);
  }
}

/* =============================================== */
/* BRACKET VISUALIZATION */
/* =============================================== */

.mini-bracket {
  width: 100%;
  height: 120px;
}

.bracket-line {
  stroke: var(--court-lime);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  opacity: 0.5;
}

.bracket-line.animate {
  animation: drawBracket 1.5s var(--ease-expo-out) forwards;
}

@keyframes drawBracket {
  to {
    stroke-dashoffset: 0;
  }
}

.bracket-node {
  fill: rgba(204, 255, 0, 0.2);
  stroke: var(--court-lime);
  stroke-width: 1;
  opacity: 0;
}

.bracket-node.animate {
  animation: nodeAppear 0.3s var(--ease-spring) forwards;
}

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

/* =============================================== */
/* LIVE SCORE TICKER */
/* =============================================== */

.score-ticker {
  overflow: hidden;
  white-space: nowrap;
  background: linear-gradient(
    90deg,
    var(--court-dark) 0%,
    rgba(26, 77, 92, 0.5) 50%,
    var(--court-dark) 100%
  );
  border-top: 1px solid rgba(204, 255, 0, 0.2);
  border-bottom: 1px solid rgba(204, 255, 0, 0.2);
  padding: 0.75rem 0;
}

.score-ticker-content {
  display: inline-block;
  animation: ticker 30s linear infinite;
}

.score-ticker-item {
  display: inline-block;
  padding: 0 2rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  font-weight: 500;
}

.score-ticker-item .score {
  color: var(--court-lime);
  font-weight: 700;
}

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

/* =============================================== */
/* TESTIMONIALS - THE DINK */
/* =============================================== */

.dink-section {
  position: relative;
  overflow: hidden;
}

.dink-ball {
  position: absolute;
  width: 30px;
  height: 30px;
  background: radial-gradient(
    circle at 30% 30%,
    #ffffcc,
    #ccff00 40%,
    #99cc00 100%
  );
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(204, 255, 0, 0.5);
  opacity: 0;
  pointer-events: none;
}

.dink-ball.animate {
  animation: dinkArc 2s var(--ease-expo-out) forwards;
}

@keyframes dinkArc {
  0% {
    opacity: 1;
    left: 10%;
    top: 80%;
    transform: scale(1);
  }
  50% {
    left: 50%;
    top: 20%;
    transform: scale(0.8);
  }
  100% {
    opacity: 0.3;
    left: 90%;
    top: 60%;
    transform: scale(0.6);
  }
}

/* Quote styling */
.quote-text {
  font-size: 1.75rem;
  font-style: italic;
  line-height: 1.5;
  position: relative;
}

.quote-text::before {
  content: '"';
  font-size: 4rem;
  color: var(--court-lime);
  opacity: 0.3;
  position: absolute;
  top: -1rem;
  left: -1rem;
  font-family: Georgia, serif;
}

/* =============================================== */
/* SPEED LINES & EFFECTS */
/* =============================================== */

.speed-lines {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.speed-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--speed-streak),
    transparent
  );
  opacity: 0;
}

.speed-line.active {
  animation: speedLine 0.5s ease-out forwards;
}

@keyframes speedLine {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* =============================================== */
/* FLIP ANIMATION FOR BRACKET EXPANSION */
/* =============================================== */

.flip-container {
  perspective: 1000px;
}

.flip-card {
  transform-style: preserve-3d;
  transition: all 0.6s var(--ease-expo-out);
}

.flip-card.expanding {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
}

/* =============================================== */
/* REDUCED MOTION FALLBACKS */
/* =============================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .floating-ball,
  .court-line,
  .kinetic-text-line,
  .scoreboard-card,
  .ball-trail-path,
  .bracket-line,
  .dink-ball {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .court-flooring,
  .net-divider::before {
    display: none;
  }

  .score-ticker-content {
    animation: none;
  }
}

/* =============================================== */
/* MOBILE ADAPTATIONS */
/* =============================================== */

@media (max-width: 768px) {
  .floating-ball {
    width: 25px;
    height: 25px;
  }

  .court-line {
    height: 1px;
  }

  .feature-card-3d {
    transform: none !important;
  }

  .paddle-shadow {
    display: none;
  }

  .score-ticker-item {
    font-size: 0.75rem;
    padding: 0 1rem;
  }
}

/* =============================================== */
/* UTILITY CLASSES */
/* =============================================== */

.text-court-lime {
  color: var(--court-lime);
}
.bg-court-lime {
  background-color: var(--court-lime);
}
.border-court-lime {
  border-color: var(--court-lime);
}

.glow-lime {
  box-shadow:
    0 0 20px var(--court-lime-glow),
    0 0 40px var(--court-lime-dim);
}

.text-glow {
  text-shadow: 0 0 20px var(--court-lime-glow);
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(
    135deg,
    var(--court-lime) 0%,
    #ffffff 50%,
    var(--court-lime) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Perspective container */
.perspective-container {
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* GPU acceleration */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}