@import "tailwindcss";

@theme {
  --font-sans: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
  --color-watermelon-red: #ff4d6d;
  --color-watermelon-green: #2b9348;
  --color-chigua-dark: #121212;
}

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

.chigua-gradient {
  @apply bg-gradient-to-r from-pink-500 to-rose-600;
}

.glass-nav {
  @apply bg-white/80 backdrop-blur-lg border-b border-slate-200;
}

.card-shadow {
  @apply shadow-xl shadow-rose-500/5 border border-rose-100;
}

.movie-hover {
  @apply transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl hover:shadow-rose-500/20;
}

[data-page] {
  display: none;
}

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

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

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

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

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

.tag-pill {
  @apply px-4 py-1.5 rounded-full text-xs font-bold transition-all;
}

.tag-pill-active {
  @apply bg-rose-500 text-white shadow-lg shadow-rose-500/30;
}

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