/* 导航页面样式 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 基础样式 */
@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply text-gray-700 dark:text-gray-200 transition-colors duration-300;
  }
  
  body.dark {
    @apply bg-gray-900 text-gray-200;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-bold text-gray-800 dark:text-gray-100 transition-colors duration-300;
  }
  
  a {
    @apply transition-colors duration-200;
  }
  
  /* 自定义滚动条 */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background-color: rgba(243, 244, 246, 0.8);
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: rgba(209, 213, 219, 0.8);
    border-radius: 9999px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.8);
  }
  
  .dark ::-webkit-scrollbar-track {
    background-color: rgba(31, 41, 55, 0.8);
  }
  
  .dark ::-webkit-scrollbar-thumb {
    background-color: rgba(75, 85, 99, 0.8);
  }
  
  .dark ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(107, 114, 128, 0.8);
  }
}

/* 自定义组件样式 */
@layer components {
  /* 背景和基础样式 */
  .bg-gradient-custom {
    @apply bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800;
  }
  
  /* 顶部导航栏 */
  .nav-header {
    @apply fixed top-0 left-0 right-0 z-50 backdrop-blur-lg bg-white/80 dark:bg-gray-900/80 
           border-b border-gray-200/50 dark:border-gray-700/50 shadow-sm transition-all duration-300;
  }
  
  /* 导航Logo */
  .nav-logo {
    @apply flex items-center gap-2 group text-xl font-bold text-primary-600 dark:text-primary-400 
           hover:text-primary-700 dark:hover:text-primary-300 transition-colors;
  }
  
  /* Logo图标容器 */
  .logo-icon-container {
    @apply flex items-center justify-center w-9 h-9 rounded-full bg-primary-50 dark:bg-primary-900/30 
           text-primary-500 dark:text-primary-400 transition-all duration-300 
           group-hover:bg-primary-100 dark:group-hover:bg-primary-800/40 overflow-hidden;
  }
  
  /* Logo图片样式 */
  .logo-icon-container img {
    @apply max-w-full max-h-full object-contain;
  }
  
  /* 站点名称 */
  .site-name {
    @apply transition-all duration-300;
  }
  
  /* 导航菜单 */
  .nav-menu {
    @apply hidden md:flex items-center space-x-6;
  }
  
  .nav-menu-item {
    @apply px-2 py-1.5 text-sm text-gray-600 dark:text-gray-300 
           hover:text-primary-600 dark:hover:text-primary-400
           transition-colors duration-200;
  }
  
  .nav-menu-item.active {
    @apply text-primary-600 dark:text-primary-400 font-normal;
  }
  
  /* 移动端菜单按钮 */
  .mobile-menu-button {
    @apply md:hidden p-2 rounded-lg text-gray-700 dark:text-gray-200 
           hover:bg-gray-100/70 dark:hover:bg-gray-800/70 transition-all duration-200;
  }
  
  /* 移动端菜单 */
  #mobile-menu {
    @apply md:hidden overflow-hidden opacity-0 max-h-0;
    transition: opacity 0.3s ease, max-height 0.3s ease;
  }
  
  #mobile-menu.open {
    @apply opacity-100;
    max-height: calc(100vh - 4rem);
  }
  
  /* 移动端菜单项 */
  .mobile-menu-item {
    @apply flex items-center px-4 py-3 rounded-lg text-gray-700 dark:text-gray-200 
           hover:bg-gray-100/70 dark:hover:bg-gray-800/70 
           hover:text-primary-600 dark:hover:text-primary-400
           transition-all duration-200;
  }
  
  .mobile-menu-item.active {
    @apply bg-primary-50 dark:bg-primary-900/30 
           text-primary-600 dark:text-primary-400;
  }
  
  .mobile-menu-item i {
    @apply text-lg text-gray-500 dark:text-gray-400;
  }

  /* 分类 */
  .category {
    @apply bg-white/80 dark:bg-gray-800/60 backdrop-blur-sm rounded-xl p-6 shadow-sm 
           border border-gray-100/50 dark:border-gray-700/50 transition-all duration-300 
           hover:shadow-md hover:border-primary-200/50 dark:hover:border-primary-700/30;
  }
  
  /* 分类头部 */
  .category-header {
    @apply flex items-center gap-3 mb-5 pb-2 border-b border-gray-100 dark:border-gray-800;
  }
  
  /* 子分类容器 */
  .category-container {
    @apply mt-6 mb-8 last:mb-0;
  }
  
  /* 子分类头部 */
  .subcategory-header {
    @apply flex items-center gap-3 mb-4 pb-2 border-b border-gray-100/50 dark:border-gray-700/50;
  }
  
  /* 站点网格 */
  .sites-grid {
    @apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 md:gap-5;
  }
  
  /* 站点卡片 */
  .site-card {
    @apply flex flex-col items-center p-4 rounded-lg bg-white/90 dark:bg-gray-800/90 
           border border-gray-100 dark:border-gray-700 hover:border-primary-300 
           dark:hover:border-primary-600 hover:shadow-md transition-all duration-200 
           hover:-translate-y-1 hover:bg-white dark:hover:bg-gray-800 cursor-pointer group;
  }
  
  /* 站点图标容器 */
  .site-icon-container {
    @apply mb-3 rounded-lg overflow-hidden shadow-sm transition-all duration-300 
           group-hover:shadow-md w-12 h-12 flex items-center justify-center bg-gray-100 dark:bg-gray-700;
  }
  
  /* 站点图标 */
  .site-icon {
    @apply w-12 h-12 object-cover transition-transform duration-300 group-hover:scale-110;
  }
  
  /* 站点信息 */
  .site-info {
    @apply text-center w-full;
  }
  
  /* 站点名称 */
  .site-name {
    @apply font-medium text-gray-800 dark:text-gray-200 transition-colors duration-200 
           group-hover:text-primary-600 dark:group-hover:text-primary-400 text-sm md:text-base;
  }
  
  /* 站点描述 */
  .site-description {
    @apply text-xs text-gray-500 dark:text-gray-400 mt-1 line-clamp-2 transition-colors duration-200;
  }
  
  /* 悬浮按钮组 */
  .float-buttons {
    @apply fixed right-4 md:right-8 bottom-4 md:bottom-8 flex flex-col gap-4 z-50;
  }
  
  /* 悬浮按钮 */
  .float-button {
    @apply w-10 h-10 md:w-12 md:h-12 rounded-full bg-white/90 dark:bg-gray-800/90 
           shadow-md flex items-center justify-center text-gray-700 dark:text-gray-200 
           hover:bg-primary-50 dark:hover:bg-primary-900/30 hover:text-primary-600 
           dark:hover:text-primary-400 transition-all duration-300 backdrop-blur-sm 
           border border-gray-100/50 dark:border-gray-700/50 group;
  }
  
  /* 主题切换按钮 */
  .theme-toggle-button {
    @apply w-9 h-9 rounded-full bg-gray-100/70 dark:bg-gray-800/70 flex items-center 
           justify-center text-gray-700 dark:text-gray-200 hover:bg-primary-50 
           dark:hover:bg-primary-900/30 hover:text-primary-600 dark:hover:text-primary-400 
           transition-all duration-300 border border-gray-200/50 dark:border-gray-700/50 group;
  }
  
  /* 页脚 */
  .page-footer {
    @apply py-6 mt-8 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border-t 
           border-gray-200/30 dark:border-gray-700/30 text-gray-600 dark:text-gray-400;
  }
  
  /* 页脚内容 */
  .footer-content {
    @apply flex items-center justify-center gap-2 text-sm;
  }
  
  /* 页脚链接 */
  .footer-link {
    @apply text-primary-500 hover:text-primary-600 dark:text-primary-400 
           dark:hover:text-primary-300 transition-colors;
  }
  
  /* 背景容器 */
  .bg-container {
    @apply fixed inset-0 -z-10 overflow-hidden;
  }
  
  /* 背景图片 */
  .bg-image {
    @apply absolute inset-0 bg-cover bg-center transition-opacity duration-1000;
  }
  
  /* 背景视频 */
  video.bg-video {
    @apply absolute inset-0 w-full h-full object-cover transition-opacity duration-1000;
  }
  
  /* 背景图片透明度类 */
  .opacity-5 {
    opacity: 0.05 !important;
  }
  
  .opacity-10 {
    opacity: 0.1 !important;
  }
  
  .opacity-20 {
    opacity: 0.2 !important;
  }
  
  /* 加载动画 */
  .page-loader {
    @apply fixed inset-0 z-[100] flex items-center justify-center bg-white dark:bg-gray-900 
           transition-opacity duration-500;
  }
  
  /* 文本截断 */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* 暗色模式强制样式 */
.dark {
  color-scheme: dark;
}

.dark body {
  @apply bg-gray-900 text-gray-200;
}

.dark .bg-white {
  @apply bg-gray-800;
}

.dark .text-gray-800 {
  @apply text-gray-200;
}

.dark .border-gray-200 {
  @apply border-gray-700;
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes bgFadeIn {
  from { opacity: 0; }
  to { opacity: 0.1; }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

.animate-slide-up {
  animation: slideUp 0.3s ease-out forwards;
}

.animate-scale-in {
  animation: scaleIn 0.3s ease-out forwards;
}

.animate-pulse-slow {
  animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.bg-fade-in {
  animation: bgFadeIn 1s ease-out forwards;
}

.dark .bg-fade-in {
  animation: bgFadeIn 1s ease-out forwards;
  opacity: 0.05 !important;
}