/* ==========================================================================
   玥耀 FPGA — 主题层（动态背景 / 白黑切换 / 全站浅色适配）
   --------------------------------------------------------------------------
   全站前台页面启用，由 tools/theme-site.py 注入：
   theme.css + 防闪烁引导脚本 + 动态背景层 + 导航与抽屉的切换控件 + theme.js。
   主题记忆存在 localStorage 的 `yueyao:theme`，同源共享 —— 用户切换一次，
   跳转到任意页面都生效。后台（admin/）是独立的一套样式，不受本文件影响。

   文件结构：
   1. 动态背景层（.bg）—— 蓝图网格 + 冷色光晕 + 数据走线，全部纯 CSS 动画
   2. 主题切换控件（.theme-toggle）
   3. 浅色主题下的表面适配（深色玻璃 → 白色玻璃等）
   4. 主题切换时的过渡与 prefers-reduced-motion 降级
   ========================================================================== */

/* ==========================================================================
   1. 动态背景层
   ========================================================================== */

.bg {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);          /* -1：位于画布之上、所有内容之下 */
  overflow: hidden;
  pointer-events: none;
  background: var(--bg-canvas);
  contain: paint;
  transition: background-color var(--t-slow);
}

/* 1.1 蓝图网格：平移恰好一个格子，无缝循环 */
.bg__grid {
  position: absolute;
  inset: -96px;                  /* 外扩一格以上，位移时边缘不露空 */
  background-image:
    linear-gradient(to right, var(--bg-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bg-grid) 1px, transparent 1px);
  background-size: 96px 96px;
  will-change: transform;
  animation: bg-grid-drift 64s linear infinite;
}
@keyframes bg-grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(96px, 96px, 0); }
}

/* 1.2 冷色光晕：三团缓慢漂移的径向渐变（不使 filter:blur，避免逐帧重绘） */
.bg__aurora {
  position: absolute;
  inset: 0;
}
.bg__aurora i {
  position: absolute;
  display: block;
  width: 64vmax;
  height: 64vmax;
  border-radius: 50%;
  will-change: transform;
}
.bg__aurora i:nth-child(1) {
  top: -26vmax; left: -14vmax;
  background: radial-gradient(circle at 50% 50%, var(--bg-aurora-1) 0%, transparent 62%);
  animation: bg-drift-a 52s ease-in-out infinite;
}
.bg__aurora i:nth-child(2) {
  top: 6vmax; right: -20vmax;
  background: radial-gradient(circle at 50% 50%, var(--bg-aurora-2) 0%, transparent 60%);
  animation: bg-drift-b 68s ease-in-out infinite;
}
.bg__aurora i:nth-child(3) {
  bottom: -30vmax; left: 14vmax;
  background: radial-gradient(circle at 50% 50%, var(--bg-aurora-3) 0%, transparent 64%);
  animation: bg-drift-c 84s ease-in-out infinite;
}
@keyframes bg-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(7vmax, 5vmax, 0) scale(1.14); }
}
@keyframes bg-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); }
  50%      { transform: translate3d(-6vmax, 7vmax, 0) scale(1); }
}
@keyframes bg-drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(5vmax, -6vmax, 0) scale(1.1); }
}

/* 1.3 数据走线：工程电路感，脉冲沿路径流动 */
.bg__trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--bg-trace);
}
.bg__trace .base { opacity: 0.42; }
.bg__trace .pulse {
  stroke-dasharray: 90 2600;
  animation: bg-pulse 11s linear infinite;
}
.bg__trace .pulse--2 { animation-duration: 17s; animation-delay: -6s; }
@keyframes bg-pulse {
  from { stroke-dashoffset: 2690; }
  to   { stroke-dashoffset: 0; }
}

/* 1.4 上下渐隐：让悬浮导航与页脚区域更安静 */
.bg__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    var(--bg-veil) 0%,
    transparent 16%,
    transparent 80%,
    var(--bg-veil) 100%);
}

/* 已启用主题的页面：取消 body 上的静态装饰渐变，交由 .bg 承担
   （否则灰色径向渐变会在浅色主题下与背景层叠成脏灰） */
[data-page] body { background-image: none; }

