/* ========== 主题切换圆形展开(View Transitions API) ========== */

/* 取消所有 UA 默认的动画和颜色混合 */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  display: block;
}

/* 无论什么方向,始终让 new (新状态) 在上方,并从小圆扩展覆盖 old */
::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 2;
  animation: tt-expand 0.4s ease-out forwards;
  /* 显式给伪元素加上不透明背景,防止截图透明导致看不到覆盖效果 */
  background: var(--color-paper-theme);
}

/* CSS 变量由 JS 注入到 html style 中 */
@keyframes tt-expand {
  from {
    clip-path: circle(0px at var(--tt-x) var(--tt-y));
  }
  to {
    clip-path: circle(var(--tt-r) at var(--tt-x) var(--tt-y));
  }
}

/* 在 View Transition 期间强制禁用所有 CSS 过渡,
   确保 VT 回调中 toggle dark class 后截图捕获的是最终颜色。 */
html.is-theme-transitioning,
html.is-theme-transitioning *,
html.is-theme-transitioning *::before,
html.is-theme-transitioning *::after {
  transition: none;
}