/*!
 * ys-theme-transition.css — 明暗切换过渡（颜色淡变兜底 + View Transitions 圆形扩散）
 * ==========================================================================
 * 为什么要单独一个文件：
 *   assets/theme/theme.css 是"登录/注册/后台"用的，前台两套模板（default / star）
 *   **从来没有引入过它**，只有 theme.js。于是切换过渡那条规则在前台一直是空转 ——
 *   点按钮等于整页硬跳，看着很生硬。
 *   这里把过渡相关的规则单独拎出来，前台、登录页、后台都能引，且零副作用
 *   （不含任何配色，不会改到别人的外观）。
 *
 * 分两条路：
 *   1. 兜底：html.ys-theme-anim 期间给颜色加 transition（Chrome 以外的浏览器走这条）
 *   2. 优 path：支持 View Transitions 时，theme.js 调 startViewTransition()，
 *      这里把默认的整体交叉淡入掐掉，动画由 JS 用 clip-path 画在
 *      ::view-transition-new(root) 上，视觉上是从按钮位置"漾"开一层新主题。
 *
 * 版本：v1.0（2026-11-06）
 */

/* ---------------- 1. 兜底：颜色淡变 ---------------- */
html.ys-theme-anim,
html.ys-theme-anim body,
html.ys-theme-anim body *,
html.ys-theme-anim body *::before,
html.ys-theme-anim body *::after {
    transition-property: background-color, color, border-color, box-shadow, fill, stroke;
    transition-duration: 320ms;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
    html.ys-theme-anim body,
    html.ys-theme-anim body *,
    html.ys-theme-anim body *::before,
    html.ys-theme-anim body *::after {
        transition-duration: 0s;
    }
}

/* ---------------- 2. 圆形扩散 / 收回（View Transitions） ---------------- */
@media (prefers-reduced-motion: no-preference) {
    /*
     * 默认行为是新旧快照互相交叉淡入，叠在圆形扩散上会发灰、也糊。
     * 这里把动画关掉，让旧快照原地不动、新快照只靠 JS 的 clip-path 露出来。
     */
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
        mix-blend-mode: normal;
    }

    /*
     * 天亮（切回浅色）时是"收回"：深色快照缩回按钮里，浅色从四周合上来。
     * 这就要求旧快照压在新快照上面（默认是新的在上面，缩旧的等于白缩），
     * 所以 theme.js 切换前会给 <html> 挂 .ys-vt-collapse。
     * 这两个规则只作用于过渡伪元素，不影响页面本身。
     */
    html.ys-vt-collapse::view-transition-old(root),
    :root.ys-vt-collapse::view-transition-old(root) {
        z-index: 2;
    }

    html.ys-vt-collapse::view-transition-new(root),
    :root.ys-vt-collapse::view-transition-new(root) {
        z-index: 1;
    }
}