/* ============================================================
   theme-enhance.css —— 全站主题增强层（2026-09-06）
   职责：统一过渡动画 · 深浅主题背景纹理 · 布局规范 · 粒子层
   约束：不修改业务逻辑，只改视觉层；深浅双主题自动适配
   加载顺序：在 responsive.css 之前引入
   ============================================================ */

/* ---------- 1. 全站统一颜色过渡（禁止闪白的核心） ----------
   在根元素 html 上设置过渡，确保背景/文字/边框/阴影全部平滑渐变
   时长 0.4s，缓动 ease，既不拖沓也不突兀 */
html {
  transition: background-color 0.4s ease-out, color 0.4s ease-out;
}

/* 所有使用 CSS 变量的颜色属性统一过渡 */
body,
.card,
.module-card,
.entry-card,
.wiki-card,
.pick-card,
.latest-card,
.quick-card,
.tool-card,
.model-card,
.glossary-card,
.case-card,
.prompt-card,
.tip-card,
.stat-card,
.feature-card,
.path-card,
.level-card,
.rail-block,
.sidebar,
.modal,
.dropdown,
.search-results,
.search-history-dropdown,
.tooltip,
.popover,
.tag,
.badge,
.chip,
.button,
.btn,
input,
textarea,
select,
.navbar,
.footer,
.header,
.section,
.hero,
.roam-box,
.hero-search,
.hero-search-helper,
.hot-search,
.hero-stats,
.hero-stat,
.sk-row,
.sk-main,
.sk-side,
.facet,
.desk-header,
.lq-canvas,
.gg-stage,
.gg-rail,
.ai-graph-canvas,
.graph-panel,
.graph-legend,
.practice-content,
.learning-quiz,
.quiz-option,
.progress-bar,
.progress-fill {
  transition: background-color 0.4s ease-out,
              color 0.4s ease-out,
              border-color 0.4s ease-out,
              box-shadow 0.4s ease-out,
              fill 0.4s ease-out,
              stroke 0.4s ease-out;
}

/* 文字颜色单独过渡，确保字体颜色平滑渐变不跳变 */
h1, h2, h3, h4, h5, h6,
p, span, a, li, label,
.hero-title, .hero-subtitle, .hero-lead,
.hero-stat-num, .hero-stat-label,
.section-title, .section-subtitle,
.block-sub-title, .page-main-title,
.page-header-title, .page-header-desc,
.en-apple-text, .en-text, .pair-en,
.t-hero, .t-h1, .t-h2, .t-h3, .t-body, .t-small,
.sk-title, .sk-sum, .sk-badge,
.pick-card-title, .pick-card-desc,
.latest-row-title, .latest-row-desc,
.wiki-card-title, .wiki-card-desc,
.model-name, .model-desc,
.tool-name, .tool-desc,
.glossary-term, .glossary-desc,
.case-title, .case-desc,
.prompt-title, .prompt-desc,
.tip-content, .tip-tag,
.navbar a, .navbar span,
.footer a, .footer p,
.brand-strip,
.helper-hint, .hot-tag,
.roam-title, .roam-card-text, .roam-card-tag,
.roam-refresh-btn,
.theme-toggle,
.nav-toggle {
  transition: color 0.4s ease-out, fill 0.4s ease-out, stroke 0.4s ease-out;
}

/* 链接 hover 颜色也过渡 */
a {
  transition: color 0.24s ease-out, opacity 0.24s ease-out;
}

/* ---------- 2. 深浅主题背景纹理（低饱和度科技感） ----------
   用多层 radial-gradient + linear-gradient 模拟科技感纹理
   透明度压到 0.03-0.06，绝不抢文字视线
   深色：深蓝紫微光粒子感；浅色：浅灰蓝淡网格感 */

/* 浅色主题背景纹理 */
[data-theme="light"] body {
  background-color: var(--color-bg);
  background-image:
    /* 微光粒子点 */
    radial-gradient(circle at 15% 20%, rgba(176, 42, 53, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(16, 185, 129, 0.04) 0%, transparent 35%),
    radial-gradient(circle at 50% 80%, rgba(124, 58, 237, 0.04) 0%, transparent 45%),
    radial-gradient(circle at 90% 70%, rgba(14, 165, 233, 0.04) 0%, transparent 35%),
    /* 淡网格线 */
    linear-gradient(rgba(176, 42, 53, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176, 42, 53, 0.025) 1px, transparent 1px);
  background-size:
    100% 100%, 100% 100%, 100% 100%, 100% 100%,
    48px 48px, 48px 48px;
  background-attachment: fixed;
}

/* 深色主题背景纹理 */
[data-theme="dark"] body {
  background-color: var(--color-bg);
  background-image:
    /* 微光粒子点（更明显但仍低调） */
    radial-gradient(circle at 12% 18%, rgba(129, 140, 248, 0.08) 0%, transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(52, 211, 153, 0.06) 0%, transparent 38%),
    radial-gradient(circle at 45% 85%, rgba(167, 139, 250, 0.07) 0%, transparent 48%),
    radial-gradient(circle at 92% 68%, rgba(56, 189, 248, 0.06) 0%, transparent 36%),
    radial-gradient(circle at 8% 75%, rgba(244, 114, 182, 0.04) 0%, transparent 30%),
    /* 淡网格线 */
    linear-gradient(rgba(129, 140, 248, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(129, 140, 248, 0.035) 1px, transparent 1px);
  background-size:
    100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
    56px 56px, 56px 56px;
  background-attachment: fixed;
}

/* 背景纹理过渡（确保切换时平滑） */
body {
  transition: background-color 0.4s ease-out,
              background-image 0.4s ease-out,
              color 0.4s ease-out;
}

/* ---------- 3. 统一布局规范 ---------- */

/* 统一容器最大宽度和内边距 */
.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
  box-sizing: border-box;
}

/* 统一 section 上下间距 */
.section {
  padding-top: 56px;
  padding-bottom: 56px;
}

/* 统一卡片圆角和间距 */
.card,
.module-card,
.entry-card,
.wiki-card,
.pick-card,
.latest-card,
.quick-card,
.tool-card,
.model-card,
.glossary-card,
.case-card,
.prompt-card,
.tip-card,
.stat-card,
.feature-card,
.path-card,
.level-card {
  border-radius: var(--radius-lg);
  box-sizing: border-box;
}

/* 统一网格间距 */
[class*="-grid"]:not([class*="head-grid"]):not([class*="stat-grid"]) {
  gap: 20px;
}

/* ---------- 4. 量子粒子特效层 ---------- */

/* 粒子 canvas：固定定位，铺满全屏，不拦截交互 */
#quantum-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

/* 粒子层激活时显示 */
#quantum-particles.active {
  opacity: 1;
}

