/* ============================================================
   动效系统样式（js/motion/ 配套）—— 四种状态机：
   1. 无类名（file:// 或 boot 未介入）：完全沿用 style.css 旧行为
   2. html.motion-boot：ESM 加载期间暂停 CSS 首屏动画（防闪烁）
   3. html.motion-on：增强态，入场由 JS（Anime.js）驱动，CSS 只留终态结构
   4. html.motion-static：reduce-motion 强制终态，一切可见
   ============================================================ */

/* ---------- boot：等待 ESM 就绪，暂停首屏 CSS 动画 ---------- */
html.motion-boot .fx,
html.motion-boot .fx-clip {
  animation-play-state: paused;
}

/* ---------- motion-on：入场交给 JS，禁用被接管的 CSS 动画 ---------- */
/* .fx 由 Anime.js 驱动 opacity；.fx-clip（头像）须同时动画 opacity + clipPath，
   不能只清 clip 却留下 opacity:0（v4 验收：终态可见，而非仅 DOM 存在）。 */
html.motion-on .fx {
  animation: none;
  opacity: 0;
  transform: none;
}

html.motion-on .fx-clip {
  animation: none;
  opacity: 0;
  transform: none;
  clip-path: circle(0% at 50% 50%);
}

html.motion-on .section-head.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

html.motion-on .m-char {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
}

/* ---------- motion-static：reduce-motion 终态（JS 与 CSS 双保险） ---------- */
html.motion-static .motion-bg {
  display: none;
}

html.motion-static .fx,
html.motion-static .fx-clip,
html.motion-static .m-char,
html.motion-static .m-head .kicker,
html.motion-static .m-head h2,
html.motion-static .m-fig,
html.motion-static .entry-pill,
html.motion-static .detail-head,
html.motion-static .detail-fact,
html.motion-static .detail-links,
html.motion-static .detail-onward,
html.motion-static .list-intro,
html.motion-static .section-intro {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}

/* ---------- 背景层挂载 ---------- */
.motion-region {
  position: relative;
}

.motion-region > *:not(.motion-bg) {
  position: relative;
  z-index: 1;
}

.motion-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.motion-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- 全局背景层（背景单例化） ----------
   两层铺满视口、跨区域共用，替代原先每 section 一个 WebGL 上下文。
   z-index:-1 与 style.css 的 body::before 坐标纸同层；背景为 alpha 混合输出
   （lineWaves 的 alpha 即亮度、liquidDrop 上限 0.92），坐标纸仍可透过，观感不变。
   opacity 由 js/motion/bg-crossfade.js 按滚动进度逐帧接管（已 rAF 合帧）。
   r8：删除 transition: opacity——JS 每帧写目标值、CSS 又在追 140ms 的旧目标，
   两个插值器互相追的结果是层透明度落后滚动约 140ms，且停手后再补一段 140ms 收尾，
   正是“滚动与停止时背景不跟手”的来源。平滑由 rAF + smoothstep 提供，无需 CSS 过渡。 */
.motion-bg--global,
.motion-bg--hero {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0;
  will-change: opacity;
}

html.motion-static .motion-bg--global,
html.motion-static .motion-bg--hero {
  display: none;
}

/* 摄影页：展厅光照为固定视口层（不随内容滚动，照片放大时保持静止） */
.page-gallery .motion-bg {
  position: fixed;
}

.page-gallery main > *:not(.motion-bg) {
  position: relative;
  z-index: 1;
}

/* ---------- 章节条目：初始隐藏只用类，不写 inline opacity ---------- */
.m-flow-pending {
  opacity: 0;
}

html.motion-static .m-flow-pending {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .m-flow-pending {
    opacity: 1;
  }
}

/* ---------- 章节标题：错峰入场（IO 一次性） ----------
   r42：标题下短线（.m-head::after）已移除——区段识别统一交给 kicker 前短线，
   避免与 .section-head::after（也已移除）三线重复。 */
.m-head {
  position: relative;
}

.m-head .kicker,
.m-head h2 {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s ease,
    transform 0.5s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.m-head h2 {
  transition-delay: 0.09s;
}

.m-head-in .kicker,
.m-head-in h2 {
  opacity: 1;
  transform: none;
}

/* ---------- 摄影缩略图 / 图组入场 ---------- */
.m-fig {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition:
    opacity 0.55s ease,
    transform 0.55s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  transition-delay: calc(var(--m-fig-i, 0) * 70ms);
}

.m-fig-in {
  opacity: 1;
  transform: none;
}

/* ---------- 系统 reduce-motion：CSS 兜底（不依赖 JS 是否加载） ---------- */
@media (prefers-reduced-motion: reduce) {
  .motion-bg {
    display: none;
  }

  .m-head .kicker,
  .m-head h2,
  .m-fig {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- 小屏：背景层减负（效果内部另降密度/禁鼠标） ---------- */
@media (max-width: 768px) {
  .motion-canvas {
    opacity: 0.85;
  }
}