/*
 * 页面之间的过渡动画（浏览器原生的「跨页面视图过渡」）
 *
 * 点菜单或链接跳到站内另一个页面时：
 * - 侧边栏、底部标签栏原地不动，白色胶囊照常从上一项滑过来
 * - 背景（网格、光晕）保持不动
 * - 标题和正文：旧页面向上轻轻淡出，新页面从下方轻轻浮上来
 *
 * 支持的浏览器：Edge / Chrome 126+、Safari 18.2+；不支持的浏览器照常跳转，只是没有动画。
 * 打开系统「减少动态效果」时，只做淡入淡出，不移动。
 *
 * 注意：日夜切换也用了视图过渡（tech-bg.js，切换期间 html 上有 vt-switching）。
 * 下面给元素起的过渡名字都只在「不是日夜切换」时生效，两者互不影响。
 */

@view-transition {
  navigation: auto;
}

/* ---------- 给参与过渡的部分起名字 ---------- */
html:not(.vt-switching) #nav {
  view-transition-name: site-nav;
}
html:not(.vt-switching) .tabbar {
  view-transition-name: site-tabbar;
}
html:not(.vt-switching) #site-info,
html:not(.vt-switching) #page-site-info,
html:not(.vt-switching) #post-info {
  view-transition-name: page-head;
}
html:not(.vt-switching) #content-inner {
  view-transition-name: page-main;
}

/* ---------- 导航：不做交叉淡化（新页面里胶囊会自己滑过去） ----------
   旧导航原样垫在下面，新导航直接盖在上面：新页面偶尔晚一两帧才画出导航时，看到的还是旧导航，不会闪空 */
::view-transition-group(site-nav),
::view-transition-group(site-tabbar) {
  animation: none;
}
/* 过渡动画里各部分的上下顺序由浏览器决定，可能把滑进来的正文（比如头像卡片）叠到导航上面，
   底部标签栏看起来就像变透明了。这里把导航固定在最上层 */
::view-transition-group(site-nav),
::view-transition-group(site-tabbar) {
  z-index: 100;
}
::view-transition-old(site-nav),
::view-transition-old(site-tabbar),
::view-transition-new(site-nav),
::view-transition-new(site-tabbar) {
  animation: none;
}

/* ---------- 标题和正文 ----------
   - 点菜单换页：顺着菜单方向滑动。往右边的菜单走（首页 → 归档），旧内容向左滑出、新内容从右侧滑入；
     往回走则相反。和底部胶囊、侧边栏胶囊的移动方向一致（方向由 nav.js 加在 html 上：vt-forward / vt-back）
   - 点其他链接（比如文章）：旧内容上移淡出，新内容从下方浮上来
   - 先后进行：旧内容 0.18 秒内完全离开，之后新内容才开始进来，两页内容不会同时出现；
     旧页面离开时由 head 里的 pageswap 小脚本处理：看得见的标题 / 正文改名为 page-head-old / page-main-old，
     留在自己原来的位置离开；屏幕外看不见的不参与过渡，不会凭空闪现 */
