/* ============================================================
   spa.css — 单页视图切换
   ------------------------------------------------------------
   全站只有 index.html 一个承载内容的页面，四块视图都常驻 DOM：

     .stage[data-view-panel="home"]      1 级 封面
     .site[data-view-panel="index"]      2 级 目录
     .view[data-view-panel="<chapter>"]  3 级 章节

   切换只做两件事：给非当前视图加 .is-off（display:none），
   以及把 body 的 is-home / is-landing / data-chapter 换掉 ——
   这样各版块原来写在 body[data-chapter] 上的规则一行都不用改。

   为什么不直接用 [hidden]：.stage 有 display:flex、.site 有一堆
   布局规则，UA 样式表里的 [hidden]{display:none} 压不住它们。
   ============================================================ */

[data-view-panel].is-off {
  display: none !important;
}

/* 章节视图只是 header + main 的载体，自己不产生盒子 */
.view {
  display: block;
}

/* 章节 main 原来直接是 body 的子元素（body[data-chapter] > main#main），
   现在中间多了 .view 这一层，等价规则见 screen.css 里同步改过的两处选择器。
   这里只补一条兜底高度，避免某些浏览器把 .view 撑成 0 高 */
.view > main {
  min-height: 0;
}

/* 封面退场：复用 base.css 里已有的 .stage.is-out，
   但 SPA 里它不能真的消失掉（返回首页时要能回来），
   所以这里把 visibility 的交接收回来，交给透明度+位移处理 */
.stage.is-out {
  visibility: visible;
  opacity: 0;
  transform: scale(1.035);
  pointer-events: none;
}

/* 视图落定时的淡入。
   只动 opacity —— transform / filter / will-change 会给 position:fixed 的
   .nav 造出新的包含块，切换瞬间顶栏会跳一下，所以这里坚决不用位移 */
@media (prefers-reduced-motion: no-preference) {
  .view:not(.is-off),
  .site:not(.is-off) {
    animation: spa-settle 240ms var(--ease) both;
  }
}

@keyframes spa-settle {
  from {
    opacity: 0.001;
  }
  to {
    opacity: 1;
  }
}

/* 预热期：把面板临时摆成"有真实尺寸但不可见"，供重组件量尺寸后初始化。
   建完 JS 会立刻摘掉这个类，恢复 display:none。 */
[data-view-panel].is-warming {
  display: block !important;
  position: fixed;
  inset: 0;
  /* visibility:hidden 会让浏览器跳过绘制，第一次真正进场时 30 张唱片
     还要再栅格化一次（~80ms）。用 opacity:0 代替：内容照常绘制进图层，
     只是透明不可见 —— 栅格缓存提前建好，进场就不会再卡那一下。 */
  visibility: visible;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}