/**
 * Lycorisradiata Theme - Background Effects Styles
 * 背景效果样式文件
 * Version: 1.8.0
 * 修复：统一动画名称，使用CSS变量控制不同主题的opacity
 */

/* ===================================
   CSS变量定义
   =================================== */
:root {
    /* 亮色主题的opacity值 */
    --orb-opacity-0: 0;
    --orb-opacity-15: 0.55;
    --orb-opacity-30: 0.75;
    --orb-opacity-50: 0.9;
    --orb-opacity-70: 0.65;
    --orb-opacity-85: 0.35;
}

/* 暗色主题的opacity值 */
[data-bs-theme="dark"],
body.dark-mode {
    --orb-opacity-0: 0;
    --orb-opacity-15: 0.35;
    --orb-opacity-30: 0.5;
    --orb-opacity-50: 0.65;
    --orb-opacity-70: 0.45;
    --orb-opacity-85: 0.25;
}

/* ===================================
   通用背景容器样式
   =================================== */
.lycorisradiata-bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -10;
    overflow: hidden;
}

/* ===================================
   光效背景样式
   =================================== */
#light-effects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -10;
    overflow: visible;
}

/* 光斑容器 - 负责动画和位置 */
.light-orb-wrapper {
    position: absolute;
    will-change: transform, opacity;
    transform-origin: center center;
    opacity: 0;
    /* 统一使用同一个动画名称 */
    animation: floatAndPulse 10s infinite ease-in-out;
}

/* 光斑颜色容器 */
.light-orb {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    filter: blur(70px);
    mix-blend-mode: screen;
}

/* 颜色层1 - 当前颜色 */
.light-orb-color-current {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, 
        var(--orb-primary-current, rgba(255, 182, 193, 0.75)) 0%, 
        var(--orb-secondary-current, rgba(255, 105, 180, 0.35)) 40%, 
        transparent 70%);
    opacity: 1;
    transition: opacity 0.9s ease-in-out;
}

/* 颜色层2 - 新颜色 */
.light-orb-color-next {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, 
        var(--orb-primary-next, rgba(255, 182, 193, 0.75)) 0%, 
        var(--orb-secondary-next, rgba(255, 105, 180, 0.35)) 40%, 
        transparent 70%);
    opacity: 0;
    transition: opacity 0.9s ease-in-out;
}

/* 暗色模式下的光斑样式调整（不改变动画） */
[data-bs-theme="dark"] .light-orb,
body.dark-mode .light-orb {
    mix-blend-mode: lighten;
    filter: blur(90px);
}

/* 统一的光斑浮动动画 - 使用CSS变量控制opacity */
@keyframes floatAndPulse {
    0% {
        opacity: var(--orb-opacity-0);
        transform: translate(0, 0) scale(0.6);
    }
    15% {
        opacity: var(--orb-opacity-15);
    }
    30% {
        opacity: var(--orb-opacity-30);
        transform: translate(calc(var(--moveX) * 0.2), calc(var(--moveY) * 0.2)) scale(1);
    }
    50% {
        opacity: var(--orb-opacity-50);
        transform: translate(calc(var(--moveX) * 0.3), calc(var(--moveY) * 0.3)) scale(1.2);
    }
    70% {
        opacity: var(--orb-opacity-70);
        transform: translate(calc(var(--moveX) * 0.15), calc(var(--moveY) * 0.15)) scale(1.1);
    }
    85% {
        opacity: var(--orb-opacity-85);
    }
    100% {
        opacity: var(--orb-opacity-0);
        transform: translate(0, 0) scale(0.6);
    }
}

/* 更平滑的浮动动画（备用） */
@keyframes floatAndPulseSmooth {
    0%, 100% {
        opacity: var(--orb-opacity-70);
        transform: translate(0, 0) scale(0.8);
    }
    25% {
        opacity: var(--orb-opacity-30);
        transform: translate(calc(var(--moveX) * 0.15), calc(var(--moveY) * 0.15)) scale(1);
    }
    50% {
        opacity: var(--orb-opacity-50);
        transform: translate(calc(var(--moveX) * 0.2), calc(var(--moveY) * 0.2)) scale(1.1);
    }
    75% {
        opacity: var(--orb-opacity-30);
        transform: translate(calc(var(--moveX) * 0.15), calc(var(--moveY) * 0.15)) scale(1);
    }
}

