/* 背景容器，具有模糊效果 */
#background-container {
    position: fixed; /* 固定位置，不随页面滚动 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* 背景图片覆盖整个容器 */
    background-position: center; /* 背景图片居中 */
    background-repeat: no-repeat; /* 背景图片不重复 */
    transition: opacity 0.8s ease-in-out; /* 透明度过渡效果 */
    z-index: -2; /* 将背景置于最底层 */
    opacity: 0; /* 初始透明度为0，用于加载动画 */
    filter: blur(10px); /* 模糊效果 */
    transform: scale(1.1); /* 轻微放大以避免模糊边缘 */
}
#background-container.loaded {
    opacity: 1; /* 加载完成后完全显示 */
}

/* 背景遮罩，用于增强文本对比度 */
#background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.15); /* 半透明黑色遮罩 */
    z-index: -1; /* 位于背景和内容之间 */
    transition: background-color 0.3s ease-in-out; /* 颜色过渡效果 */
}

/* 用于交叉淡入淡出过渡的伪元素 */
#background-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0; /* 初始透明度为0 */
    transition: opacity 0.8s ease-in-out; /* 透明度过渡效果 */
}

/* 当背景正在渐变时，显示伪元素 */
#background-container.is-fading::before {
    opacity: 1;
}