/**
 * 公共营养师考务中心 - 样式文件
 * Copyright (c) 2024-2025 公共营养师考务中心
 * 版权所有，未经授权禁止复制或使用
 * Website: https://jkgls.arkvip.cn
 */

/* 基础样式和变量 */
:root {
  --primary: #1e3a8a;
  --primary-light: #3b82f6;
  --secondary: #c2410c;
  --secondary-light: #f97316;
  --success: #047857;
  --success-light: #10b981;
  --warning: #b45309;
  --warning-light: #f59e0b;
  --info: #0c4a6e;
  --info-light: #0ea5e9;
  --danger: #ef4444;
  --dark: #374151;
  --gray-medium: #6b7280;
  --gray-light: #f3f4f6;
  --card-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.15), 0 4px 8px -2px rgba(0, 0, 0, 0.08);
  --card-hover-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
  --glow-shadow: 0 0 20px rgba(26, 86, 219, 0.6);
}

/* Tailwind Utilities Layer */
@layer utilities {
  .text-shadow { 
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
  }
  
  .transition-all-300 { 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
  }
  
  /* 渐变背景类 */
  .bg-gradient-primary { 
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%) !important; 
  }
  
  .bg-gradient-secondary { 
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-light) 100%); 
  }
  
  .bg-gradient-success { 
    background: linear-gradient(135deg, var(--success) 0%, var(--success-light) 100%); 
  }
  
  .bg-gradient-warning { 
    background: linear-gradient(135deg, var(--warning) 0%, var(--warning-light) 100%); 
  }
  
  .bg-gradient-info { 
    background: linear-gradient(135deg, var(--info) 0%, var(--info-light) 100%); 
  }
  
  .bg-gradient-purple { 
    background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%); 
  }
  
  .bg-gradient-pink { 
    background: linear-gradient(135deg, #be123c 0%, #ec4899 100%); 
  }

  /* 导航链接样式 */
  .nav-link-active { 
    position: relative; 
  }
  
  .nav-link-active::after { 
    content: ''; 
    position: absolute; 
    bottom: -2px; 
    left: 0; 
    width: 100%; 
    height: 2px; 
    background-color: var(--secondary-light); 
  }
  
  /* 3D按钮效果 */
  .btn-3d { 
    transform: translateZ(0); 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); 
  }
  
  .btn-3d:hover { 
    transform: translateY(-4px) translateZ(10px); 
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.25); 
  }
  
  .btn-3d:active { 
    transform: translateY(2px) translateZ(4px); 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); 
  }
  
  /* 微交互动画 */
  .micro-interaction { 
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); 
  }
  
  .micro-interaction:hover { 
    transform: scale(1.03); 
  }
  
  /* FAQ 动画效果 */
  .faq-question { 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    cursor: pointer; 
  }
  
  .faq-question:hover { 
    transform: translateX(4px); 
  }
  
  .faq-question:active { 
    transform: translateX(2px); 
  }
  
  .faq-question:focus { 
    outline: none; 
  }
  
  #rules .faq-question:focus-visible { 
    outline: none; 
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2); 
  }
  
  #faq .faq-question:focus-visible { 
    outline: none; 
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2); 
  }
  
  .faq-answer { 
    max-height: 0; 
    opacity: 0; 
    overflow: hidden; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
  }
  
  .faq-answer:not(.hidden) { 
    max-height: 300px; 
    opacity: 1; 
    transform: translateY(0); 
  }
  
  .faq-question i { 
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
  }
  
  .faq-answer:not(.hidden) ~ .faq-question i, 
  .faq-answer:not(.hidden) + .faq-question i { 
    transform: rotate(180deg); 
  }
  
  /* 丝滑滚动效果 */
  html { 
    scroll-behavior: smooth; 
  }
  
  /* 优化滚动条样式 */
  ::-webkit-scrollbar { 
    width: 8px; 
    height: 8px; 
  }
  
  ::-webkit-scrollbar-track { 
    background: #f1f1f1; 
    border-radius: 4px; 
  }
  
  ::-webkit-scrollbar-thumb { 
    background: #c1c1c1; 
    border-radius: 4px; 
    transition: background 0.3s ease; 
  }
  
  ::-webkit-scrollbar-thumb:hover { 
    background: #a1a1a1; 
  }
  
  /* 轮播图3D效果 */
  .carousel-3d { 
    transform-style: preserve-3d; 
    perspective: 1500px; 
  }
  
  /* 卡片悬浮3D效果 */
  .card-3d { 
    transform-style: preserve-3d; 
    perspective: 1000px; 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
    transform: translateZ(0); 
  }
  
  .card-3d:hover { 
    transform: translateY(-12px) translateZ(25px) rotateX(8deg); 
    box-shadow: var(--card-hover-shadow); 
  }
  
  /* 加载动画 */
  @keyframes fadeInUp { 
    from { 
      opacity: 0; 
      transform: translateY(20px); 
    } 
    to { 
      opacity: 1; 
      transform: translateY(0); 
    } 
  }
  
  @keyframes pulseGlow { 
    0% { 
      box-shadow: 0 0 0 0 rgba(26, 86, 219, 0.4); 
    } 
    70% { 
      box-shadow: 0 0 0 10px rgba(26, 86, 219, 0); 
    } 
    100% { 
      box-shadow: 0 0 0 0 rgba(26, 86, 219, 0); 
    } 
  }
  
  /* 跑马灯动画 */
  @keyframes marquee { 
    0% { 
      transform: translateX(0); 
    } 
    100% { 
      transform: translateX(-50%); 
    } 
  }
  
  .animate-marquee { 
    animation: marquee 30s linear infinite; 
  }
  
  /* 导航栏滚动缩小效果 */
  .header-scrolled { 
    padding-top: 0.5rem !important; 
    padding-bottom: 0.5rem !important; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); 
  }
  
  .header-scrolled .nav-logo { 
    transform: scale(0.9); 
  }
  
  /* 返回顶部按钮 */
  .back-to-top { 
    opacity: 0; 
    visibility: hidden; 
    transition: all 0.3s ease; 
  }
  
  .back-to-top.show { 
    opacity: 1; 
    visibility: visible; 
  }
  
  /* 浮动按钮动画 */
  @keyframes floatBounce { 
    0%, 100% { 
      transform: translateY(0); 
    } 
    50% { 
      transform: translateY(-5px); 
    } 
  }
  
  .float-bounce { 
    animation: floatBounce 2s ease-in-out infinite; 
  }
  
  /* 倒计时数字动画 */
  @keyframes countPulse { 
    0%, 100% { 
      transform: scale(1); 
    } 
    50% { 
      transform: scale(1.05); 
    } 
  }
  
  .countdown-number { 
    animation: countPulse 1s ease-in-out infinite; 
  }
  
  /* 数字滚动效果 */
  .number-roll { 
    display: inline-block; 
    animation: numberRoll 2s ease-out forwards; 
  }
  
  @keyframes numberRoll { 
    from { 
      opacity: 0; 
      transform: translateY(20px); 
    } 
    to { 
      opacity: 1; 
      transform: translateY(0); 
    } 
  }
}

/* 响应式设计优化 */
@media (max-width: 768px) {
  .mobile-container {
    padding: 0 1rem;
  }
  
  .mobile-section {
    padding: 1rem;
  }
  
  .mobile-card {
    margin: 0.5rem;
    padding: 1rem;
  }
}

/* 额外的可访问性增强 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .no-reduced-motion {
    animation-duration: inherit !important;
    transition-duration: inherit !important;
  }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  :root {
    --card-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.3), 0 4px 8px -2px rgba(0, 0, 0, 0.2);
    --card-hover-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  :root {
    --dark: #d1d5db;
    --gray-medium: #9ca3af;
    --gray-light: #1f2937;
  }
  
  body {
    background-color: #111827;
    color: #f9fafb;
  }
}