/* 页面切换平滑过渡(跨文档 View Transitions):不支持的浏览器自动回退为普通跳转 */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: hunter-vt-out 0.22s ease both;
}
::view-transition-new(root) {
  animation: hunter-vt-in 0.24s ease both;
}
@keyframes hunter-vt-out {
  to { opacity: 0; }
}
@keyframes hunter-vt-in {
  from { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* ⚠ 内容本身不做换页入场动画(production 的观感就是直接换)。
   这里试过两版并被否掉,别再往回加:
     1. 新内容 opacity 0->1 + translateY(12px)->0 —— "从下面顶上来",否;
     2. 旧内容淡出 -> 换 -> 新内容淡入 —— 内容要等 110ms 才换,又变成"点了要等一下",否。
   下面留给 .nav-bar 的那两层淡入是导航栏变形的一部分,不在此列。 */

/* 通栏 → 通栏(首页 ↔ 文档页):栏体形状没变,不该走 play-morph 那套「从胶囊展开」,
   但栏内会换(品牌、导航项从靠右变居中),所以整条 .nav-bar 先淡进来。
   ⚠ 只动 opacity:胶囊态的 .nav 靠 transform 做居中, .nav-bar 上的 morph
   也在写 height/border-radius,动画里再叠 transform 会打架(踩过)。 */
@keyframes hunter-nav-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 栏体形状不变、只有栏内要换(文档页 A -> 文档页 B):这条栏体表面是连续的,别让它闪,
   只淡内容。表面跟着一起淡,是为了让 --hunter-nav-from-* 那层"上一页的底色"盖住第一帧,
   否则第一帧会露出目标页自己的 token(两页主题不同时串色,踩过)。
   ⚠ 隐式终态靠"只写 from"实现:keyframes 省略 to 时,终态取元素自身的计算值。
   ⚠ from 的颜色来自 footer.php 抄下来的上一页栏体(--hunter-nav-from-*):
   两页主题可能不同(首页 data-force-dark 恒暗),用目标页的 token 会串色(踩过)。
   ⚠ 只给 skip-morph 用(两边都有"面"、形状又相同)。首页那条透明通栏参与的过渡
   一律走 hunter-nav-surface-rise:复刻上一页的表面会在首页留一条通顶奶白带(踩过)。 */
@keyframes hunter-nav-surface-in {
  from {
    background-color: var(--hunter-nav-from-bg, transparent);
    /* ⚠ 写 border-color(四边)而不是 border-bottom-color:胶囊那条栏是四边 1px 描边,
       只淡底边的话,胶囊的左/上/右描边会在第一帧就整条出现,像"啪"地贴上去(踩过)。
       首页那条只有底边有宽度,四边一起淡对它是无害的。 */
    border-color: var(--hunter-nav-from-border, transparent);
    -webkit-backdrop-filter: blur(0px) saturate(100%);
    backdrop-filter: blur(0px) saturate(100%);
  }
}

/* 目标栏体"自己浮现":从没有面长出自己的底色 + 描边 + 模糊。
   ⚠ 这里写死 transparent,绝不复刻上一页的表面。首页那条通栏是全宽无面的,
   把胶囊的底搬过来就成了一条横贯屏幕的奶白带,一直挂到动画结束
   (实测:换到首页后 .nav-bar 已经是 1600px 宽、圆角 0,却还画着胶囊的
   white/0.6,从 184ms 挂到 653ms)。 */
@keyframes hunter-nav-surface-rise {
  from {
    background-color: transparent;
    /* ⚠ 写 border-color(四边)而不是 border-bottom-color:胶囊那条栏是四边 1px 描边,
       只淡底边的话,胶囊的左/上/右描边会在第一帧就整条出现,像"啪"地贴上去(踩过)。 */
    border-color: transparent;
    -webkit-backdrop-filter: blur(0px) saturate(100%);
    backdrop-filter: blur(0px) saturate(100%);
  }
}

/* 首页那条透明通栏 <-> 有面的栏(胶囊、文档产品页通栏):
   不走主题那套「整条栏从胶囊展开/收回」的几何变形——首页那条栏体是透明的,
   几何变形没有"面"可看,结果只剩导航项整组瞬移,很怪(踩过)。
   改成:目标表面浮现 + 栏内元素按旧位置滑过来(FLIP 由 footer.php 算),
   换主题按钮跟着 .nav-actions 淡出来。
   ⚠ :not(.nav-flat) 是这套的关键:目标是首页(透明通栏)时不准碰表面,
   否则又是那条奶白带。 */
.site-header[data-astro-cid-fzpbxy5g].flat-swap:not(.nav-flat) .nav-bar[data-astro-cid-fzpbxy5g] {
  animation: hunter-nav-surface-rise 0.45s ease both;
}

.site-header[data-astro-cid-fzpbxy5g].flat-swap .nav-actions[data-astro-cid-fzpbxy5g] {
  animation: hunter-nav-fade 0.32s ease both;
}

/* ⚠ 选择器必须连作用域属性一起写:主题里有一条
   `.site-header[data-astro-cid].solid.skip-morph .nav-bar[data-astro-cid]{animation:none}`
   (skip-morph 在原著里就是"什么都不播"的重置),不带属性选择器只有 (0,3,0),
   会被它压掉,淡入根本不生效(实测 opacity 全程 1.00)。这里凑到同特异性,
   靠加载顺序(view-transitions 在 Layout 之后)取胜。
   ⚠ skip-morph 只在 toSolid 时挂,所以 .solid 是必然的;.nav-flat 永不出现
   (首页在任一侧的过渡都被 flat-swap 接管了),原先那两个变体规则已删。 */
.site-header[data-astro-cid-fzpbxy5g].solid.skip-morph .nav-bar[data-astro-cid-fzpbxy5g] {
  animation: hunter-nav-fade 0.26s ease both, hunter-nav-surface-in 0.3s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .site-header[data-astro-cid-fzpbxy5g].solid.skip-morph .nav-bar[data-astro-cid-fzpbxy5g],
  .site-header[data-astro-cid-fzpbxy5g].flat-swap .nav-bar[data-astro-cid-fzpbxy5g],
  .site-header[data-astro-cid-fzpbxy5g].flat-swap .nav-actions[data-astro-cid-fzpbxy5g] {
    animation: none;
  }
}

/* 胶囊页 ↔ 首页通栏:栏体在变形,但导航项是"整组从靠右瞬移到绝对居中"的,
   不叠淡入就是一次横跳。这里和主题 play-morph 的 nav-link 错峰淡入对称补一份。
   ⚠ 主题 play-morph 那份带 translateY(6px),这里只做 opacity——这一版刚把
   内容入场里的上浮去掉,导航项就不再加竖向位移了。 */
@keyframes hunter-nav-link-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.site-header.revert-from-solid .nav-link {
  animation: hunter-nav-link-fade 0.36s ease both;
}

.site-header.revert-from-solid .nav-link:first-child {
  animation-delay: 40ms;
}

.site-header.revert-from-solid .nav-link:nth-child(2) {
  animation-delay: 80ms;
}

.site-header.revert-from-solid .nav-link:nth-child(3) {
  animation-delay: 0.12s;
}

.site-header.revert-from-solid .nav-link:nth-child(4) {
  animation-delay: 0.16s;
}

.site-header.revert-from-solid .nav-link:nth-child(5) {
  animation-delay: 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .site-header.revert-from-solid .nav-link {
    animation: none;
  }
}