/* 弥散光背景 - 超明显版 */

/* 基础背景容器 */
.page-bg-container {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

/* 背景图层 */
.page-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    pointer-events: none;
    image-rendering: optimizeQuality;
    will-change: opacity;
}

.page-bg.active {
    opacity: 1;
    transition: opacity 0.8s ease-in-out;
}

.page-bg.fade-out {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

/* 背景图遮罩层 */
.page-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.15) 30%, rgba(255,255,255,0.4) 70%, rgba(255,255,255,0.6) 100%);
    pointer-events: none;
}

/* 弥散光效果层1 - 大光斑，覆盖背景图之上 */
.page-bg-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    background:
        radial-gradient(ellipse 90vmin 75vmin at 5% 5%, rgba(255, 120, 150, 0.80), transparent 45%),
        radial-gradient(ellipse 85vmin 70vmin at 95% 8%, rgba(255, 180, 130, 0.78), transparent 45%),
        radial-gradient(ellipse 95vmin 80vmin at 92% 92%, rgba(120, 175, 255, 0.75), transparent 45%),
        radial-gradient(ellipse 80vmin 65vmin at 5% 95%, rgba(200, 150, 255, 0.72), transparent 45%);
    background-attachment: fixed;
}

/* 弥散光效果层2 - 中间光斑，增强层次感 */
.page-bg-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 11;
    background:
        radial-gradient(ellipse 75vmin 60vmin at 48% 50%, rgba(255, 210, 180, 0.65), transparent 50%),
        radial-gradient(ellipse 65vmin 52vmin at 52% 48%, rgba(165, 200, 255, 0.60), transparent 50%),
        radial-gradient(circle 55vmin at 30% 30%, rgba(255, 150, 180, 0.55), transparent 45%),
        radial-gradient(circle 60vmin at 70% 70%, rgba(135, 170, 255, 0.50), transparent 45%);
    background-attachment: fixed;
    mix-blend-mode: overlay;
}

/* 纯弥散光模式 - 没有背景图时 */
body.bg-diffuse-glow .page-bg-container {
    background: #ffffff;
}

body.bg-diffuse-glow .page-bg-container::before {
    background:
        radial-gradient(ellipse 95vmin 80vmin at 3% 3%, rgba(255, 110, 140, 0.85), transparent 42%),
        radial-gradient(ellipse 90vmin 75vmin at 97% 5%, rgba(255, 175, 120, 0.82), transparent 42%),
        radial-gradient(ellipse 100vmin 85vmin at 95% 95%, rgba(110, 170, 255, 0.80), transparent 42%),
        radial-gradient(ellipse 85vmin 70vmin at 3% 97%, rgba(195, 145, 255, 0.78), transparent 42%);
}

body.bg-diffuse-glow .page-bg-container::after {
    background:
        radial-gradient(ellipse 80vmin 65vmin at 50% 50%, rgba(255, 205, 175, 0.70), transparent 48%),
        radial-gradient(ellipse 70vmin 55vmin at 50% 48%, rgba(160, 195, 255, 0.65), transparent 48%),
        radial-gradient(circle 60vmin at 28% 28%, rgba(255, 145, 175, 0.60), transparent 42%),
        radial-gradient(circle 65vmin at 72% 72%, rgba(130, 165, 255, 0.55), transparent 42%);
}

/* 超大屏幕优化 */
@media (min-width: 1920px) {
    .page-bg-container::before {
        background:
            radial-gradient(ellipse 1500px 1200px at 5% 5%, rgba(255, 120, 150, 0.80), transparent 45%),
            radial-gradient(ellipse 1400px 1100px at 95% 8%, rgba(255, 180, 130, 0.78), transparent 45%),
            radial-gradient(ellipse 1600px 1300px at 92% 92%, rgba(120, 175, 255, 0.75), transparent 45%),
            radial-gradient(ellipse 1300px 1000px at 5% 95%, rgba(200, 150, 255, 0.72), transparent 45%);
    }
    body.bg-diffuse-glow .page-bg-container::before {
        background:
            radial-gradient(ellipse 1600px 1300px at 3% 3%, rgba(255, 110, 140, 0.85), transparent 42%),
            radial-gradient(ellipse 1500px 1200px at 97% 5%, rgba(255, 175, 120, 0.82), transparent 42%),
            radial-gradient(ellipse 1700px 1400px at 95% 95%, rgba(110, 170, 255, 0.80), transparent 42%),
            radial-gradient(ellipse 1400px 1100px at 3% 97%, rgba(195, 145, 255, 0.78), transparent 42%);
    }
}

