@import "tailwindcss";

@theme {
  --font-sans: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
  --color-pineapple-yellow: #facc15;
  --color-pineapple-green: #22c55e;
  --color-pineapple-dark: #0f172a;
}

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

.glass-card {
  @apply bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl;
}

.pineapple-gradient {
  @apply bg-gradient-to-r from-yellow-400 to-green-500;
}

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

.movie-card-hover {
  @apply transition-all duration-300 hover:scale-105 hover:shadow-[0_0_20px_rgba(250,204,21,0.3)];
}

[data-page] {
  display: none;
}

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

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

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

.nav-link {
  @apply text-sm font-medium transition-colors hover:text-yellow-400 text-slate-300;
}

.nav-link.active {
  @apply text-yellow-400;
}