/* ============================================================
   页面级视频背景（page-bg）
   —— 给「没有动态背景」的栏目页各配一条静音循环短片，
      做眼底的一层空气：会动，但不抢内容。
   —— 结构：
        <section id="xxx" class="section sky-skin has-bg" …>
          <div class="section-bg" aria-hidden="true">
            <video muted loop playsinline preload="none" poster="…">
              <source src="assets/vid/bg-xxx.mp4" type="video/mp4">
            </video>
          </div>
          <div class="sky-field" …></div>
          …
        </section>
   —— 两个关键点：
      1) section.has-bg 加 isolation:isolate 成为独立层叠上下文，
         视频层 z-index:-1 → 压在页面底色之上、所有内容之下。
      2) 视频层 position:fixed 贴住视口 → 页内滚动时背景不动。
   —— 只有当前页播放（见 js/page-bg.js），省电也省解码。
   ============================================================ */

section.has-bg { isolation: isolate; }
/* 坑（已实测）：css/style.css 给 .section 挂了两条动画 ——
   `section-fade-in`（fill: both）与 @supports 里的 `chapter-reveal`
   （animation-timeline: view()），两者的关键帧都动 transform。
   只要元素上存在动 transform 的动画，Chrome 就把它当作 fixed 子元素的
   包含块 —— 背景片会被内容列（max-width 1200px）夹成一张 1200 宽的图，
   还会被这一页的 overflow-x:hidden 裁掉。
   计算值 transform 即使已是 none 也没用（!important 也压不掉），
   必须把动画本身关掉；淡入淡出交给 css/pages.css 的 page-active 负责。 */
section.has-bg,
section.has-bg.page-active {
  animation: none !important;
  transform: none !important;
}

.section-bg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--sbg-w, 100vw);
  transform: translateX(-50%);
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
/* .section 版式是「一列内容浮在页底上」（max-width 1200 + margin auto），
   两侧会露出 body 底色 —— 背景片只覆盖这一列，别去染那两条边。
   手机（<=1200）自动退化成满屏。*/
section.section.has-bg .section-bg { --sbg-w: min(100vw, var(--content-max, 1200px)); }
.section-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
}
/* 进到当前页再淡入（慢一点，像呼吸而不是"打灯"） */
section.has-bg.page-active .section-bg video {
  opacity: var(--bg-op, 0.26);
  transition-duration: 1400ms;
}

/* 不动就不放：减少动态 / 无 JS / 打印，一律不显示背景片 */
@media (prefers-reduced-motion: reduce) {
  .section-bg { display: none; }
}
html.no-js .section-bg { display: none; }
@media print {
  .section-bg { display: none !important; }
}