/* 主题切换扩散动画 */

/* 基础过渡设置 */
html {
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* View Transitions API 支持 */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 1;
}

::view-transition-new(root) {
    z-index: 9999;
}

/* 扩散动画遮罩层 */
.theme-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 99999;
    overflow: hidden;
}

.theme-transition-overlay::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 切换到暗色模式 - 黑色从右上角扩散 */
.theme-transition-overlay.active-dark::before {
    background: #1a1a1a;
    transform: scale(3000);
}

/* 切换到亮色模式 - 白色从右上角扩散 */
.theme-transition-overlay.active-light::before {
    background: #ffffff;
    transform: scale(3000);
}

/* 兼容性：不支持 View Transitions API 的浏览器使用 CSS 渐变过渡 */
@supports not (view-transition-name: root) {
    html.theme-transitioning {
        transition: background-color 0.6s ease, color 0.6s ease;
    }

    body.theme-transitioning {
        transition: background-color 0.6s ease, color 0.6s ease;
    }

    /* 使用伪元素实现扩散效果 */
    .theme-transition-fallback {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 99999;
        overflow: hidden;
    }

    .theme-transition-fallback .ripple {
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        border-radius: 50%;
        transform: translate(50%, -50%);
        transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                    height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .theme-transition-fallback .ripple.expand {
        width: 300vmax;
        height: 300vmax;
    }

    .theme-transition-fallback .ripple.dark {
        background: radial-gradient(circle at center, #1a1a1a 0%, #1a1a1a 100%);
    }

    .theme-transition-fallback .ripple.light {
        background: radial-gradient(circle at center, #ffffff 0%, #ffffff 100%);
    }
}

/* 平滑的颜色过渡 */
html[data-theme="dark"],
html[data-theme="light"] {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 防止过渡期间的布局抖动 */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 所有元素的颜色过渡 */
* {
    transition: background-color 0.3s ease, 
                border-color 0.3s ease, 
                color 0.3s ease,
                box-shadow 0.3s ease;
}

/* 排除不需要过渡的元素 */
img, video, iframe, canvas, svg {
    transition: none;
}