/* =============================================================
   模块背景图 · css/module-bg.css
   只作用于带 <body data-mbg="模块名"> 的 9 个页面：
     glossary 术语词词典 / models 模型图鉴 / tools AI工具库 /
     prompt-workshop 提示词工坊 / cases 实战案例 / ai-graph 知识图谱 /
     advanced 进阶参考 / history-view 历史浏览 / learning 学习中心
   首页、创意工坊没有 data-mbg → 一行都不生效。

   层级（谁也不遮谁）：
     canvas 底色 → body::before（图 + 遮罩 + 正文列薄纱，z-index:-1，position:fixed）
                 → 各页原有 .xx-canvas 点阵纹理（z-index:0）
                 → 导航 / 页头 / 正文 / 页脚（z-index:1）
   图不吃点击（pointer-events:none）、不参与布局（fixed），所以卡片排版一点没动。

   两个可调旋钮（改数字即可，全站生效）：
     --mb-scrim 的 alpha  → 整页遮罩浓度（越大越清楚的字、越淡的图）
     --mb-fx 里的 blur()  → 背景图虚化程度（越大越不干扰正文）

   2026-09-03 17:25 全站遮罩加深一档（韩的要求：画面过亮 → 加深、调暗）：
     下面 5 组 --mb-scrim / --mb-veil 的 alpha 各加 .05~.10，浅色那两组同时把底色从
     248,250,252 收到 236,241,248（轻微烟灰，深色文字的对比度不掉）。
     图片、url、background-* 属性一个都没动；只碰 alpha 与 rgba 颜色。
     实测（术语词典页、截图取文字旁背景，加深前 → 加深后）：
       暗色 页头大标题 12.99 → 14.85:1 / 导语 5.20 → 6.29:1 / 导航 7.11 → 7.29:1
       背景图可见度（右留带亮度跳变）14.7 → 13.5，图还在，只是不抢字了
       工具：node _dev/背景图-量图.js <截图> <light|dark>
   回滚：node _dev/背景图-绑定.js --revert（删 link + 去 data-mbg），或直接删本文件。
   ============================================================= */

/* ---------- 1. 浅色主题 ---------- */
:root {
  /* 纵向底遮罩：上轻下重，页脚区最稳 */
  --mb-scrim: linear-gradient(180deg,
      rgba(236, 241, 248, 0.74) 0%,
      rgba(236, 241, 248, 0.80) 46%,
      rgba(226, 234, 244, 0.87) 100%);
  /* 正文列薄纱：中间浓、两侧透明，两侧留出看图的窗口 */
  --mb-veil: linear-gradient(90deg,
      rgba(236, 241, 248, 0) 0%,
      rgba(236, 241, 248, 0.42) 14%,
      rgba(236, 241, 248, 0.52) 30%,
      rgba(236, 241, 248, 0.52) 70%,
      rgba(236, 241, 248, 0.42) 86%,
      rgba(236, 241, 248, 0) 100%);
  --mb-fx: blur(7px) saturate(1.06) brightness(1.02);
}

/* ---------- 2. 深色主题 ---------- */
[data-theme="dark"] {
  --mb-scrim: linear-gradient(180deg,
      rgba(6, 9, 18, 0.75) 0%,
      rgba(6, 9, 18, 0.80) 46%,
      rgba(2, 4, 10, 0.88) 100%);
  --mb-veil: linear-gradient(90deg,
      rgba(6, 9, 18, 0) 0%,
      rgba(6, 9, 18, 0.36) 14%,
      rgba(6, 9, 18, 0.46) 30%,
      rgba(6, 9, 18, 0.46) 70%,
      rgba(6, 9, 18, 0.36) 86%,
      rgba(6, 9, 18, 0) 100%);
  --mb-fx: blur(7px) saturate(1.08) brightness(0.92);
}

/* ---------- 3. 背景层 ---------- */
body[data-mbg]::before {
  content: "";
  position: fixed;                 /* 固定不随滚动；比 background-attachment 更稳（iOS 也认） */
  inset: -24px;                    /* 四周多铺 24px，避免虚化把边缘透出底色 */
  z-index: -1;
  pointer-events: none;
  background-image: var(--mb-scrim), var(--mb-veil), var(--mb-img, none);
  background-size: auto, auto, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  filter: var(--mb-fx);
  will-change: transform;              /* 提升为独立合成层：模糊只算一次，长页滚动不反复重绘 */
}

/* ---------- 4. 手机端：遮罩自动加浓、虚化略减（图小，细节本来就少） ---------- */
@media (max-width: 720px) {
  :root {
    --mb-scrim: linear-gradient(180deg,
        rgba(236, 241, 248, 0.83) 0%,
        rgba(236, 241, 248, 0.86) 46%,
        rgba(226, 234, 244, 0.91) 100%);
    --mb-veil: linear-gradient(90deg,
        rgba(236, 241, 248, 0.34) 0%,
        rgba(236, 241, 248, 0.45) 24%,
        rgba(236, 241, 248, 0.45) 76%,
        rgba(236, 241, 248, 0.34) 100%);
    --mb-fx: blur(5px) saturate(1.04) brightness(1.02);
  }
  [data-theme="dark"] {
    --mb-scrim: linear-gradient(180deg,
        rgba(6, 9, 18, 0.86) 0%,
        rgba(6, 9, 18, 0.89) 46%,
        rgba(2, 4, 10, 0.93) 100%);
    --mb-veil: linear-gradient(90deg,
        rgba(6, 9, 18, 0.40) 0%,
        rgba(6, 9, 18, 0.50) 24%,
        rgba(6, 9, 18, 0.50) 76%,
        rgba(6, 9, 18, 0.40) 100%);
    --mb-fx: blur(5px) saturate(1.04) brightness(0.9);
  }
}

