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

/* 自定义样式 */
@layer base {
  :root {
    --brand-primary: #38CD7F;
    --brand-main: #07c160;
    --brand-dark: #06b357;
    --bg-light: #f8fafc;
    --bg-white: #ffffff;
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --text-muted: #718096;
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-light);
  }

  /* 响应式容器 */
  .container-responsive {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
}

@layer components {
  /* 动画效果 */
  .fade-in {
    animation: fadeIn 0.6s ease-in-out;
  }
  
  .slide-up {
    animation: slideUp 0.8s ease-out;
  }
  
  .zoom-in {
    animation: zoomIn 0.5s ease-out;
  }
  
  /* 导航栏 */
  .navbar-scrolled {
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .navbar-hidden {
    transform: translateY(-100%);
    opacity: 0;
  }
  
  .nav-link {
    @apply relative text-gray-600 hover:text-brand-main transition-all duration-300;
  }
  
  .nav-link.active {
    @apply text-brand-main font-semibold;
  }
  
  .nav-link.active::before {
    content: '';
    @apply absolute bottom-0 left-1/2 w-1 h-1 bg-brand-main rounded-full transform -translate-x-1/2;
  }
  
  /* 移动端菜单动画 */
  .mobile-menu-enter {
    @apply transform -translate-y-full opacity-0;
  }
  
  .mobile-menu-enter-active {
    @apply transform translate-y-0 opacity-100 transition-all duration-500;
  }
  
  .mobile-menu-exit {
    @apply transform translate-y-0 opacity-100;
  }
  
  .mobile-menu-exit-active {
    @apply transform -translate-y-full opacity-0 transition-all duration-500;
  }
  
  /* 核心功能展示区样式 */
  .feature-tab {
    @apply transition-all duration-300 cursor-pointer;
  }
  
  .feature-tab.active {
    @apply border-brand-main text-brand-main shadow-lg;
  }
  
  .feature-panel {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  
  .feature-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }
  
  /* 功能展示动画 */
  .feature-panel .animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  
  .feature-panel .animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* 延迟动画 */
  .animate-on-scroll[data-delay="100"] {
    transition-delay: 0.1s;
  }
  
  .animate-on-scroll[data-delay="200"] {
    transition-delay: 0.2s;
  }
  
  .animate-on-scroll[data-delay="300"] {
    transition-delay: 0.3s;
  }
  
  .animate-on-scroll[data-delay="400"] {
    transition-delay: 0.4s;
  }
  
  /* 功能卡片样式 */
  .feature-card {
    @apply transition-all duration-300 transform hover:-translate-y-2 hover:shadow-xl;
  }
  
  .feature-card:hover {
    @apply shadow-2xl;
  }
  
  /* 标签样式 */
  .feature-tag {
    @apply absolute -top-4 -right-4 px-4 py-2 rounded-full text-sm font-semibold shadow-lg text-white;
  }
  
  /* 响应式调整 */
  @media (max-width: 768px) {
    .feature-panel {
      @apply px-4;
    }
    
    .feature-tab {
      @apply px-4 py-2 text-sm;
    }
    
    .feature-tag {
      @apply -top-3 -right-3 px-3 py-1 text-xs;
    }
  }
  
  /* 核心功能展示区样式 */
  .feature-tab {
    @apply transition-all duration-300 cursor-pointer;
  }
  
  .feature-tab.active {
    @apply border-brand-main text-brand-main shadow-lg;
  }
  
  .feature-panel {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  
  .feature-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }
  
  /* 功能展示动画 */
  .feature-panel .animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  
  .feature-panel .animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* 延迟动画 */
  .animate-on-scroll[data-delay="100"] {
    transition-delay: 0.1s;
  }
  
  .animate-on-scroll[data-delay="200"] {
    transition-delay: 0.2s;
  }
  
  .animate-on-scroll[data-delay="300"] {
    transition-delay: 0.3s;
  }
  
  .animate-on-scroll[data-delay="400"] {
    transition-delay: 0.4s;
  }
  
  /* 功能卡片样式 */
  .feature-card {
    @apply transition-all duration-300 transform hover:-translate-y-2 hover:shadow-xl;
  }
  
  .feature-card:hover {
    @apply shadow-2xl;
  }
  
  /* 标签样式 */
  .feature-tag {
    @apply absolute -top-4 -right-4 px-4 py-2 rounded-full text-sm font-semibold shadow-lg text-white;
  }
  
  /* 响应式调整 */
  @media (max-width: 768px) {
    .feature-panel {
      @apply px-4;
    }
    
    .feature-tab {
      @apply px-4 py-2 text-sm;
    }
    
    .feature-tag {
      @apply -top-3 -right-3 px-3 py-1 text-xs;
    }
  }
  
  /* 卡片组件 */
  .card {
    @apply bg-white rounded-xl shadow-md hover:shadow-lg transition-all duration-300;
  }
  
  .card-lg {
    @apply card p-8;
  }
  
  .card-md {
    @apply card p-6;
  }
  
  .card-sm {
    @apply card p-4;
  }
  
  /* 按钮组件 */
  .btn-primary {
    @apply bg-brand-main text-white px-6 py-3 rounded-lg font-semibold hover:bg-brand-dark transition-all duration-200 inline-flex items-center justify-center;
  }
  
  .btn-secondary {
    @apply border border-brand-main text-brand-main px-6 py-3 rounded-lg font-semibold hover:bg-green-50 transition-all duration-200 inline-flex items-center justify-center;
  }
  
  .btn-outline {
    @apply border border-gray-300 text-gray-700 px-6 py-3 rounded-lg font-semibold hover:bg-gray-50 transition-all duration-200 inline-flex items-center justify-center;
  }
  
  /* 页面布局 */
  .page-section {
    @apply py-16;
  }
  
  .page-header {
    @apply text-center mb-12;
  }
  
  .page-title {
    @apply text-4xl md:text-5xl font-bold text-gray-900 mb-4;
  }
  
  .page-subtitle {
    @apply text-xl text-gray-600 max-w-3xl mx-auto;
  }
  
  /* 表单组件 */
  .form-group {
    @apply mb-6;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
  }
  
  .form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-main focus:border-transparent transition-all duration-200;
  }
  
  /* 响应式网格 */
  .grid-responsive {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
  }
  
  /* 图标样式 */
  .icon-lg {
    @apply text-4xl;
  }
  
  .icon-md {
    @apply text-2xl;
  }
  
  .icon-sm {
    @apply text-lg;
  }
}

