@import "tailwindcss";

@theme {
  --font-sans: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
  --color-yuzu-orange: #FF9800;
  --color-yuzu-green: #8BC34A;
  --color-yuzu-dark: #1A1A1B;
}

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

.yuzu-gradient {
  @apply bg-gradient-to-r from-orange-500 to-yellow-400;
}

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

.card-shadow {
  @apply shadow-lg shadow-slate-200/50 border border-slate-100;
}

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

[data-page] {
  display: none;
}

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

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

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

.section-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

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