/* ---------- 5. 九个模块各绑一张（成品在 site/img/backgrounds/，>720px 用 -m 小图） ---------- */
body[data-mbg="glossary"]        { --mb-img: url("../img/backgrounds/glossary.jpg"); }
body[data-mbg="models"]          { --mb-img: url("../img/backgrounds/models.jpg"); }
body[data-mbg="tools"]           { --mb-img: url("../img/backgrounds/tools.jpg"); }
body[data-mbg="prompt-workshop"] { --mb-img: url("../img/backgrounds/prompt-workshop.jpg"); }
body[data-mbg="cases"]           { --mb-img: url("../img/backgrounds/cases.jpg"); }
body[data-mbg="ai-graph"]        { --mb-img: url("../img/backgrounds/ai-graph.jpg"); }
body[data-mbg="advanced"]        { --mb-img: url("../img/backgrounds/advanced.jpg"); }
body[data-mbg="history-view"]    { --mb-img: url("../img/backgrounds/history-view.jpg"); }

@media (max-width: 720px) {
  body[data-mbg="glossary"]        { --mb-img: url("../img/backgrounds/glossary-m.jpg"); }
  body[data-mbg="models"]          { --mb-img: url("../img/backgrounds/models-m.jpg"); }
  body[data-mbg="tools"]           { --mb-img: url("../img/backgrounds/tools-m.jpg"); }
  body[data-mbg="prompt-workshop"] { --mb-img: url("../img/backgrounds/prompt-workshop-m.jpg"); }
  body[data-mbg="cases"]           { --mb-img: url("../img/backgrounds/cases-m.jpg"); }
  body[data-mbg="ai-graph"]        { --mb-img: url("../img/backgrounds/ai-graph-m.jpg"); }
  body[data-mbg="advanced"]        { --mb-img: url("../img/backgrounds/advanced-m.jpg"); }
  body[data-mbg="history-view"]    { --mb-img: url("../img/backgrounds/history-view-m.jpg"); }
}

/* ---------- 6. 学习中心特例 ----------
   本页 .lq-canvas 自带不透明深蓝底（z-index:0），通用层会被它整片盖住，
   所以这一页把背景层挂到 .lq-canvas::before —— 压在深蓝底之上、点阵纹理(::after)之下。
   又因本页两档主题都是深色（html.lq-dark 固定调色板），遮罩不分明暗，统一用深色系。 */
body[data-mbg="learning"] {
  --mb-fx: blur(7px) saturate(1.08) brightness(0.92);   /* 本页两档主题都用这套，避免 light 下亮度跳变 */
  --mb-scrim: linear-gradient(180deg,
      rgba(4, 7, 15, 0.70) 0%,
      rgba(4, 7, 15, 0.76) 46%,
      rgba(2, 4, 10, 0.84) 100%);
  --mb-veil: linear-gradient(90deg,
      rgba(4, 7, 15, 0) 0%,
      rgba(4, 7, 15, 0.46) 14%,
      rgba(4, 7, 15, 0.56) 30%,
      rgba(4, 7, 15, 0.56) 70%,
      rgba(4, 7, 15, 0.46) 86%,
      rgba(4, 7, 15, 0) 100%);
  --mb-img: url("../img/backgrounds/learning.jpg");
}
@media (max-width: 720px) {
  body[data-mbg="learning"] {
    --mb-scrim: linear-gradient(180deg,
        rgba(4, 7, 15, 0.82) 0%,
        rgba(4, 7, 15, 0.86) 46%,
        rgba(2, 4, 10, 0.92) 100%);
    --mb-veil: linear-gradient(90deg,
        rgba(4, 7, 15, 0.40) 0%,
        rgba(4, 7, 15, 0.50) 24%,
        rgba(4, 7, 15, 0.50) 76%,
        rgba(4, 7, 15, 0.40) 100%);
    --mb-img: url("../img/backgrounds/learning-m.jpg");
  }
}
body[data-mbg="learning"]::before { content: none; }        /* 关掉通用层，避免叠两次 */
body[data-mbg="learning"] .lq-canvas::before {
  content: "";
  position: absolute;
  inset: -24px;
  pointer-events: none;
  background-image: var(--mb-scrim), var(--mb-veil), var(--mb-img, none);
  background-size: auto, auto, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  filter: var(--mb-fx);
  will-change: transform;
}

/* ---------- 7. 打印不放背景图 ---------- */
@media print {
  body[data-mbg]::before,
  body[data-mbg="learning"] .lq-canvas::before { content: none; }
}