@layer utilities {
  /* 动画关键帧 */
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes slideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes zoomIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
  }
  
  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
  }
  
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
  
  .animation-delay-1000 {
    animation-delay: 1s;
  }
  
  .animation-delay-2000 {
    animation-delay: 2s;
  }
  
  .animation-delay-4000 {
    animation-delay: 4s;
  }
  
  /* 颜色工具类 */
  .bg-brand-primary {
    background-color: var(--brand-primary);
  }
  
  .bg-brand-main {
    background-color: var(--brand-main);
  }
  
  .bg-brand-dark {
    background-color: var(--brand-dark);
  }
  
  .text-brand-primary {
    color: var(--brand-primary);
  }
  
  .text-brand-main {
    color: var(--brand-main);
  }
  
  .text-brand-dark {
    color: var(--brand-dark);
  }
  
  .bg-light {
    background-color: var(--bg-light);
  }
  
  .gradient-brand {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-main) 50%, var(--brand-dark) 100%);
  }
  
  .gradient-brand-light {
    background: linear-gradient(135deg, rgba(56, 205, 127, 0.1) 0%, rgba(7, 193, 96, 0.1) 100%);
  }
  
  /* 响应式工具 */
  .mobile-only {
    @apply md:hidden;
  }
  
  .desktop-only {
    @apply hidden md:block;
  }
  
  /* 滚动条样式 */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f7fafc;
  }
  
  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
  }
  
  .scrollbar-thin::-webkit-scrollbar-track {
    background: #f7fafc;
  }
  
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
  }
}