::view-transition-group(page-head),
::view-transition-group(page-main),
::view-transition-group(page-head-old),
::view-transition-group(page-main-old) {
  animation: none;
}
::view-transition-old(page-head),
::view-transition-old(page-main),
::view-transition-old(page-head-old),
::view-transition-old(page-main-old) {
  animation: page-out 0.18s cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(page-head),
::view-transition-new(page-main) {
  animation: page-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
/* 正文比标题晚一点点，有层次感 */
::view-transition-new(page-main) {
  animation-delay: 0.26s;
}
html.vt-forward::view-transition-old(page-head),
html.vt-forward::view-transition-old(page-main),
html.vt-forward::view-transition-old(page-head-old),
html.vt-forward::view-transition-old(page-main-old) {
  animation-name: page-out-left;
}
html.vt-forward::view-transition-new(page-head),
html.vt-forward::view-transition-new(page-main) {
  animation-name: page-in-right;
}
html.vt-back::view-transition-old(page-head),
html.vt-back::view-transition-old(page-main),
html.vt-back::view-transition-old(page-head-old),
html.vt-back::view-transition-old(page-main-old) {
  animation-name: page-out-right;
}
html.vt-back::view-transition-new(page-head),
html.vt-back::view-transition-new(page-main) {
  animation-name: page-in-left;
}

/* 其余部分（背景、页脚等）：旧画面原样垫在最下面，等旧内容离开后，新画面在上面 0.2 秒淡入。
   新页面偶尔晚一两帧才画出背景光晕时，透出来的是旧画面，不会闪一下空白；
   背景两边本来一样，这段淡入看起来是不动的，而且很短，没开显卡加速也不卡 */
html:not(.vt-switching)::view-transition-old(root) {
  animation: none;
}
html:not(.vt-switching)::view-transition-new(root) {
  animation: root-in 0.2s ease-out 0.18s both;
  mix-blend-mode: normal;
}
@keyframes root-in {
  from { opacity: 0; }
}

@keyframes page-out {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes page-in {
  from { opacity: 0; transform: translateY(16px); }
}
@keyframes page-out-left {
  to { opacity: 0; transform: translateX(-32px); }
}
@keyframes page-in-right {
  from { opacity: 0; transform: translateX(48px); }
}
@keyframes page-out-right {
  to { opacity: 0; transform: translateX(32px); }
}
@keyframes page-in-left {
  from { opacity: 0; transform: translateX(-48px); }
}

/* 系统开启「减少动态效果」：只淡入淡出 */
@media (prefers-reduced-motion: reduce) {
  @keyframes page-out { to { opacity: 0; } }
  @keyframes page-in { from { opacity: 0; } }
  @keyframes page-out-left { to { opacity: 0; } }
  @keyframes page-in-right { from { opacity: 0; } }
  @keyframes page-out-right { to { opacity: 0; } }
  @keyframes page-in-left { from { opacity: 0; } }
}

/* 通过过渡动画进来的页面，关掉主题自带的入场动画（标题放大、正文上浮、导航下滑等），
   避免和上面的过渡叠在一起；html 上的 vt-page 由主题配置里 inject.head 的小脚本加上 */
html.vt-page #page-header,
html.vt-page #nav,
html.vt-page #content-inner,
html.vt-page #footer,
html.vt-page #site-title,
html.vt-page #site-subtitle {
  animation: none !important;
}

/* 过渡进行中（html 上有 vt-running，过渡结束自动去掉）：暂时关掉底部标签栏的毛玻璃模糊。
   浏览器给带模糊的元素「拍照」时，会把它后面方形的一块背景也拍进去，
   圆角外面就多出一个方框（在小小的标签栏上很明显）；这零点几秒换成颜色接近、更不透明的底色，
   结束后模糊再平滑恢复。侧边栏实测没有这个问题，保持原样，不然夜间会从蓝色玻璃变成灰色 */
:root {
  --liquid-bg-still: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(246, 248, 253, 0.78) 100%);
}
[data-theme='dark'] {
  --liquid-bg-still: linear-gradient(180deg, rgba(32, 40, 68, 0.94) 0%, rgba(16, 22, 42, 0.92) 100%);
}
.tabbar {
  transition: background 0.3s ease, -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s;
}
html.vt-running .tabbar {
  background: var(--liquid-bg-still);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: none;
}

/* 过渡进行中：背景光晕暂停漂浮，把算力留给过渡动画（没开显卡加速的电脑上差别明显） */
html.vt-running .tech-bg__glow {
  animation-play-state: paused;
}

/* 宽屏侧边栏：过渡进行中同样暂时关掉毛玻璃模糊。
   没开显卡加速的电脑上，模糊每一帧都要重算，是过渡卡顿的主要原因（实测关掉后帧率从约 30 提到约 56）。
   这零点几秒换成一张「照着平时样子取色」的静态底色，看起来和开着模糊几乎一样，结束后模糊再接上 */
@media (min-width: 1200px) {
  :root {
    --side-nav-still: linear-gradient(180deg,
      rgb(232, 244, 255) 0%, rgb(226, 241, 254) 15%, rgb(233, 244, 255) 33%,
      rgb(241, 247, 255) 50%, rgb(239, 246, 255) 85%, rgb(236, 243, 255) 100%);
  }
  [data-theme='dark'] {
    --side-nav-still: linear-gradient(180deg,
      rgb(18, 39, 91) 0%, rgb(17, 39, 95) 15%, rgb(16, 33, 76) 33%,
      rgb(15, 25, 53) 50%, rgb(13, 22, 47) 67%, rgb(11, 21, 46) 85%, rgb(10, 19, 45) 100%);
  }
  /* #nav#nav：提高优先级，盖过 nav-glass.css 里各种导航栏状态的写法 */
  html.vt-running #page-header #nav#nav {
    background: var(--side-nav-still);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}