/* 确保页面内容在粒子层之上——只抬常规流的页面骨架。
   ⚠ 别再写成 body > * 一刀切：它会把带 position:fixed 的浮层全打回 relative。
   已踩过的坑（上一版就是这样）：知识点弹窗 #kModal、
   glossary/tools/cases/advanced 的 Ctrl+K 面板 #pal、各页的 .xx-canvas 点阵纹理层，
   以及成就模块的弹窗 / 解锁提示 / 彩带——它们都是 body 直接子元素，
   被打回文档流后要么掉到页脚下面（看起来像“点选项就跳到页尾”），要么整层失效。
   新增 body 级浮层时：自己写好 position + z-index（参照 .gg-modal 的 2000），不用登记到这里。 */
body > header,
body > main,
body > section,
body > footer,
body > div.container,
body > nav.navbar {
  position: relative;
  z-index: 1;
}

/* ---------- 5. 页面切换渐入动画 ---------- */

/* 页面内容渐入（导航切换时触发） */
.page-fade-in {
  animation: pageFadeIn 0.5s ease forwards;
}

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

/* 主题切换时的全屏柔和过渡层（防止闪白） */
.theme-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.24s ease-out;
}

.theme-transition-overlay.flash {
  opacity: 0.15;
}

/* ---------- 6. 导航栏和页脚背景过渡增强 ---------- */

.navbar {
  transition: background-color 0.4s ease-out,
              backdrop-filter 0.4s ease-out,
              border-color 0.4s ease-out,
              box-shadow 0.4s ease-out;
}

.footer {
  transition: background-color 0.4s ease-out,
              border-color 0.4s ease-out,
              color 0.4s ease-out;
}

/* ---------- 7. 输入框和按钮对比度保障 ---------- */

input, textarea, select {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

input::placeholder, textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1; /* 禁止浏览器默认降低 placeholder 透明度 */
}

/* 按钮文字对比度 */
.hero-search-btn,
.btn,
.button,
.roam-refresh-btn,
.theme-toggle,
.pick-card,
.latest-card,
.wiki-card {
  color: var(--color-on-primary);
}

/* 浅色模式下确保卡片文字不是白色 */
[data-theme="light"] .card,
[data-theme="light"] .module-card,
[data-theme="light"] .entry-card,
[data-theme="light"] .wiki-card,
[data-theme="light"] .pick-card,
[data-theme="light"] .latest-card,
[data-theme="light"] .quick-card,
[data-theme="light"] .tool-card,
[data-theme="light"] .model-card,
[data-theme="light"] .glossary-card,
[data-theme="light"] .case-card,
[data-theme="light"] .prompt-card,
[data-theme="light"] .tip-card {
  color: var(--color-text);
}

/* 深色模式下确保卡片文字不是黑色 */
[data-theme="dark"] .card,
[data-theme="dark"] .module-card,
[data-theme="dark"] .entry-card,
[data-theme="dark"] .wiki-card,
[data-theme="dark"] .pick-card,
[data-theme="dark"] .latest-card,
[data-theme="dark"] .quick-card,
[data-theme="dark"] .tool-card,
[data-theme="dark"] .model-card,
[data-theme="dark"] .glossary-card,
[data-theme="dark"] .case-card,
[data-theme="dark"] .prompt-card,
[data-theme="dark"] .tip-card {
  color: var(--color-text);
}

/* ---------- 8. 减少动画偏好（无障碍） ---------- */

@media (prefers-reduced-motion: reduce) {
  html, body, *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  #quantum-particles {
    display: none !important;
  }
}

/* ---------- 9. 移动端性能优化 ---------- */

@media (max-width: 768px) {
  /* 移动端降低背景纹理复杂度，提升渲染性能 */
  [data-theme="light"] body {
    background-image:
      radial-gradient(circle at 15% 20%, rgba(176, 42, 53, 0.04) 0%, transparent 40%),
      radial-gradient(circle at 85% 70%, rgba(16, 185, 129, 0.03) 0%, transparent 35%);
    background-size: 100% 100%, 100% 100%;
  }
  [data-theme="dark"] body {
    background-image:
      radial-gradient(circle at 12% 18%, rgba(129, 140, 248, 0.06) 0%, transparent 42%),
      radial-gradient(circle at 88% 75%, rgba(52, 211, 153, 0.04) 0%, transparent 38%);
    background-size: 100% 100%, 100% 100%;
  }

  /* 移动端容器内边距收紧 */
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 移动端 section 间距收紧 */
  .section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* 极低性能设备：关闭粒子和背景纹理 */
@media (max-width: 480px) {
  #quantum-particles {
    display: none;
  }
}