@import "tailwindcss";

@theme {
  --font-sans: "Inter", "Noto Sans SC", sans-serif;
  --color-cat-primary: #FF6B6B; /* Sunset Coral */
  --color-cat-secondary: #4ECDC4; /* Mint Teal */
  --color-cat-dark: #2D3436;
  --color-coral-50: #fff5f5;
  --color-coral-100: #ffe3e3;
  --color-coral-200: #ffc9c9;
  --color-coral-400: #ff8787;
}

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

.cat-gradient {
  @apply bg-gradient-to-br from-[#FF6B6B] to-[#FF8E8E];
}

.glass-header {
  @apply bg-white/90 backdrop-blur-md border-b border-slate-100;
}

.movie-card {
  @apply relative bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-500 hover:-translate-y-2;
}

.btn-primary {
  @apply bg-[#FF6B6B] hover:bg-[#FF5252] text-white px-8 py-3 rounded-full font-bold transition-all shadow-lg shadow-cat-primary/20 active:scale-95;
}

.tag-pill {
  @apply px-4 py-1.5 rounded-full text-sm font-medium transition-all cursor-pointer;
}

.tag-active {
  @apply bg-[#FF6B6B] text-white shadow-md;
}

.tag-inactive {
  @apply bg-slate-100 text-slate-500 hover:bg-slate-200;
}

[data-page] {
  display: none;
}

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

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

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

.nav-link {
  @apply relative text-sm font-bold text-slate-600 hover:text-[#FF6B6B] transition-colors;
}

.nav-link.active {
  @apply text-[#FF6B6B];
}

.nav-link.active::after {
  content: '';
  @apply absolute -bottom-1 left-0 w-full h-0.5 bg-[#FF6B6B] rounded-full;
}

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

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}