/* ============================================================
   Theme switch: center content reveal (custom inject v12)
   ------------------------------------------------------------
   恢复 View Transitions 原生的「真实页面内容从网页中心圆形漾开」
   动画（用户要求：就要原来的那个）。新主题的页面内容本身被
   clip-path: circle() 从中心 0%→150% 扩散展开，而非盖一片实色圆。

   GPU 强制渲染：
   - 切换期 .vt-pause 冻结背景液体层独立动画，让它并入 root 一起
     被圆形 clip-path 裁切（避免被 VT 拆成独立组逃逸）。
   - 切换期 .switching 关闭卡片/hero 的实时 backdrop-filter，
     减少 VT 两帧快照的光栅化重活（掉帧主因）。
   - 切换期 .vt-gpu 把关键元素推到独立合成层（translateZ(0)/
     will-change），让快照与扩散尽量走 GPU 合成管线。
   ============================================================ */

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

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  display: block;
  /* GPU 强制：让 VT 快照层独立合成，走 GPU 管线而非主线程重排 */
  will-change: transform, clip-path, opacity;
}

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

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

/* ============================================================
   GPU 强制渲染：切换期间关键元素推独立合成层
   ============================================================ */
html.vt-gpu .recent-post-item,
html.vt-gpu .card-widget,
html.vt-gpu #post,
html.vt-gpu #archive,
html.vt-gpu #page-header.full_page {
  transform: translateZ(0);
  will-change: transform;
}

/* ============================================================
   背景层在 View Transition 期间并入 root 组（避免独立分层逃逸裁切）
   ============================================================ */
.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;
}

/* ============================================================
   切换动画期间降开销（掉帧优化 / GPU 减负）
   -----------------------------------------------
   切换 data-theme 的瞬间，16 张卡片 + 全屏 hero 的 backdrop-filter
   会全部重新模糊采样（背后 .bg-liquid 光斑已换），这是切换掉帧主因。
   圆形 reveal 动画期间（html 加 .switching）：
   - 关闭卡片/hero 的 backdrop-filter，免去同步重光栅；
   - 改用接近最终玻璃观感的近似实色背景，动画中新主题卡片稳定不穿帮。
   动画结束移除 .switching，恢复玻璃（重光栅延后到动画结束后）。
   ============================================================ */
html.switching .recent-post-item,
html.switching .card-widget,
html.switching #post,
html.switching #archive {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: linear-gradient(155deg, rgba(250, 252, 255, .96), rgba(240, 245, 252, .94)) !important;
  /* 主题卡片默认 transition:all .3s, 会让 backdrop-filter 从 18px 逐帧
     插值到 none(每帧重新模糊采样 = 掉帧主因), 切换期必须瞬时切换 */
  transition: none !important;
}
html.switching #page-header.full_page {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: linear-gradient(150deg, rgba(140, 158, 196, .92), rgba(170, 184, 214, .90)) !important;
  transition: none !important;
}
html[data-theme='dark'].switching .recent-post-item,
html[data-theme='dark'].switching .card-widget,
html[data-theme='dark'].switching #post,
html[data-theme='dark'].switching #archive {
  background: linear-gradient(160deg, rgba(26, 30, 46, .96), rgba(18, 22, 36, .95)) !important;
  transition: none !important;
}
html[data-theme='dark'].switching #page-header.full_page {
  background: linear-gradient(150deg, rgba(34, 40, 62, .94), rgba(20, 26, 44, .94)) !important;
  transition: none !important;
}