/* 环境背景：呼吸光晕 + 星光（主页 / zp 共用） */
.ambient-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.ambient-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    will-change: transform, opacity;
}

.ambient-glow--top {
    width: 55vw;
    height: 55vw;
    max-width: 720px;
    max-height: 720px;
    top: -18%;
    right: -12%;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.09) 0%, rgba(0, 242, 254, 0.02) 45%, transparent 70%);
    animation: glow-breathe 9s ease-in-out infinite;
}

.ambient-glow--bottom {
    width: 45vw;
    height: 45vw;
    max-width: 560px;
    max-height: 560px;
    bottom: -10%;
    left: -8%;
    background: radial-gradient(circle, rgba(79, 172, 254, 0.07) 0%, rgba(79, 172, 254, 0.02) 50%, transparent 72%);
    animation: glow-breathe 12s ease-in-out infinite reverse;
    animation-delay: -4s;
}

.ambient-glow--center {
    width: 38vw;
    height: 38vw;
    max-width: 480px;
    max-height: 480px;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(0, 242, 254, 0.04) 0%, transparent 65%);
    animation: glow-breathe-center 14s ease-in-out infinite;
    animation-delay: -2s;
}

@keyframes glow-breathe {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.06); }
}

@keyframes glow-breathe-center {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.65; transform: translate(-50%, -50%) scale(1.1); }
}

.starfield {
    position: absolute;
    inset: 0;
}

.star {
    position: absolute;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px rgba(0, 242, 254, 0.35);
    opacity: 0;
    animation: star-twinkle ease-in-out infinite;
    will-change: opacity, transform;
}

.star--xs { width: 1px; height: 1px; }
.star--sm { width: 1.5px; height: 1.5px; }
.star--md { width: 2px; height: 2px; box-shadow: 0 0 8px rgba(0, 242, 254, 0.45); }
.star--lg {
    width: 2.5px;
    height: 2.5px;
    background: rgba(0, 242, 254, 0.9);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.55), 0 0 20px rgba(0, 242, 254, 0.15);
}

@keyframes star-twinkle {
    0%, 100% { opacity: 0.08; transform: scale(0.85); }
    35% { opacity: 0.35; transform: scale(1); }
    65% { opacity: 0.55; transform: scale(1.15); }
}

body > header,
body > section,
body > main,
body > footer,
body > .main-content,
body > .site-footer {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .ambient-glow,
    .star {
        animation: none !important;
        opacity: 0.25;
    }
}