@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');
@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Playfair Display", serif;
  
  --color-brand-red: #e63946;
  --color-brand-dark: #1d3557;
  --color-brand-black: #0a0a0a;
  --color-brand-gray: #f1faee;
}

@layer base {
  body {
    @apply bg-brand-black text-white font-sans selection:bg-brand-red selection:text-white;
    scroll-behavior: smooth;
  }
}

@layer components {
  .nav-link {
    @apply text-gray-400 hover:text-brand-red transition-all duration-300 font-semibold text-sm uppercase tracking-tighter;
  }
  
  .btn-primary {
    @apply bg-brand-red text-white px-8 py-3 rounded-sm font-bold hover:bg-white hover:text-brand-red transition-all duration-300 uppercase tracking-widest text-xs;
  }

  .btn-secondary {
    @apply border border-white text-white px-8 py-3 rounded-sm font-bold hover:bg-white hover:text-brand-black transition-all duration-300 uppercase tracking-widest text-xs;
  }

  .movie-card {
    @apply relative overflow-hidden rounded-lg group bg-zinc-900 border border-zinc-800 hover:border-brand-red transition-all duration-500;
  }

  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
  }

  .reveal.active {
    opacity: 1;
    transform: translateY(0);
  }

  .section-title {
    @apply text-4xl md:text-6xl font-serif italic mb-8 relative inline-block;
  }

  .section-title::after {
    content: '';
    @apply absolute -bottom-2 left-0 w-20 h-1 bg-brand-red;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
  background: #333;
}
::-webkit-scrollbar-thumb:hover {
  background: #e63946;
}

.gradient-overlay {
  background: linear-gradient(to top, rgba(10,10,10,1) 0%, rgba(10,10,10,0) 100%);
}

.text-glow {
  text-shadow: 0 0 15px rgba(230, 57, 70, 0.5);
}