/* ========== 主题切换圆形展开(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;
}

/* VT 期间清除动画残留的 transform,避免创建堆叠上下文(stack context)
   导致 ::view-transition 伪元素无法覆盖可运行代码块区域。

   根因:animate-page-enter 动画用 transform: translateY/scale 做入场,
   动画结束后因 animation-fill-mode: both 保留计算值(transform: none 被浏览器
   序列化为 matrix(1,0,0,1,0,0),仍是"非 none"的 transform)。非 none transform
   会创建堆叠上下文,使 ::view-transition-old/new(root) 顶层伪元素无法正确覆盖
   其内部的 CodeMirror/xterm——圆形展开扫过时代码块直接瞬切而非被圆形揭示。

   is-theme-transitioning 在 startViewTransition 之前添加(OLD/NEW 快照均含此 class),
   故 OLD 与 NEW 快照里 transform 都被清为 none,两者一致,不影响动画效果。 */
html.is-theme-transitioning .animate-page-enter {
  /* !important 必需:animation-fill-mode: both 保留的关键帧值优先级高于普通
     规则,只有 !important 能覆盖,确保 VT 期间 transform 被清为 none。 */
  /* biome-ignore lint/complexity/noImportantStyles: animation-fill-mode: both 保留非 none transform 创建堆叠上下文,仅 !important 可覆盖(详见上方注释) */
  transform: none !important;
}