/* ============================================================
   Theme switch: center content reveal (custom inject v8)
   View Transitions 圆形扩散基础规则。
   圆心固定网页中心(50% 50%) —— 百分比相对伪元素自身盒，
   任何渲染环境下中心都精确，不依赖 JS 像素坐标。
   ============================================================ */

::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  display: block;
}

/* 新主题内容从网页中心圆形长出（真实页面内容扩散） */
::view-transition-new(root) {
  clip-path: circle(0% at 50% 50%);
  animation: center-content-reveal 0.62s cubic-bezier(0.45, 0, 0.25, 1) both;
}

@keyframes center-content-reveal {
  to {
    clip-path: circle(150% at 50% 50%);
  }
}

/* ============================================================
   背景层在 View Transition 期间并入 root 组（避免独立分层逃逸裁切）
   -----------------------------------------------
   性能优化给 .bg-liquid 加了 will-change + 持续动画 + mix-blend-mode，
   这些会让 View Transitions 把它识别为「独立合成组」，不再被 root 的
   clip-path: circle() 裁切 —— 切换时液体背景会铺满全屏、不随圆形扩散，
   视觉上表现为"黑白转换动画坏了"。
   修复：切换期间（theme-reveal.js 加 .vt-pause）暂停其动画、移除
   will-change，让它被并入 root 一起扩散；切换结束(transition.finished)
   后移除 .vt-pause 恢复正常。
   ============================================================ */
.glass-bg.vt-pause .bg-liquid,
.glass-bg.vt-pause .bg-liquid::before,
.glass-bg.vt-pause .bg-liquid::after {
  animation: none;
  will-change: auto;
}