@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-family:
      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
      Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  }
}

@layer components {
  .container-page {
    @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8;
  }

  .prose-rich h1,
  .prose-rich h2,
  .prose-rich h3 {
    @apply mt-6 mb-3 font-semibold text-gray-900;
  }
  .prose-rich h1 {
    @apply text-2xl;
  }
  .prose-rich h2 {
    @apply text-xl;
  }
  .prose-rich h3 {
    @apply text-lg;
  }
  .prose-rich p {
    @apply my-3 leading-7 text-gray-700;
  }
  .prose-rich img {
    @apply my-4 rounded-lg;
  }
  .prose-rich ul,
  .prose-rich ol {
    @apply my-3 pl-6;
  }
  .prose-rich ul {
    @apply list-disc;
  }
  .prose-rich ol {
    @apply list-decimal;
  }
  .prose-rich a {
    @apply text-brand-600 underline underline-offset-2;
  }
  .prose-rich blockquote {
    @apply border-l-4 border-gray-200 pl-4 italic text-gray-600;
  }
}

/* react-quill 编辑器内部样式 */
.ql-editor {
  min-height: 240px;
}

/* ===== Hero 几何动画 ===== */
@keyframes hero-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(6deg); }
}
@keyframes hero-float-rev {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(16px) rotate(-8deg); }
}
@keyframes hero-spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes hero-pulse-ring {
  0% { transform: scale(0.8); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 0.2; }
  100% { transform: scale(0.8); opacity: 0.6; }
}
@keyframes hero-slide {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(12px); }
}

.hero-anim-float { animation: hero-float 6s ease-in-out infinite; }
.hero-anim-float-rev { animation: hero-float-rev 7s ease-in-out infinite; }
.hero-anim-spin { animation: hero-spin-slow 18s linear infinite; }
.hero-anim-pulse { animation: hero-pulse-ring 4s ease-in-out infinite; }
.hero-anim-slide { animation: hero-slide 5s ease-in-out infinite; }

/* ===== Showcase 浮动动画 ===== */
@keyframes showcase-gentle-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes showcase-glow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}
.showcase-anim-float { animation: showcase-gentle-float 5s ease-in-out infinite; }
.showcase-anim-glow { animation: showcase-glow 4s ease-in-out infinite; }