@import "tailwindcss";

@theme {
  --color-gold-pale: #F5E6BE;
  --color-gold-deep: #D4AF37;
  --color-gold-soft: #FFF8E1;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }
  body {
    @apply bg-neutral-900 text-white font-sans;
  }
}

@layer components {
  .btn-gold {
    @apply bg-gold-pale text-neutral-900 px-6 py-2 rounded-full font-semibold transition-all hover:bg-gold-deep hover:text-white shadow-lg inline-block text-center;
  }
  .movie-card {
    @apply relative overflow-hidden rounded-lg transition-transform hover:scale-105 cursor-pointer block;
  }
  .movie-card img {
    @apply w-full h-auto object-cover aspect-[2/3];
  }
  .movie-overlay {
    @apply absolute inset-0 bg-black/60 opacity-0 hover:opacity-100 transition-opacity flex flex-col justify-end p-4;
  }
  .nav-link {
    @apply hover:text-gold-pale transition-colors text-sm font-medium uppercase tracking-widest;
  }
  .nav-link.active {
    @apply text-gold-pale;
  }
}

/* Custom animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}