@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700;800;900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  margin: 0;
  padding: 0;
  position: relative;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: border-box;
}

@layer base {
  body {
    @apply bg-[#f0f4f8] text-slate-800 antialiased flex flex-col min-h-screen selection:bg-blue-600 selection:text-white;
    font-family: 'Inter', sans-serif;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
  }
}

@layer components {
  /* High-end Sports Cards */
  .card {
    @apply bg-white rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-slate-100 overflow-hidden transition-all duration-300;
  }
  .card-hover:hover {
    @apply shadow-[0_20px_40px_rgba(15,32,68,0.1)] -translate-y-1 border-blue-200;
  }
  
  /* Premium Agency-Style Interactive Buttons */
  .btn-primary {
    @apply relative overflow-hidden bg-[#0f2044] text-white px-8 py-4 rounded-full font-bold transition-all duration-300 inline-flex items-center justify-center gap-3 shadow-lg shadow-[#0f2044]/20 border border-transparent;
  }
  .btn-primary::before {
    content: '';
    @apply absolute inset-0 bg-blue-600 translate-y-full transition-transform duration-300 ease-in-out;
  }
  .btn-primary:hover::before {
    @apply translate-y-0;
  }
  .btn-primary > * {
    @apply relative z-10 transition-transform duration-300;
  }
  .btn-primary:hover i {
    @apply translate-x-1;
  }

  .btn-outline {
    @apply bg-white/10 backdrop-blur-sm text-white border border-white/30 px-8 py-4 rounded-full font-bold hover:bg-white hover:text-[#0f2044] transition-all duration-300 inline-flex items-center justify-center gap-3;
  }
  
  /* Badges */
  .badge {
    @apply px-3 py-1.5 rounded-full text-[10px] font-black tracking-widest uppercase inline-flex items-center gap-1.5 shadow-sm;
  }
  .badge-live {
    @apply bg-red-600 text-white shadow-red-500/30;
  }
  .badge-upcoming {
    @apply bg-slate-100 text-slate-600 border border-slate-200;
  }
  .badge-completed {
    @apply bg-blue-50 text-blue-700 border border-blue-200;
  }
}

/* Dynamic Live Indicator */
@keyframes ping-soft {
  0% { transform: scale(1); opacity: 1; }
  75% { transform: scale(2); opacity: 0; }
  100% { transform: scale(2); opacity: 0; }
}
.live-dot-wrap {
  @apply relative flex items-center justify-center w-2.5 h-2.5;
}
.live-dot-ping {
  @apply absolute inline-flex h-full w-full rounded-full bg-white opacity-75;
  animation: ping-soft 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.live-dot-core {
  @apply relative inline-flex rounded-full h-1.5 w-1.5 bg-white;
}

/* Page transitions */
.reveal-up {
  animation: revealUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  transform: translateY(20px);
}
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }

@keyframes revealUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Custom Webkit Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.5);
}

/* Abstract Background Pattern */
.bg-pattern-dots {
  background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ============================================================
   PREMIUM BADMINTON ARENA STYLING SYSTEM
   ============================================================ */

/* 1. Official Badminton Court Floor Watermark (Crisp Vector SVG) */
.bg-badminton-court {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 610 1340' fill='none' stroke='%233b82f6' stroke-width='1.5' stroke-opacity='0.08'%3E%3Crect x='10' y='10' width='590' height='1320'/%3E%3Cline x1='50' y1='10' x2='50' y2='1330'/%3E%3Cline x1='560' y1='10' x2='560' y2='1330'/%3E%3Cline x1='10' y1='86' x2='600' y2='86'/%3E%3Cline x1='10' y1='1254' x2='600' y2='1254'/%3E%3Cline x1='10' y1='472' x2='600' y2='472' stroke-width='2'/%3E%3Cline x1='10' y1='868' x2='600' y2='868' stroke-width='2'/%3E%3Cline x1='305' y1='10' x2='305' y2='472'/%3E%3Cline x1='305' y1='868' x2='305' y2='1330'/%3E%3Cline x1='0' y1='670' x2='610' y2='670' stroke='%23c9a84c' stroke-width='3' stroke-opacity='0.18'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-badminton-court-gold {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 610 1340' fill='none' stroke='%23c9a84c' stroke-width='1.5' stroke-opacity='0.06'%3E%3Crect x='10' y='10' width='590' height='1320'/%3E%3Cline x1='50' y1='10' x2='50' y2='1330'/%3E%3Cline x1='560' y1='10' x2='560' y2='1330'/%3E%3Cline x1='10' y1='86' x2='600' y2='86'/%3E%3Cline x1='10' y1='1254' x2='600' y2='1254'/%3E%3Cline x1='10' y1='472' x2='600' y2='472' stroke-width='2'/%3E%3Cline x1='10' y1='868' x2='600' y2='868' stroke-width='2'/%3E%3Cline x1='305' y1='10' x2='305' y2='472'/%3E%3Cline x1='305' y1='868' x2='305' y2='1330'/%3E%3Cline x1='0' y1='670' x2='610' y2='670' stroke='%23c9a84c' stroke-width='3' stroke-opacity='0.15'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* 2. Realistic "Across the Net" Divider with White Top Tape & Micro Diamond Mesh */
.badminton-net-divider-h {
  position: relative;
  width: 100%;
  height: 12px;
  background-color: rgba(15, 32, 68, 0.45);
  background-image: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%),
    linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%),
    linear-gradient(315deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%);
  background-position: 4px 0, 4px 0, 0 0, 0 0;
  background-size: 8px 8px;
  border-top: 2px solid #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.badminton-net-divider-v {
  position: relative;
  width: 12px;
  height: 100%;
  background-color: rgba(15, 32, 68, 0.45);
  background-image: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%),
    linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%),
    linear-gradient(315deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%);
  background-position: 0 4px, 0 4px, 0 0, 0 0;
  background-size: 8px 8px;
  border-left: 2px solid #ffffff;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 1px 0 6px rgba(0, 0, 0, 0.35);
}

/* 3. High-Tension Racket Stringbed Grid (Behind Score Digits) */
.bg-racket-strings {
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: center center;
}

/* 4. Luxury Carbon-Fiber Graphite Weave */
.border-carbon {
  border-image: linear-gradient(135deg, #374151 0%, #111827 50%, #4b5563 100%) 1;
}

/* 5. Aerodynamic Feather Float Animation */
@keyframes feather-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(3deg); }
}
.animate-feather-float {
  animation: feather-float 2.4s ease-in-out infinite;
}

/* 6. Shuttlecock Serve Pulse */
@keyframes shuttle-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(201, 168, 76, 0.4)); }
  50% { filter: drop-shadow(0 0 14px rgba(201, 168, 76, 0.9)); }
}
.animate-shuttle-pulse {
  animation: shuttle-pulse 1.6s ease-in-out infinite;
}