/* ==========================================================================
 * page-fx.css —— 页面切换过渡（out-in）+ 首屏内容分组入场
 *
 * 站点是整页跳转（MPA），新旧文档不可能同时存在，所以「先出后进」拆成两段：
 *   1) 点击站内链接 → 旧页面 body 快速淡出（110ms），动画结束才 location.assign
 *   2) 新文档 <head> 里同步打上 .pfx-enter → 首帧就带着 72% 不透明度出现，
 *      不再是「全透明 → 慢慢浮现」（那样每一帧都是白屏）。
 *      - 首屏能分出 ≥2 个区块：交给 page-fx.js 分组错峰入场（.pfx-blk）
 *        第一块 .pfx-first 从 62% 起步、200ms 到位，其余块 55ms 递增、260ms
 *      - 分不出来（内容是异步渲染的空白页等）：整页 150ms 收尾兜底
 *
 * 只动 opacity / transform：不触发重排，布局高度、滚动条都不受影响，
 * 动画期间元素照常可以点击。
 *
 * 时长总账（点击到全部到位）：110ms 退出 + 首帧即 62% 可见 + 最慢 5×55+260=535ms
 * ========================================================================== */

@keyframes pfx-page-in {
  from { opacity: .72; transform: translateY(4px); }
  to   { opacity: 1;   transform: none; }
}

@keyframes pfx-page-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* 进入（整页兜底）：首帧就不是全白 —— 直接从 72% 开始，150ms 到位 */
html.pfx-enter body {
  animation: pfx-page-in 150ms ease both;
  transform-origin: 50% 0;
}

/* 进入（分组版）：body 立刻到终态，改由每个区块自己入场。
   这里用 !important 覆盖上面那条，避免整页淡入和分组入场同时跑导致发灰。 */
html.pfx-stage body {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* 首屏区块：先压到 0，再按 --pfx-d（由 JS 逐个写入）依次入场。
   animation ... both → 延迟期间保持 from 状态，不会提前露出来。
   默认组 260ms；第一组 .pfx-first 只压到 62% 并缩短到 200ms，
   保证「新页第一眼就有内容」，而不是等 300ms 才从白里浮出来。 */
.pfx-blk {
  opacity: 0;
  will-change: opacity, transform;
  animation: pfx-blk-in 260ms cubic-bezier(.16, .84, .28, 1) var(--pfx-d, 0ms) both;
}

.pfx-blk.pfx-first {
  animation-name: pfx-blk-lead;
  animation-duration: 200ms;
}

@keyframes pfx-blk-in {
  from { opacity: 0;   transform: translateY(12px); }
  to   { opacity: 1;   transform: none; }
}

/* 首块：起始就可见 62%，只做一次很轻的「落定」，衔接旧页淡出 */
@keyframes pfx-blk-lead {
  from { opacity: .62; transform: translateY(8px); }
  to   { opacity: 1;   transform: none; }
}

/* 退出：只做淡出，110ms —— 越短，浏览器越早开始加载新文档。
   这里刻意不给 body 加 transform —— body 上有 transform 会变成 position:fixed
   的包含块，右缘好友栏、弹窗遮罩会在淡出的 110ms 里错位到文档顶部。 */
html.pfx-out body {
  animation: pfx-page-out 110ms ease both;
  pointer-events: none;
}

/* 兜底：万一新文档一直没到（网络慢 / 被拦），页面底色也跟着站点纸色，
   不出现刺眼的浏览器纯白 */
html.pfx-enter { background-color: var(--paper, #fffafc); }

/* 无障碍：不做任何动画，内容直接到位 */
@media (prefers-reduced-motion: reduce) {
  html.pfx-enter body,
  html.pfx-out body,
  .pfx-blk {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}