/* 背景组件样式 - 支持页面级背景配置 */

/* 背景视频基础样式 */
.bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    pointer-events: none;
    opacity: 0.24; /* 设置透明度为0.24 */
}

/* 背景图片层基础样式 */
.bg-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.6;
    z-index: -1;
    pointer-events: none;
}

/* 视频+图片模式时的层级 */
.bg-mode-video-image .bg-video {
    z-index: -3; /* 视频在最后面 */
}

.bg-mode-video-image .bg-image {
    opacity: 0.5;
    z-index: -2; /* 图片在视频前面 */
}

/* 只有图片模式 */
.bg-mode-image-only .bg-image {
    z-index: -1;
    opacity: 0.8; /* 只有图片时可以提高透明度 */
}

/* 只有视频模式 */
.bg-mode-video-only .bg-video {
    z-index: -1;
}

/* DAO特殊背景模式 - 两张图片渐变+视频 */
.bg-mode-dao-special .bg-video {
    z-index: -3; /* 视频在最底层 */
}

.bg-mode-dao-special .bg-image-1 {
    z-index: -2; /* 第一张图片在视频前面 */
    opacity: 0.3;
    animation: daoImageFade 8s ease-in-out infinite;
}

.bg-mode-dao-special .bg-image-2 {
    z-index: -1; /* 第二张图片在最前面 */
    opacity: 0;
    animation: daoImageFade 8s ease-in-out infinite reverse;
}

@keyframes daoImageFade {
    0%, 50% {
        opacity: 0.3;
    }
    100% {
        opacity: 0;
    }
}

/* 确保视频在移动设备上也能正常显示 */
@media (max-width: 768px) {
    .bg-video {
        object-position: center center;
    }
    
    .bg-image {
        background-position: center center;
    }
}

/* 针对不支持视频自动播放的设备 */
.bg-video-fallback .bg-image {
    z-index: -1;
    opacity: 0.8;
}

.bg-video-fallback .bg-video {
    display: none;
}

/* DAO特殊模式下的fallback处理 - 保持视频可见 */
.bg-mode-dao-special.bg-video-fallback .bg-video {
    display: block; /* 在DAO特殊模式下保持视频可见 */
}

/* 渐入动画效果 */
.bg-video,
.bg-image {
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: inherit;
    }
}

/* 背景加载状态 - 避免初始闪烁 */
.bg-loading .bg-video {
    opacity: 1; /* 视频立即可见，避免闪烁 */
    transition: opacity 0.3s ease-in-out;
}

.bg-loading .bg-image {
    opacity: 0; /* 图片等待加载完成 */
    transition: opacity 0.3s ease-in-out;
}

.bg-loaded .bg-video {
    opacity: 1; /* 视频完全不透明 */
}

.bg-loaded .bg-image {
    opacity: 0.6; /* 图片保持透明度，让视频透过 */
}