/* ==========================================================================
   2. 主题切换控件
   ========================================================================== */

.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  width: 68px;
  height: 40px;
  padding: 4px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-bg-500);
  color: var(--c-text-400);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.theme-toggle:hover { border-color: var(--c-border-strong); }

/* 滑块：深色主题停在「月」，浅色主题滑到「日」 */
.theme-toggle__thumb {
  position: absolute;
  top: 4px; left: 4px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c-bg-600);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base), background var(--t-base);
}
.theme-toggle[aria-pressed="false"] .theme-toggle__thumb { transform: translateX(30px); }
.theme-toggle[aria-pressed="true"]  .theme-toggle__thumb { transform: translateX(0); }

.theme-toggle__slot {
  position: relative;
  z-index: 1;
  width: 30px; height: 28px;
  display: grid;
  place-items: center;
}
.theme-toggle__slot svg { width: 16px; height: 16px; }

/* 当前生效的一侧着色，另一侧保持中性，不靠位置单独表意 */
.theme-toggle[aria-pressed="false"] .theme-toggle__moon { color: var(--c-brand-300); }
.theme-toggle[aria-pressed="true"]  .theme-toggle__sun  { color: var(--c-accent-400); }

.theme-toggle:focus-visible {
  outline: 2px solid var(--c-brand-500);
  outline-offset: 2px;
}

/* 键位提示（仅悬停时出现，不占用导航常驻宽度） */
.theme-toggle::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  padding: 6px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xs);
  background: var(--c-bg-700);
  box-shadow: var(--sh-md);
  font-size: var(--fs-caption);
  color: var(--c-text-200);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.theme-toggle:hover::after,
.theme-toggle:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 窄屏：导航空间紧张，隐藏提示气泡（保留控件本身） */
@media (max-width: 1180px) {
  .theme-toggle::after { display: none; }
}

/* 手机端：顶栏放不下第三个控件，切换入口移入抽屉（见 .drawer__theme）。
   481–620 区间实测仍有 16px 余量，故断点取 480。 */
@media (max-width: 480px) {
  .nav__actions .theme-toggle { display: none; }
}

/* 全站导航都多了主题控件（68px + 12px 间距）。
   实测 1181–1279 区间操作区右缘 1240 > 可用宽度，故把这些页面的
   「菜单收起」断点从组件默认的 1180 提到 1280。 */
@media (max-width: 1279px) {
  [data-page] .nav__menu { display: none; }
  [data-page] .nav__burger { display: grid; }
}

/* 抽屉内的主题切换行（带文字标签，比顶栏的气泡更明确） */
.drawer__theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: auto;              /* 与页脚信息一起沉底 */
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border-soft);
}
.drawer__theme-label { font-size: var(--fs-sm); color: var(--c-text-200); }
.drawer__theme .theme-toggle::after { display: none; }
/* 抽屉是手机端唯一的切换入口，点击区放大到 76×44（触控下限） */
.drawer__theme .theme-toggle { width: 76px; height: 44px; padding: 6px; }
.drawer__theme .theme-toggle__slot { width: 32px; height: 32px; }
.drawer__theme .theme-toggle__thumb { top: 6px; left: 6px; width: 32px; height: 32px; }
.drawer__theme .theme-toggle[aria-pressed="true"] .theme-toggle__thumb { transform: translateX(0); }
.drawer__theme .theme-toggle[aria-pressed="false"] .theme-toggle__thumb { transform: translateX(32px); }
/* 让「界面主题」接管 auto 外边距后，页脚信息与它保持紧凑间距 */
[data-page] .drawer__meta { margin-top: var(--sp-5); padding-top: 0; }

/* ==========================================================================
   3. 浅色主题适配（全站）
   --------------------------------------------------------------------------
   深色主题下大量组件依赖「浅色半透明叠加深底」的做法（玻璃面板、发光等），
   在白底会失效。这里逐处替换为「白色玻璃 + 边框」或「深墨半透明」。
   硬件插画（PCB、金手指、金属笼体）在两套主题下都保持深色实物质感，
   这是有意的：真实板卡本就是深色 PCB + 金色连接器，换成浅色反而失真。
   ========================================================================== */

