/* ============================================================
   禾田 v0.6 · 页面切换揭示（原生 View Transitions API，仅 CSS，无 JS 依赖）
   ---- 挂载点纪律：伪元素树挂 html 不挂 body ----
   ::view-transition-* 只能作为根元素伪元素匹配，方向判定一律写
   html:has(body.ht-page-*)::view-transition-*；
   禁止 body.ht-page-xxx::view-transition-*（永不命中）。
   ---- 方向口径 ----
   old 快照按"出发页"自己的 body 类匹配，new 快照按"进入页"匹配：
     ht-page-light ::view-transition-old(root)  淡出
     ht-page-light ::view-transition-new(root)  自下揭示
     ht-page-dark  ::view-transition-new(root)  自上揭示（首页是全站唯一深色页）
   浅→浅：原生层统一 380ms 轻揭示（方向不可按 CSS 豁免，接受该口径）。
   ---- 分层兜底 ----
   不支持该 at-rule 的浏览器：本文件整体零影响；
   支持 VT 的引擎 :has 全覆盖（CSS.supports('selector(html:has(body.x)::view-transition-new(root))') 实测 true）；
   不支持 VT 的引擎由 transition.js 幕布兜底（脚本用 CSSViewTransitionRule 检测后自退）。
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* 跨文档视图过渡开关 */
  @view-transition {
    navigation: auto;
  }

  /* 公共时长与曲线；height:100% 让根快照撑满视口 */
  html::view-transition-old(root),
  html::view-transition-new(root) {
    animation-duration: 380ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
  }

  /* 出发页浅色：旧页整体淡出 */
  html:has(body.ht-page-light)::view-transition-old(root) {
    animation-name: ht-vt-fade-out;
  }

  /* 出发页浅色：新页自下揭示 */
  html:has(body.ht-page-light)::view-transition-new(root) {
    animation-name: ht-vt-reveal-up;
  }

  /* 进入页深色（首页）：新页自上揭示 */
  html:has(body.ht-page-dark)::view-transition-new(root) {
    animation-name: ht-vt-reveal-down;
  }

  @keyframes ht-vt-fade-out {
    to { opacity: 0; }
  }
  @keyframes ht-vt-reveal-up {
    from { clip-path: inset(100% 0 0 0); }
    to   { clip-path: inset(0); }
  }
  @keyframes ht-vt-reveal-down {
    from { clip-path: inset(0 0 100% 0); }
    to   { clip-path: inset(0); }
  }
}