@import "tailwindcss";

@theme {
  --font-sans: "Inter", "Noto Sans SC", sans-serif;
  --color-star-primary: #6366f1; /* Indigo */
  --color-star-secondary: #a855f7; /* Purple */
  --color-star-dark: #0f172a; /* Slate 900 */
}

@layer base {
  html {
    scroll-behavior: smooth;
  }
  body {
    @apply bg-[#020617] text-slate-300 antialiased selection:bg-indigo-500/30;
  }
}

.star-gradient {
  @apply bg-gradient-to-br from-indigo-600 via-purple-600 to-indigo-900;
}

.glass-nav {
  @apply bg-slate-950/80 backdrop-blur-xl border-b border-white/5;
}

.movie-card {
  @apply relative bg-white/5 backdrop-blur-md border border-white/10 rounded-3xl overflow-hidden transition-all duration-500 hover:border-indigo-500/50 hover:shadow-[0_0_40px_rgba(99,102,241,0.2)];
}

.btn-star {
  @apply bg-indigo-600 hover:bg-indigo-500 text-white px-8 py-3.5 rounded-2xl font-bold transition-all shadow-lg shadow-indigo-500/20 active:scale-95;
}

.tag-btn {
  @apply px-5 py-2 rounded-xl text-sm font-bold transition-all cursor-pointer border border-white/5;
}

.tag-active {
  @apply bg-indigo-600 text-white border-indigo-500 shadow-lg shadow-indigo-500/20;
}

.tag-inactive {
  @apply bg-white/5 text-slate-400 hover:bg-white/10;
}

[data-page] {
  display: none;
}

[data-page].active {
  display: block;
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.nav-link {
  @apply relative text-sm font-bold text-slate-400 hover:text-white transition-colors;
}

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

.nav-link.active::after {
  content: '';
  @apply absolute -bottom-1.5 left-0 w-full h-0.5 bg-indigo-500 rounded-full;
}

.star-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-20px) rotate(2deg); }
}

.text-glow {
  text-shadow: 0 0 20px rgba(99,102,241,0.5);
}

.cosmic-bg {
  background-image: radial-gradient(circle at 20% 30%, rgba(99,102,241,0.15) 0%, transparent 50%),
                    radial-gradient(circle at 80% 70%, rgba(168,85,247,0.15) 0%, transparent 50%);
}