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

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

/* Base Styles */
body {
  @apply bg-cine-black text-cine-text;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}

/* Custom Component Classes */
@layer components {
  .nav-link {
    @apply relative py-2 text-cine-text opacity-70 hover:opacity-100 transition duration-300 ease-cinematic;
  }
  
  .nav-link-active {
    @apply opacity-100;
  }
  
  .nav-link::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-cine-accent transition-all duration-300 ease-cinematic;
  }
  
  .nav-link:hover::after {
    @apply w-full;
  }
  
  .button-primary {
    @apply px-6 py-3 bg-cine-accent text-cine-black font-semibold hover:bg-opacity-90 transition duration-300 ease-cinematic;
  }
  
  .button-outline {
    @apply px-6 py-3 border border-cine-accent text-cine-accent font-semibold hover:bg-cine-accent hover:bg-opacity-10 transition duration-300 ease-cinematic;
  }
  
  .film-card {
    @apply relative overflow-hidden group;
  }
  
  .film-card-overlay {
    @apply absolute inset-0 bg-gradient-to-t from-cine-black to-transparent opacity-80 transition-opacity duration-500 ease-cinematic;
  }
  
  .film-card:hover .film-card-overlay {
    @apply opacity-95;
  }
  
  .film-card-content {
    @apply absolute bottom-0 left-0 w-full p-6 transform translate-y-4 transition-transform duration-500 ease-cinematic;
  }
  
  .film-card:hover .film-card-content {
    @apply translate-y-0;
  }
  
  .filter-button {
    @apply px-4 py-2 bg-cine-gray text-cine-text rounded-md hover:bg-cine-light transition duration-300;
  }
  
  .filter-button-active {
    @apply bg-cine-accent text-cine-black;
  }
}

/* Animations and Transitions */
.fade-in {
  @apply opacity-0 animate-fade-in;
}

.slide-up {
  @apply opacity-0 animate-slide-up;
}

/* Delay Animation Cascade */
.delay-100 {
  animation-delay: 100ms;
}

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

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

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

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-cine-dark;
}

::-webkit-scrollbar-thumb {
  @apply bg-cine-light rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-cine-accent;
}

/* Film Images with Cinematic Aspect Ratio */
.cinematic-image {
  aspect-ratio: 2.39 / 1;
  @apply object-cover w-full;
}