/* 呼吸动画（备用） */
@keyframes breathe {
    0%, 100% {
        opacity: var(--orb-opacity-70);
        transform: scale(1);
    }
    50% {
        opacity: var(--orb-opacity-50);
        transform: scale(1.15);
    }
}

/* ===================================
   静态图片背景样式
   =================================== */
.image-background {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    transition: opacity 0.5s ease;
}

/* 图片背景遮罩层 */
.image-background::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    z-index: -9;
}

/* 暗色模式图片遮罩 */
[data-bs-theme="dark"] .image-background::before,
body.dark-mode .image-background::before {
    background: rgba(0, 0, 0, 0.3);
}

/* ===================================
   内容区域增强
   =================================== */
body.bg-effects-active #middle,
body.bg-effects-active .container-fluid,
body.bg-effects-active .container {
    position: relative;
    z-index: 1;
}

/* ===================================
   响应式调整
   =================================== */

/* 移动设备优化 */
@media (max-width: 768px) {
    :root {
        --orb-opacity-15: 0.45;
        --orb-opacity-30: 0.65;
        --orb-opacity-50: 0.75;
        --orb-opacity-70: 0.55;
        --orb-opacity-85: 0.25;
    }
    
    [data-bs-theme="dark"],
    body.dark-mode {
        --orb-opacity-15: 0.25;
        --orb-opacity-30: 0.35;
        --orb-opacity-50: 0.45;
        --orb-opacity-70: 0.35;
        --orb-opacity-85: 0.15;
    }
    
    .light-orb {
        filter: blur(60px);
    }
    
    /* 移动设备上减少动画幅度 */
    @keyframes floatAndPulse {
        0% {
            opacity: var(--orb-opacity-0);
            transform: translate(0, 0) scale(0.8);
        }
        50% {
            opacity: var(--orb-opacity-50);
            transform: translate(calc(var(--moveX) * 0.15), calc(var(--moveY) * 0.15)) scale(1);
        }
        100% {
            opacity: var(--orb-opacity-0);
            transform: translate(0, 0) scale(0.8);
        }
    }
}

/* 大屏幕增强 */
@media (min-width: 1920px) {
    .light-orb {
        filter: blur(90px);
    }
}

/* ===================================
   性能优化
   =================================== */

/* 减少重绘的硬件加速 */
.light-orb,
.light-orb-wrapper,
.light-orb-color-current,
.light-orb-color-next,
#light-effects,
.image-background {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 低性能模式 */
body.low-performance-mode .light-orb-wrapper {
    animation-duration: 15s;
}

body.low-performance-mode .light-orb {
    filter: blur(50px);
}

body.low-performance-mode .light-orb-color-current,
body.low-performance-mode .light-orb-color-next {
    transition-duration: 0.5s !important;
}

body.low-performance-mode #light-effects {
    opacity: 0.9;
}

[data-bs-theme="dark"] body.low-performance-mode #light-effects,
body.dark-mode.low-performance-mode #light-effects {
    opacity: 0.7;
}

/* ===================================
   过渡效果
   =================================== */

/* 背景切换过渡 */
.lycorisradiata-bg-container {
    transition: opacity 0.8s ease;
}

.lycorisradiata-bg-container.fade-out {
    opacity: 0;
}

.lycorisradiata-bg-container.fade-in {
    opacity: 1;
}

/* 页面切换时的保持效果 */
@keyframes maintainState {
    0%, 100% {
        opacity: 1;
    }
}

/* ===================================
   主题切换时的平滑过渡
   =================================== */

/* 防止过渡冲突 */
.light-orb.no-transition {
    transition: none !important;
}

/* 主题切换时保持动画状态 */
.light-orb-wrapper.theme-switching {
    animation-play-state: paused;
}