/* ========== 图片背景样式 ========== */
.image_bc {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url("../images/bc/sea1.jpg");
    background-size: cover;
    min-height: 100vh;
}

/* ========== 渐变色背景样式 ========== */
.jianbian_bc {
    background: linear-gradient(90deg,
    #8B5FBF 0%, /* 左侧紫色 */ #6C63FF 50%, /* 中间蓝色 */ #8B5FBF 100% /* 右侧紫色 */
    );
}

/* ========== 动态闪烁星空背景 ========== */
/* ========== 避免导航栏遮挡问题 ========== */

/* 确保导航栏有足够的z-index来遮挡流星 */
.navbar {
    position: relative;
    z-index: 1050; /* Bootstrap默认导航栏z-index是1030 */
}

/* 确保页面内容区域也有适当的z-index */
.container {
    position: relative;
    z-index: 1; /* 内容区域在背景之上，但低于导航栏 */
}

/* 基础背景层：深蓝色渐变模拟夜空 */
.star_bc {
    background: linear-gradient(to bottom, #000033 0%, #000066 100%);
    background-size: cover;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    z-index: 0; /* 背景层最低 */
}

/* 确保伪元素也在背景层 */
/* 星星层 */
/* 动态闪烁的大星星层 */
.star_bc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0; /* 与背景层相同 */

    /* 创建多个径向渐变作为星星 */
    /* 每个星星单独设置，方便后续添加不同动画 */
    background-image: /* 第一组星星 - 中等闪烁速度 */ radial-gradient(2px 2px at 20px 30px, #ffffff, transparent),
    radial-gradient(2px 2px at 40px 70px, #eeeeee, transparent),
    radial-gradient(2px 2px at 90px 40px, #ffffff, transparent),
    radial-gradient(2px 2px at 130px 80px, #ffffff, transparent),
    radial-gradient(3px 3px at 160px 30px, #dddddd, transparent),
    radial-gradient(2px 2px at 200px 90px, #ffffff, transparent),
    radial-gradient(3px 3px at 250px 40px, #eeeeee, transparent),
    radial-gradient(2px 2px at 280px 120px, #ffffff, transparent),
        /* 第二组星星 - 慢速闪烁 */ radial-gradient(3px 3px at 320px 60px, #eeeeee, transparent),
    radial-gradient(2px 2px at 350px 150px, #ffffff, transparent),
    radial-gradient(3px 3px at 400px 40px, #dddddd, transparent),
    radial-gradient(2px 2px at 450px 100px, #ffffff, transparent),
        /* 第三组星星 - 快速闪烁 */ radial-gradient(1px 1px at 500px 80px, #ffffff, transparent),
    radial-gradient(1px 1px at 550px 130px, #ffffff, transparent),
    radial-gradient(2px 2px at 600px 50px, #eeeeee, transparent);

    background-size: 650px 650px; /* 增大背景尺寸，容纳更多星星 */
    background-repeat: repeat;

    /* 为星星层添加闪烁动画 */
    animation: starryTwinkle 3s ease-in-out infinite;
}

/* 动态闪烁的小星星层 - 不同步的闪烁 */
.star_bc::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0; /* 与背景层相同 */

    /* 小星星，更密集 */
    background-image: radial-gradient(1px 1px at 60px 120px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 100px 180px, rgba(238, 238, 238, 0.9), transparent),
    radial-gradient(1px 1px at 150px 100px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 200px 150px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 280px 80px, rgba(221, 221, 221, 0.9), transparent),
    radial-gradient(1px 1px at 320px 200px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 380px 120px, rgba(238, 238, 238, 0.9), transparent),
    radial-gradient(1px 1px at 420px 180px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 480px 90px, rgba(221, 221, 221, 0.9), transparent),
    radial-gradient(1px 1px at 520px 160px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 580px 110px, rgba(255, 255, 255, 0.9), transparent);

    background-size: 700px 700px;
    background-repeat: repeat;

    /* 不同步的闪烁动画，创造更自然的效果 */
    animation: starryTwinkle 4s ease-in-out infinite reverse;
}

/* 动态闪烁的关键帧动画 - 有缩放效果 */
@keyframes starryTwinkle {
    0% {
        opacity: 0.6; /* 起始透明度 */
        filter: brightness(0.8) drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
    }
    25% {
        opacity: 0.9; /* 逐渐变亮 */
        filter: brightness(1.1) drop-shadow(0 0 4px rgba(255, 255, 255, 0.7));
    }
    50% {
        opacity: 1; /* 最亮 */
        filter: brightness(1.4) drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
    }
    75% {
        opacity: 0.9; /* 开始变暗 */
        filter: brightness(1.1) drop-shadow(0 0 4px rgba(255, 255, 255, 0.7));
    }
    100% {
        opacity: 0.6; /* 恢复原始 */
        filter: brightness(0.8) drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
    }
}


/*----- 流星层 ----- */
/* 流星应该在背景之上，但低于内容区域和导航栏 */
/* 流星样式 */
.shooting-star {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    z-index: 10; /* 高于背景，低于内容(1000+)和导航栏(1050) */
}

/* 快流星样式 */
.shooting-star.fast {
    width: 2px;
    height: 2px;
    background: white;
    box-shadow: 0 0 10px 2px white;
    filter: brightness(1.2);
}

/* 慢流星样式 */
.shooting-star.slow {
    width: 3px;
    height: 1px;
    background: linear-gradient(90deg, white, transparent);
    box-shadow: 0 0 15px 3px rgba(255, 255, 255, 0.8);
    filter: brightness(1.4);
}

/* 亮流星样式 */
.shooting-star.bright {
    width: 4px;
    height: 2px;
    background: linear-gradient(90deg, #ffffff, #aaddff, transparent);
    box-shadow: 0 0 20px 5px rgba(173, 216, 230, 0.7);
    filter: brightness(1.6);
}

/* ----- 流星动画 ----- */
/* 快速流星动画 */
@keyframes shoot-fast {
    0% {
        transform: translateX(-100px) translateY(0) rotate(30deg);
        opacity: 0.5;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: translateX(100vw) translateY(100px) rotate(30deg);
        opacity: 0;
    }
}

/* 中速流星动画 */
@keyframes shoot-medium {
    0% {
        transform: translateX(-50px) translateY(-50px) rotate(45deg);
        opacity: 0.4;
    }
    30% {
        opacity: 0.9;
    }
    100% {
        transform: translateX(100vw) translateY(100vh) rotate(45deg);
        opacity: 0;
    }
}

/* 慢速流星动画 */
@keyframes shoot-slow {
    0% {
        transform: translateX(-100px) translateY(100px) rotate(60deg);
        opacity: 0.3;
    }
    40% {
        opacity: 0.8;
    }
    100% {
        transform: translateX(100vw) translateY(0) rotate(60deg);
        opacity: 0;
    }
}

/* 斜向流星动画 */
@keyframes shoot-diagonal {
    0% {
        transform: translateX(0) translateY(-100px) rotate(-30deg);
        opacity: 0.5;
    }
    25% {
        opacity: 1;
    }
    100% {
        transform: translateX(100vw) translateY(100vh) rotate(-30deg);
        opacity: 0;
    }
}

/* 确保Flash消息区域也有适当的z-index */
.alert {
    position: relative;
    z-index: 1040; /* 高于内容，但低于导航栏 */
}