/* 其一 · 跨页转场层（transition.css）
 *
 * 解决的问题（2026-10-14 线上像素取证）：
 *   全站是纯 MPA（每个导航链接都是一次整页跳转），零转场机制——
 *   `view-transition` / `startViewTransition` / pjax / swup 全站 0 处。
 *   于是「点导航」= 旧页停一帧、新页硬切上来。实测（1440×900 眼动采样）：
 *     首页(浅纸 253,248,238) → 紫微(夜空 30,35,49)：
 *       第 0 帧仍是旧页 253,248,238，第 1 帧直接是 30,35,49
 *       —— 一帧内亮度掉 220 级，这就是用户报的「闪」。
 *   跨主题跳转（浅纸页 ↔ 紫微夜空页）尤其明显，因为两端地色差了两个数量级。
 *
 * 做法：跨文档视图过渡（Cross-document View Transitions，Chrome 126+）。
 *   浏览器在跳转前后各截一张快照，用我们给的动画把「旧页快照 → 新页快照」
 *   连起来，硬切就变成淡入淡出。这是纯声明式的：一个 @view-transition 规则，
 *   不改任何页面结构、不动任何既有视觉。
 *
 * 为什么是「整体淡入淡出」而不是分元素 morph：
 *   本站在用 position: fixed 铺满视口的背景层（.bg / .veil / .glow /
 *   body::before 等 19 处），标题与卡片又 20 页各不相同。按元素做 morph
 *   要求同名元素跨页一一对应，一旦对不上就会出现元素从错误位置飞入的鬼影；
 *   而「整页淡入淡出」对结构差异免疫，跨主题换色的观感也最干净。
 *   代价是牺牲了 morph 的叙事感——这是有意的取舍，宁稳不炫。
 *
 * 兼容性：不支持的浏览器（Safari/Firefox 现版本、以及老 Chrome）
 *   会忽略 @view-transition，行为与今天完全一致，**不会更差**。
 *   也就是说这一层是纯渐进增强，没有降级风险。
 *
 * 与 reduced-motion 的关系：转场属于「非必要的装饰性运动」，
 *   用户在系统里关掉动效时应当直接取消，退回瞬时切换（见文末）。
 */

/* ============ A. 打开跨文档转场 ============ */
/* navigation: auto 是「同源、非刷新」的跳转才启用；链接里带 download、
   或者用户按住修饰键要开新标签、以及前进/后退以外的刷新，浏览器自己会跳过。 */
@view-transition {
  navigation: auto;
}

/* ============ B. 旧页淡出 ============ */
/* 时长取 180ms：本站在意「克制的高级感」（见 motion.css 的纪律段）。
   转场是每次点击都发生的高频动作，超过 220ms 就会显得拖沓、
   让连续浏览变成等待；180ms 刚好够抹掉硬切的刺激感，
   又不至于让「点一下」有延迟感。 */
::view-transition-old(root) {
  animation: 180ms cubic-bezier(0.4, 0, 0.2, 1) both qy-fade-out;
}

/* 新页淡入：稍长一点点（240ms）压住淡出，两段有 60ms 重叠。
   重叠是刻意的——不留真空期，否则中间会露出浏览器的默认白底（那正是要治的东西）。 */
::view-transition-new(root) {
  animation: 240ms cubic-bezier(0.4, 0, 0.2, 1) both qy-fade-in;
}

@keyframes qy-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes qy-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============ C. 尊重「减少动效」 ============ */
/* 用户在系统里声明了 prefers-reduced-motion，说明他要的是「不要动」，
   而转场纯属观感修饰、不承载任何信息，直接取消。
   注意：取消的是动画，不是 @view-transition 本身——把 duration 压到 1ms
   比去掉规则更稳（部分实现里规则消失会退回旧的硬切，而我们要的是瞬时切换，
   两者其实等价，但保留规则能让「转场后页面状态」这件事保持在同一套代码路径上）。 */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms;
  }
}