/* ══════════════════════════════════════════════════════════════════
   ambience-r12.css — 第 12 轮:氛围背景层 + 关键数字累加
   本轮只新增这一个样式文件与并排的 ambience-r12.js,不改任何既有文件。
   整轮回退 = 删掉 7 个 HTML head 里那两行引用。

   两条不变量(本文件的写法全部围绕它们):
     · 页面高度与文案指纹零变化 ⇒ 背景层脱离文档流;数字用生成内容画,
       既不进 textContent 也不进 innerText(实测两者都看不见 ::after)。
     · 浅色档完全不参与 ⇒ 除 §1 外,全部规则以 [data-theme="dark"] 限定。
   ══════════════════════════════════════════════════════════════════ */

/* ── §1 唯一一处覆盖既有选择器,且是像素等价的 ─────────────────────
   .hero 的底色与 body 底色**逐字相同**(七页 × 两套主题实测 rgb(20,31,38)
   / rgb(244,246,246),且 background-image 均为 none)。html 自身无背景,
   按 CSS 背景传播规则,body 的底色上交给画布、body 本身按透明绘 ——
   所以把 .hero 改透明,在没有背景层时**一个像素都不变**,
   只是让 z-index:-1 的氛围层透得出来。

   为什么非改不可:首页七个区段各自铺着有意为之的不同色阶
   (#18242C / #1B2A33 / #0E3456),实测整页负层透出率仅 1.3% ——
   不动 .hero,首页(正是规矩点名的「行销首页」)将完全看不到氛围层。
   那些色阶是别人有意排的节奏,不属于我,一个都没动。
   ⚠️ 这一条仍是覆盖,已在交付说明里单独列出请 Yannie 过目。 */
[data-theme="dark"] .hero { background-color: transparent; }

/* 让负层真正露出来的那一步不在本文件,而在 ambience-r12.js 的 swapBase():
   body 自带不透明底色,会画在它自己的负 z-index 子元素**之上**,
   所以整层刷成不透明品红也看不见(峰值通道差只有 2/255,那是多一个
   合成层带来的抖动噪点,不是品红)。做法是把同一个颜色原样搬到 html、
   body 自身改透明;根元素背景画在最底,负层才叠得上去。
   为什么不写在 CSS 里:颜色要从 computed style 原样取,
   写死色值或猜 token 都可能和既有样式对不上。 */

/* ── §2 氛围层本体 ───────────────────────────────────────────────
   fixed + inset:0 + z-index:-1:不进文档流、不影响任何元素的盒子,
   且永远压在内容之下 —— 它连页脚的法定风险警示段都盖不到。 */
.r12-ambience {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: none;            /* 默认不出现:浅色档、以及 JS 未启用时 */
  pointer-events: none;
  contain: strict;          /* 画布重绘不触发外部布局/绘制,省 CPU */
}

/* 只有深色档才放出来。这是 CSS 一层的兜底:
   即使 JS 判断失误建了画布,浅色档也不会有粒子。 */
[data-theme="dark"] .r12-ambience { display: block; }

/* ── §3 关键数字累加 ─────────────────────────────────────────────
   真实文字始终留在 DOM 里(只是过程中透明),生成内容负责显示过程值:
     · textContent / innerText 全程不变 ⇒ 文案指纹恒定
     · ::after 绝对定位 ⇒ 盒子不变 ⇒ 页面高度恒定
     · 元素仍在无障碍树里,读屏全程读到的是**终值**,不是跳动的中间数
   --r12-ink 由 JS 在开跑前从元素自身的 computed color 取,不写死色值。 */
[data-theme="dark"] [data-r12-count] {
  position: relative;
  color: transparent;
}

[data-theme="dark"] [data-r12-count]::after {
  content: attr(data-r12-count);
  position: absolute;
  inset: 0;
  padding: inherit;
  color: var(--r12-ink, var(--c-text));
  font-variant-numeric: tabular-nums;  /* 过程中数字不左右抖 */
  pointer-events: none;
}

/* ── §4 无障碍兜底 ───────────────────────────────────────────────
   站上既有的 --dur-* 降 1ms 写在 assets/site.css,本轮一个字没动,
   这里只管我自己这一层。

   JS 那边在 reduce 下根本不会给元素打 data-r12-count;
   这一段是**不依赖 JS 的第二道保险**:万一属性已经打上去了,
   数字也立刻回到终值、生成内容整个撤掉。 */
@media (prefers-reduced-motion: reduce) {
  [data-theme="dark"] [data-r12-count] {
    color: var(--r12-ink, var(--c-text));
  }
  [data-theme="dark"] [data-r12-count]::after {
    content: none !important;
  }
}