/**
 * 动态氛围背景层
 * 多层动态效果叠加：星空、萤火虫、光晕、云影
 * 保持低饱和度，与现有米白背景协调
 */

/* ==================== 背景容器 ==================== */
.ambient-bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

/* ==================== 星空层 ==================== */
.starfield {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: starfield-appear 2s ease-out forwards;
}

@keyframes starfield-appear {
    to { opacity: 1; }
}

.star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    animation: star-twinkle 3s ease-in-out infinite;
}

.star.small {
    width: 2px;
    height: 2px;
}

.star.medium {
    width: 2px;
    height: 2px;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

.star.large {
    width: 3px;
    height: 3px;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

@keyframes star-twinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* 星星分布 - 屏幕上方40%区域 */
.star:nth-child(1) { top: 5%; left: 8%; animation-delay: 0s; }
.star:nth-child(2) { top: 8%; left: 20%; animation-delay: 0.4s; }
.star:nth-child(3) { top: 3%; left: 35%; animation-delay: 0.8s; }
.star:nth-child(4) { top: 12%; left: 48%; animation-delay: 1.2s; }
.star:nth-child(5) { top: 6%; left: 62%; animation-delay: 1.6s; }
.star:nth-child(6) { top: 15%; left: 75%; animation-delay: 2s; }
.star:nth-child(7) { top: 18%; left: 88%; animation-delay: 0.2s; }
.star:nth-child(8) { top: 22%; left: 12%; animation-delay: 0.6s; }
.star:nth-child(9) { top: 25%; left: 32%; animation-delay: 1s; }
.star:nth-child(10) { top: 10%; left: 92%; animation-delay: 1.4s; }
.star:nth-child(11) { top: 28%; left: 5%; animation-delay: 1.8s; }
.star:nth-child(12) { top: 20%; left: 55%; animation-delay: 0.3s; }
.star:nth-child(13) { top: 30%; left: 78%; animation-delay: 0.7s; }
.star:nth-child(14) { top: 8%; left: 45%; animation-delay: 1.1s; }
.star:nth-child(15) { top: 35%; left: 68%; animation-delay: 1.5s; }

/* ==================== 萤火虫层 ==================== */
.fireflies {
    position: absolute;
    width: 100%;
    height: 100%;
}

.firefly {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #f39c12 0%, transparent 70%);
    border-radius: 50%;
    animation: firefly-float 8s ease-in-out infinite;
    opacity: 0;
}

@keyframes firefly-float {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }
    10% {
        opacity: 0.8;
    }
    50% {
        opacity: 0.4;
        transform: translate(30px, -50px);
    }
    90% {
        opacity: 0.7;
    }
    100% {
        opacity: 0;
        transform: translate(-20px, -100px);
    }
}

.firefly:nth-child(1) { bottom: 25%; left: 10%; animation-delay: 0s; }
.firefly:nth-child(2) { bottom: 30%; left: 25%; animation-delay: 1.5s; }
.firefly:nth-child(3) { bottom: 20%; left: 42%; animation-delay: 3s; }
.firefly:nth-child(4) { bottom: 35%; left: 60%; animation-delay: 4.5s; }
.firefly:nth-child(5) { bottom: 28%; left: 78%; animation-delay: 2s; }
.firefly:nth-child(6) { bottom: 40%; left: 35%; animation-delay: 5s; }
.firefly:nth-child(7) { bottom: 22%; left: 52%; animation-delay: 6s; }
.firefly:nth-child(8) { bottom: 32%; left: 88%; animation-delay: 1s; }

/* ==================== 柔和光晕层 ==================== */
.ambient-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.12;
    animation: glow-breathe 6s ease-in-out infinite;
}

.ambient-glow.warm {
    background: radial-gradient(circle, rgba(231, 76, 60, 0.8) 0%, transparent 70%);
    width: 400px;
    height: 400px;
    top: -100px;
    left: -100px;
}

.ambient-glow.cool {
    background: radial-gradient(circle, rgba(52, 152, 219, 0.8) 0%, transparent 70%);
    width: 350px;
    height: 350px;
    bottom: -50px;
    right: -50px;
    animation-delay: 3s;
}

.ambient-glow.accent {
    background: radial-gradient(circle, rgba(243, 156, 18, 0.6) 0%, transparent 70%);
    width: 250px;
    height: 250px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 1.5s;
}

@keyframes glow-breathe {
    0%, 100% { opacity: 0.1; transform: scale(1); }
    50% { opacity: 0.18; transform: scale(1.1); }
}

/* ==================== 动态云影层 ==================== */
.clouds {
    position: absolute;
    width: 200%;
    height: 100%;
    top: 0;
    left: 0;
    animation: clouds-drift 120s linear infinite;
    opacity: 0.06;
}

@keyframes clouds-drift {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.cloud {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    border-radius: 50%;
    filter: blur(20px);
}

.cloud:nth-child(1) {
    width: 300px;
    height: 80px;
    top: 10%;
    left: 10%;
}

.cloud:nth-child(2) {
    width: 200px;
    height: 60px;
    top: 18%;
    left: 30%;
}

.cloud:nth-child(3) {
    width: 400px;
    height: 100px;
    top: 5%;
    left: 60%;
}

.cloud:nth-child(4) {
    width: 250px;
    height: 70px;
    top: 25%;
    left: 5%;
}

.cloud:nth-child(5) {
    width: 180px;
    height: 50px;
    top: 15%;
    left: 75%;
}

/* ==================== 响应式 ==================== */
@media (max-width: 768px) {
    .starfield { display: none; }
    .fireflies { display: none; }
    .ambient-glow { opacity: 0.08; transform: scale(0.8); }
    .clouds { animation-duration: 180s; }
}

/* 弱motion用户关闭动画 */
@media (prefers-reduced-motion: reduce) {
    .starfield,
    .star,
    .firefly,
    .ambient-glow,
    .clouds {
        animation: none;
    }
    .starfield { opacity: 0.5; }
}