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

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Space Grotesk", sans-serif;
  --color-brand-50: #f5f3ff;
  --color-brand-100: #ede9fe;
  --color-brand-200: #ddd6fe;
  --color-brand-300: #c4b5fd;
  --color-brand-400: #a78bfa;
  --color-brand-500: #8b5cf6;
  --color-brand-600: #7c3aed;
  --color-brand-700: #6d28d9;
  --color-brand-800: #5b21b6;
  --color-brand-900: #4c1d95;
}

@layer base {
  body {
    @apply bg-white text-slate-900 font-sans antialiased;
  }
  h1, h2, h3, h4, h5, h6 {
    @apply font-display tracking-tight;
  }
}

@layer components {
  .glass-nav {
    @apply bg-white/80 backdrop-blur-md border-b border-slate-100;
  }
  .card-hover {
    @apply transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-brand-500/10;
  }
  .section-title {
    @apply text-4xl md:text-5xl font-black text-slate-900 mb-4;
  }
  .purple-gradient {
    @apply bg-gradient-to-br from-brand-600 to-indigo-700;
  }
  .movie-overlay {
    @apply absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent;
  }
}

/* Custom Animations */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.smooth-scroll {
  scroll-behavior: smooth;
}