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

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

@layer base {
  :root {
    --background: 0 0% 6%;     /* #0F0F0F */
    --foreground: 0 0% 98%;    /* #FFFFFF */

    --card: 0 0% 10%;          /* #1A1A1A */
    --card-foreground: 0 0% 98%;

    --popover: 0 0% 8%;
    --popover-foreground: 0 0% 98%;

    --primary: 72 100% 50%;    /* #CCFF00 */
    --primary-foreground: 0 0% 0%;

    --secondary: 267 100% 50%; /* #7000FF */
    --secondary-foreground: 0 0% 100%;

    --muted: 0 0% 16%;
    --muted-foreground: 0 0% 63%; /* #A1A1A1 */

    --accent: 267 100% 50%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 0 0% 20%;
    --input: 0 0% 20%;
    --ring: 72 100% 50%;

    --radius: 1rem;

    --gradient-primary: linear-gradient(135deg, hsl(72 100% 50%) 0%, hsl(267 100% 50%) 100%);
    --gradient-card: linear-gradient(145deg, hsl(0 0% 12%) 0%, hsl(0 0% 8%) 100%);
    --gradient-glow: radial-gradient(ellipse at center, hsl(72 100% 50% / 0.15) 0%, transparent 70%);
    --gradient-hero: linear-gradient(180deg, hsl(0 0% 6%) 0%, hsl(0 0% 10%) 50%, hsl(0 0% 6%) 100%);
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-family: 'Outfit', system-ui, sans-serif;
    background-image: var(--gradient-hero);
    background-attachment: fixed;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', system-ui, sans-serif;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-family: 'Inter', system-ui, sans-serif;
    background-image: var(--gradient-hero);
    background-attachment: fixed;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
  }

  /* Global Subtitle Styling */
  video::cue {
    /* Improve readability */
    background-color: rgba(0, 0, 0, 0.7) !important;
    color: white !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    
    /* Responsive: Min 16px, dynamic growth, Max 24px */
    font-size: clamp(16px, 4vw, 24px) !important; 
    line-height: 1.4 !important; 
    padding: 2px 8px !important;
    
    /* Layout: Strict 80% width relative to video area */
    width: auto !important;
    max-width: 80% !important;
    white-space: pre-wrap !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    
    margin: 0 auto !important;
    text-align: center !important;
    
    /* Force container lift for Webkit/Blink (Chrome, Edge, Safari) */
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  }

  /* Force container lift for Webkit/Blink */
  video::-webkit-media-text-track-container {
    transform: translateY(-5%) !important;
    position: relative !important;
  }

  /* Mobile specific adjustments */
  @media (max-width: 640px) {
    video::cue {
      font-size: 18px !important;
      line-height: 1.3 !important;
      padding: 4px 8px !important;
      max-width: 95% !important;
      background-color: rgba(0, 0, 0, 0.6) !important; /* Slightly more transparent like typical apps */
      text-shadow: 1px 1px 2px black !important;
    }
    
    video::-webkit-media-text-track-container {
        transform: translateY(-15%) !important;
    }
  }
}

@layer components {
  .glass {
    @apply bg-card/60 backdrop-blur-xl border border-border/50;
  }

  .glass-strong {
    @apply bg-card/80 backdrop-blur-2xl border border-border/60;
  }

  .gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .gradient-border {
    position: relative;
  }

  .gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: var(--gradient-primary);
    -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;
  }

  .card-hover {
    @apply transition-all duration-300 ease-out;
  }

  .card-hover:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-card);
  }

  .tag-pill {
    @apply px-3 py-1 text-xs font-medium rounded-full bg-muted/80 text-muted-foreground 
           hover:bg-primary/20 hover:text-primary transition-colors duration-200;
  }

  .nav-link {
    @apply relative px-4 py-2 text-sm font-medium text-muted-foreground 
           hover:text-foreground transition-colors duration-200;
  }

  .nav-link.active {
    @apply text-foreground;
  }

  .nav-link.active::after {
    content: '';
    @apply absolute bottom-0 left-1/2 -translate-x-1/2 w-1/2 h-0.5 rounded-full;
    background: var(--gradient-primary);
  }

  .search-input {
    @apply w-full bg-muted/50 border border-border/50 rounded-2xl px-5 py-3 
           text-foreground placeholder:text-muted-foreground
           focus:outline-none focus:border-primary/50 focus:ring-2 focus:ring-primary/20
           transition-all duration-300;
  }

  .badge-popular {
    @apply px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider rounded-md;
    background: linear-gradient(135deg, hsl(350, 100%, 65%) 0%, hsl(320, 100%, 65%) 100%);
  }

  .episode-count {
    @apply inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium 
           bg-background/80 backdrop-blur-sm rounded-lg;
  }

  .play-count {
    @apply inline-flex items-center gap-1 text-xs text-muted-foreground;
  }
}

@layer utilities {
  .animate-fade-up {
    animation: fadeUp 0.5s ease-out forwards;
  }

  .animate-scale-in {
    animation: scaleIn 0.3s ease-out forwards;
  }

  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .animation-delay-100 {
    animation-delay: 100ms;
  }

  .animation-delay-200 {
    animation-delay: 200ms;
  }

  .animation-delay-300 {
    animation-delay: 300ms;
  }
}