/* ===================================================== */
/* ========= 沉浸式背景层样式 (明亮聚焦版) ============= */
/* ===================================================== */

/* 默认隐藏 */
.immersive-bg-layer {
    display: none;
}

/* 仅在桌面端生效 */
@media (min-width: 769px) {
    
    /* 1. 网页底色：深灰色 */
    html body:not(.fullscreen-active) {
        background-color: #2b2b2b !important; 
        background: #2b2b2b !important;
    }

    .immersive-bg-layer {
        display: block;
        
        /* 定位与层级 */
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 1; 
        
        /* 禁止鼠标事件 */
        pointer-events: none;
        
        /* 图片填充方式 */
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;
        
        /* 3. 视觉特效 */
        opacity: 0; 
        /* 保持高清(0px)和鲜艳(1.2) */
        filter: blur(0px) saturate(1.5); 
        transform: scale(1.0); 
        
        /* 4. 渐变蒙版 (保持柔和聚焦) */
        /* 边缘透明(露出灰底) -> 中间显示图片 */
        -webkit-mask-image: linear-gradient(
            to right, 
            transparent 0%,     
            black 45%,          
            black 55%,          
            transparent 100%    
        );
        
        mask-image: linear-gradient(
            to right, 
            transparent 0%, 
            black 45%, 
            black 55%, 
            transparent 100%
        );
        
        /* 动画过渡 */
        transition: opacity 1.5s ease-out;
    }

    /* 状态类 */
    .immersive-bg-layer.loaded {
        /*  1.0 (完全不透明) */
        /* 这样中间的图片就会显示原本的亮度，不会被底色染暗 */
        opacity: 1.0 !important; 
    }

    /* 全屏模式下自动隐藏 */
    body.fullscreen-active .immersive-bg-layer {
        opacity: 0 !important;
        transition: opacity 0.3s ease;
    }
}

/* ===================================================== */
/* ========= 底部区域防穿透 ============================ */
/* ===================================================== */

#recommendations-container {
    position: relative !important;
    z-index: 10 !important;
    background-color: #ffffff !important;
    box-shadow: 0 -5px 30px rgba(0,0,0,0.3) !important; 
}

#footer-container, 
footer, 
.footer {
    position: relative !important;
    z-index: 10 !important;
    background-color: #1a1a1a !important; 
    opacity: 1 !important;
}

@media (max-width: 768px) {
    html body:not(.fullscreen-active) {
        background-color: #f0f2f5 !important; 
    }
    #recommendations-container {
        z-index: 10 !important;
        background-color: #fff !important;
    }
    #footer-container {
        background-color: #1a1a1a !important;
    }
}