/* 移动端优化 */
@media (max-width: 768px) {
    .page-bg-container::before {
        background:
            radial-gradient(ellipse 100vmin 85vmin at 3% 3%, rgba(255, 120, 150, 0.85), transparent 40%),
            radial-gradient(ellipse 95vmin 80vmin at 97% 5%, rgba(255, 180, 130, 0.82), transparent 40%),
            radial-gradient(ellipse 105vmin 90vmin at 95% 95%, rgba(120, 175, 255, 0.80), transparent 40%),
            radial-gradient(ellipse 90vmin 75vmin at 3% 97%, rgba(200, 150, 255, 0.78), transparent 40%);
    }
    .page-bg-container::after {
        background:
            radial-gradient(ellipse 85vmin 70vmin at 50% 50%, rgba(255, 210, 180, 0.70), transparent 45%),
            radial-gradient(ellipse 75vmin 60vmin at 50% 48%, rgba(165, 200, 255, 0.65), transparent 45%);
    }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
    body.bg-diffuse-glow .page-bg-container {
        background: #1a1a2e;
    }
    .page-bg-container::before {
        background:
            radial-gradient(ellipse 90vmin 75vmin at 5% 5%, rgba(255, 80, 110, 0.60), transparent 45%),
            radial-gradient(ellipse 85vmin 70vmin at 95% 8%, rgba(255, 130, 80, 0.58), transparent 45%),
            radial-gradient(ellipse 95vmin 80vmin at 92% 92%, rgba(80, 130, 255, 0.55), transparent 45%),
            radial-gradient(ellipse 80vmin 65vmin at 5% 95%, rgba(160, 100, 255, 0.52), transparent 45%);
    }
    .page-bg::after {
        background: radial-gradient(circle at center, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0.6) 100%);
    }
}

/* 旧版body伪元素样式 - 兼容没有page-bg-container的页面 */
body.bg-diffuse-glow {
    background: #ffffff;
    position: relative;
    min-height: 100vh;
}

body.bg-diffuse-glow::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse 90vmin 75vmin at 5% 5%, rgba(255, 120, 150, 0.80), transparent 45%),
        radial-gradient(ellipse 85vmin 70vmin at 95% 8%, rgba(255, 180, 130, 0.78), transparent 45%),
        radial-gradient(ellipse 95vmin 80vmin at 92% 92%, rgba(120, 175, 255, 0.75), transparent 45%),
        radial-gradient(ellipse 80vmin 65vmin at 5% 95%, rgba(200, 150, 255, 0.72), transparent 45%);
    background-attachment: fixed;
}

body.bg-diffuse-glow::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse 75vmin 60vmin at 48% 50%, rgba(255, 210, 180, 0.65), transparent 50%),
        radial-gradient(ellipse 65vmin 52vmin at 52% 48%, rgba(165, 200, 255, 0.60), transparent 50%),
        radial-gradient(circle 55vmin at 30% 30%, rgba(255, 150, 180, 0.55), transparent 45%),
        radial-gradient(circle 60vmin at 70% 70%, rgba(135, 170, 255, 0.50), transparent 45%);
    background-attachment: fixed;
    mix-blend-mode: overlay;
}

/* 超大屏幕优化 */
@media (min-width: 1920px) {
    body.bg-diffuse-glow::before {
        background:
            radial-gradient(ellipse 1500px 1200px at 5% 5%, rgba(255, 120, 150, 0.80), transparent 45%),
            radial-gradient(ellipse 1400px 1100px at 95% 8%, rgba(255, 180, 130, 0.78), transparent 45%),
            radial-gradient(ellipse 1600px 1300px at 92% 92%, rgba(120, 175, 255, 0.75), transparent 45%),
            radial-gradient(ellipse 1300px 1000px at 5% 95%, rgba(200, 150, 255, 0.72), transparent 45%);
    }
}

/* 移动端优化 */
@media (max-width: 768px) {
    body.bg-diffuse-glow::before {
        background:
            radial-gradient(ellipse 100vmin 85vmin at 3% 3%, rgba(255, 120, 150, 0.85), transparent 40%),
            radial-gradient(ellipse 95vmin 80vmin at 97% 5%, rgba(255, 180, 130, 0.82), transparent 40%),
            radial-gradient(ellipse 105vmin 90vmin at 95% 95%, rgba(120, 175, 255, 0.80), transparent 40%),
            radial-gradient(ellipse 90vmin 75vmin at 3% 97%, rgba(200, 150, 255, 0.78), transparent 40%);
    }
    body.bg-diffuse-glow::after {
        background:
            radial-gradient(ellipse 85vmin 70vmin at 50% 50%, rgba(255, 210, 180, 0.70), transparent 45%),
            radial-gradient(ellipse 75vmin 60vmin at 50% 48%, rgba(165, 200, 255, 0.65), transparent 45%);
    }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
    body.bg-diffuse-glow {
        background: #1a1a2e;
    }
    body.bg-diffuse-glow::before {
        background:
            radial-gradient(ellipse 90vmin 75vmin at 5% 5%, rgba(255, 80, 110, 0.60), transparent 45%),
            radial-gradient(ellipse 85vmin 70vmin at 95% 8%, rgba(255, 130, 80, 0.58), transparent 45%),
            radial-gradient(ellipse 95vmin 80vmin at 92% 92%, rgba(80, 130, 255, 0.55), transparent 45%),
            radial-gradient(ellipse 80vmin 65vmin at 5% 95%, rgba(160, 100, 255, 0.52), transparent 45%);
    }
}