/* 3.1 玻璃层：深色 → 白色 */
[data-theme="light"] .nav.is-scrolled { background: rgba(255, 255, 255, 0.88); }
[data-theme="light"] .drawer { background: rgba(255, 255, 255, 0.97); }

/* 3.2 表单控件：白底需要更清晰的边框来界定可输入区域 */
[data-theme="light"] .input,
[data-theme="light"] .select,
[data-theme="light"] .textarea { border-color: rgba(17, 30, 56, 0.16); }
[data-theme="light"] .input:hover,
[data-theme="light"] .select:hover,
[data-theme="light"] .textarea:hover { border-color: var(--c-border-strong); }

/* 3.3 页脚：深色渐变 → 白色渐隐，与画布自然衔接 */
[data-theme="light"] .footer {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), #E9EEF7);
}

/* 3.4 数据通路的节点块：深色渐变 → 白底 + 品牌色浅染 */
[data-theme="light"] .flow__dot {
  background: linear-gradient(160deg, rgba(59, 130, 246, 0.13), #FFFFFF);
  box-shadow: 0 10px 24px -14px rgba(37, 99, 235, 0.45);
}
[data-theme="light"] .flow__node:nth-child(5) .flow__dot {
  background: linear-gradient(160deg, rgba(14, 116, 144, 0.13), #FFFFFF);
  box-shadow: 0 10px 24px -14px rgba(14, 116, 144, 0.45);
}
[data-theme="light"] .flow__track {
  background: linear-gradient(90deg,
    rgba(17, 30, 56, 0.12),
    rgba(37, 99, 235, 0.46) 18%,
    rgba(14, 116, 144, 0.46) 82%,
    rgba(17, 30, 56, 0.12));
}

/* 3.5 场景图面板：深色技术图 → 浅色蓝图，底部渐隐到卡片白 */
[data-theme="light"] .scene__media {
  background:
    radial-gradient(360px 200px at 30% 10%, rgba(59, 130, 246, 0.13), transparent 68%),
    linear-gradient(160deg, #E7EEF9, #F6F9FD);
}
[data-theme="light"] .scene__media::after {
  background: linear-gradient(180deg, transparent 55%, rgba(255, 255, 255, 0.7));
}

/* 3.6 波形/时序示意面板：深色 → 浅色 */
[data-theme="light"] .wave-card { background: #F4F7FC; }

/* 3.7 底部转化区：深蓝渐变 → 浅蓝渐变（保持「区块感」但仍在白体系内） */
[data-theme="light"] .cta-band {
  background: linear-gradient(115deg, #E8EFFC 0%, #D8E5FA 44%, #EFF4FD 100%);
  border-top-color: var(--c-border-brand);
}
[data-theme="light"] .cta-band .t-body { color: var(--c-text-200); }
[data-theme="light"] .cta-band__art { opacity: 0.62; }

/* 3.8 客户案例占位：浅色底改用深墨淡染 */
[data-theme="light"] .placeholder-panel { background: rgba(17, 30, 56, 0.022); }

/* 3.9 内联 SVG 的冷青描边在白底过浅（#22D3EE 仅 2.1:1），换成深青 */
[data-theme="light"] :is(.scene__media, .wave-card, .cta-band__art, .adv-card__diagram) [stroke="#22D3EE"] { stroke: #0E7490; }
[data-theme="light"] :is(.scene__media, .wave-card, .cta-band__art, .adv-card__diagram) [fill="#22D3EE"] { fill: #0E7490; }
/* 同理，浅灰网格线与基线在白底几乎不可见 */
[data-theme="light"] :is(.scene__media, .wave-card) [stroke="rgba(148,163,184,.09)"] { stroke: rgba(17, 30, 56, 0.1); }
[data-theme="light"] :is(.scene__media, .wave-card) [stroke="rgba(148,163,184,.25)"] { stroke: rgba(17, 30, 56, 0.22); }

/* 3.11 光晕在白底需要收敛：同强度蓝光在白底会显脏 */
[data-theme="light"] .hero__glow {
  background:
    radial-gradient(720px 420px at 74% 34%, rgba(59, 130, 246, 0.13), transparent 66%),
    radial-gradient(460px 300px at 88% 74%, rgba(34, 211, 238, 0.09), transparent 70%),
    radial-gradient(380px 280px at 12% 82%, rgba(124, 58, 237, 0.06), transparent 72%);
}

/* 3.12 产品「暂无图片」占位里的蓝图描边：白底上需要更高不透明度才看得出 */
[data-theme="light"] .managed-product-placeholder svg,
[data-theme="light"] .managed-detail-thumb svg { opacity: 0.62; }

/* 3.13 深色代码窗口：面板底色始终是 #05070C，但内部若沿用浅色令牌
   （深色文字）会落到深色面板上，13.5px 正文只剩 1.55:1。
   做法是在容器内重新绑定深色主题的文字/边框令牌，而不是逐个覆盖子元素。 */
[data-theme="light"] .code-window {
  --c-text-100: #F8FAFC;
  --c-text-200: #CBD5E1;   /* 代码正文 —— 13.57:1 */
  --c-text-300: #94A3B8;   /* 文件名   —— 7.86:1 */
  --c-text-400: #8A97AC;   /* 语言标签 —— 6.82:1 */
  --c-border: rgba(148, 163, 184, 0.18);
  --c-border-soft: rgba(148, 163, 184, 0.10);
}

/* 3.14 徽标：浅色下品牌浅蓝文字落在浅蓝底上只剩 1.18:1，改用深阶 */
[data-theme="light"] .badge--brand {
  background: rgba(37, 99, 235, 0.12);
  color: var(--c-brand-400);   /* #1D4ED8 on 浅蓝底 ≈ 6.1:1 */
}

/* 3.15 跳转链接：品牌主色填充 + 白字在浅色下只有 3.68:1，改用深一阶填充 */
[data-theme="light"] .skip-link { background: var(--c-brand-600); }


/* 3.16 导航「渠道支持」下拉面板：底色硬编码深色玻璃，内部文字却跟随令牌，
   浅色主题下会变成「深字 + 深底」只剩 1.02:1。改为白色玻璃。 */
[data-theme="light"] .nav__drop-panel {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--sh-lg);
}
[data-theme="light"] .nav__drop-item:hover { background: rgba(17, 30, 56, 0.055); }

/* 3.17 选中态描边按钮：深色下用 --c-brand-200（浅蓝）作文字色，
   它在浅色主题里仍是 #BFDBFE，落在浅蓝底上只剩 1.21:1。改用深阶。 */
[data-theme="light"] .btn--outline:hover { color: var(--c-brand-400); }

/* 3.18 深色技术图纸：结构尺寸图 / 系统架构图 / 产品渲染图，内部色值全部硬编码
   （深色底 + 浅色文字与描边），因此浅色主题下**有意保持深色**——它们代表的是
   真实板卡与工程图稿，翻白反而失真。这里只补一层投影，让深色块在白底上
   看起来是「有意放置的图纸」而不是「漏改的深色模块」。 */
[data-theme="light"] :is(.dim-panel, .sol-block__art, .pdp__main) {
  box-shadow: var(--sh-md);
}

/* ==========================================================================
   4. 主题切换过渡与动效降级
   ========================================================================== */

/* 仅在切换瞬间挂上 .is-theme-switching，避免给全站元素常驻 transition */
html.is-theme-switching,
html.is-theme-switching body,
html.is-theme-switching body *:not(svg):not(path):not(use):not(circle):not(rect) {
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
  /* 背景保留构图，但完全静止。
     注意：光晕的动画写在 .bg__aurora i:nth-child(n) 上，优先级高于
     .bg__aurora i，因此这里必须用 !important 才能真正停下来。 */
  .bg__grid,
  .bg__aurora i,
  .bg__trace .pulse { animation: none !important; }

  .theme-toggle__thumb,
  .theme-toggle::after,
  .bg { transition: none; }

  html.is-theme-switching,
  html.is-theme-switching body,
  html.is-theme-switching body *:not(svg):not(path):not(use):not(circle):not(rect) {
    transition: none !important;
  }
}

/* 打印时不输出背景动效 */
@media print {
  .bg { display: none; }
}