@import "tailwindcss";

@theme {
  --font-sans: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
  --color-cinema-gold: #D4AF37;
  --color-cinema-blue: #0A192F;
  --color-cinema-accent: #1E3A8A;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }
  body {
    @apply bg-slate-950 text-slate-200 antialiased;
  }
}

.gold-gradient {
  @apply bg-gradient-to-r from-yellow-600 via-yellow-400 to-yellow-700;
}

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

.cinema-card {
  @apply bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl overflow-hidden transition-all duration-500 hover:border-yellow-500/50 hover:shadow-[0_0_30px_rgba(212,175,55,0.15)];
}

.gradient-text {
  @apply bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-yellow-200;
}

[data-page] {
  display: none;
}

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

.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

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

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

.movie-badge {
  @apply absolute top-3 right-3 px-2 py-1 rounded text-[10px] font-black uppercase tracking-widest shadow-lg;
}

.nav-item {
  @apply relative text-sm font-bold text-slate-400 transition-colors hover:text-yellow-500;
}

.nav-item.active {
  @apply text-yellow-500;
}

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