.stars-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

    .stars-layer.layer1 {
        z-index: 0;
    }

    .stars-layer.layer2 {
        z-index: 1;
    }

    .stars-layer.layer3 {
        z-index: 2;
    }

.star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    animation: twinkle var(--duration) infinite;
}

    .star.bright {
        box-shadow: 0 0 6px 2px rgba(255,255,255,0.5);
    }

    .star.colored {
        background: var(--star-color);
        box-shadow: 0 0 8px 3px var(--star-color);
    }

@keyframes twinkle {
    0%, 100% {
        opacity: 0.2;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

 .aurora {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg, transparent 0%, rgba(100, 200, 255, 0.04) 20%, rgba(150, 100, 255, 0.06) 40%, rgba(100, 255, 200, 0.04) 60%, rgba(255, 150, 200, 0.03) 80%, transparent 100% );
    animation: auroraMove 12s ease-in-out infinite;
    pointer-events: none;
    z-index: 0; }

.aurora2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 45%;
    background: linear-gradient(160deg, transparent 0%, rgba(200, 100, 255, 0.03) 30%, rgba(100, 200, 255, 0.04) 60%, transparent 100% );
    animation: auroraMove2 18s ease-in-out infinite;
    pointer-events: none;
    z-index: 0; }

@keyframes auroraMove {
    0%, 100% {
        transform: translateX(-15%) skewX(-8deg) scaleY(1);
        opacity: 0.6;
    }

    50% {
        transform: translateX(15%) skewX(8deg) scaleY(1.1);
        opacity: 0.85;     }
}

@keyframes auroraMove2 {
    0%, 100% {
        transform: translateX(10%) skewX(5deg);
        opacity: 0.35;
    }

    50% {
        transform: translateX(-10%) skewX(-5deg);
        opacity: 0.6;     }
}

 .nebula {
    position: fixed;
    border-radius: 50%;
    background: radial-gradient(circle, var(--color) 0%, transparent 70%);
    filter: blur(48px);     pointer-events: none;
    z-index: 0;     animation: nebulaPulse 10s ease-in-out infinite;
}

@keyframes nebulaPulse {
    0%, 100% {
        opacity: 0.28;         transform: scale(1) rotate(0deg);
    }

    50% {
        opacity: 0.55;         transform: scale(1.15) rotate(5deg);
    }
}

 .glow-orb {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, var(--glow-color) 0%, transparent 70%);
    filter: blur(32px);     animation: orbFloat 20s ease-in-out infinite;
    z-index: 1; }

@keyframes orbFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(50px, -30px) scale(1.1);
    }

    50% {
        transform: translate(-30px, 50px) scale(0.9);
    }

    75% {
        transform: translate(-50px, -20px) scale(1.05);
    }
}

 .particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2; }

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255,236,210,0.9), transparent);
    border-radius: 50%;
    animation: particleFloat 8s linear infinite;
}

    .particle.glow {
        width: 6px;
        height: 6px;
        box-shadow: 0 0 10px 3px rgba(255,236,210,0.4);
    }

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) translateX(0) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(-100px) translateX(30px) rotate(360deg);
        opacity: 0;
    }
}

 .meteors {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1; }

.meteor {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #fff;
    border-radius: 50%;
}

    .meteor::after {
        content: '';
        position: absolute;
        width: 150px;
        height: 2px;
        background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,200,150,0.5), transparent);
        transform: translateX(-150px);
    }

    .meteor.golden::after {
        background: linear-gradient(90deg, rgba(255,220,150,1), rgba(255,180,100,0.6), transparent);
    }

 .trail {
    position: fixed;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,236,210,0.8), transparent);
    animation: trailFade 1s forwards;
    z-index: 5;
}

    .trail.colorful {
        background: radial-gradient(circle, var(--trail-color), transparent);
    }

@keyframes trailFade {
    to {
        opacity: 0;
        transform: scale(0);
    }
}

 .ripple {
    position: fixed;
    border: 2px solid rgba(255, 236, 210, 0.6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 6;
    animation: ripple 0.8s ease-out forwards;
}

    .ripple.double {
        box-shadow: 0 0 0 4px rgba(255, 212, 163, 0.3);
    }

@keyframes ripple {
    to {
        width: 120px;
        height: 120px;
        opacity: 0;
        margin: -60px;
    }
}

 .sparkle {
    position: fixed;
    pointer-events: none;
    z-index: 7;
    font-size: 14px;
    animation: sparkleFade 1s forwards;
}

@keyframes sparkleFade {
    0% {
        opacity: 1;
        transform: scale(1) translate(0, 0);
    }

    100% {
        opacity: 0;
        transform: scale(0.3) translate(var(--tx), var(--ty));
    }
}

 .raindrop {
    position: absolute;
    width: 2px;
    height: 20px;
    background: linear-gradient(180deg, transparent, rgba(150,200,255,0.6));
    animation: rain 1s linear infinite;
}

@keyframes rain {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

 .snowflake {
    position: absolute;
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    animation: snow 8s linear infinite;
}

@keyframes snow {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

 .sakura {
    position: absolute;
    font-size: 18px;
    animation: sakuraFall 10s linear infinite;
}

@keyframes sakuraFall {
    0% {
        transform: translateY(-20px) translateX(0) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) translateX(100px) rotate(720deg);
        opacity: 0;
    }
}

 .firefly {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(255,255,150,0.9), transparent);
    border-radius: 50%;
    box-shadow: 0 0 10px 5px rgba(255,255,150,0.4);
    animation: fireflyFloat 8s ease-in-out infinite;
}

@keyframes fireflyFloat {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0.3;
    }

    25% {
        transform: translate(50px, -30px);
        opacity: 1;
    }

    50% {
        transform: translate(-30px, -60px);
        opacity: 0.5;
    }

    75% {
        transform: translate(-50px, -20px);
        opacity: 1;
    }
}

 .star-rain-drop {
    position: absolute;
    animation: starRainFall 5s linear infinite;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
}

@keyframes starRainFall {
    0% {
        transform: translateY(-30px) translateX(0) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 0.8;
    }

    100% {
        transform: translateY(100vh) translateX(var(--sway)) rotate(360deg);
        opacity: 0;
    }
}

 .name-stardust {
    position: fixed;
    pointer-events: none;
    z-index: 100;
    color: #ffd700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 182, 193, 0.5);
    animation: nameStardustFloat 3.5s ease-out forwards;
}

@keyframes nameStardustFloat {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.3) rotate(0deg);
    }

    20% {
        opacity: 1;
        transform: translate(calc(var(--float-x) * 0.2), calc(var(--float-y) * 0.2)) scale(1.2) rotate(30deg);
    }

    100% {
        opacity: 0;
        transform: translate(var(--float-x), var(--float-y)) scale(0) rotate(180deg);
    }
}

 .mini-constellation {
    position: fixed;
    pointer-events: none;
    z-index: 50;
    animation: constellationFade 3s ease-out forwards;
    filter: drop-shadow(0 0 4px rgba(255, 236, 210, 0.6));
}

.mini-constellation .constellation-star {
    filter: drop-shadow(0 0 3px #fff);
    animation: constellationStarPulse 1.5s ease-in-out infinite;
}

@keyframes constellationFade {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    15% {
        opacity: 1;
        transform: scale(1);
    }

    80% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

@keyframes constellationStarPulse {
    0%, 100% {
        r: 1.5;
    }

    50% {
        r: 3;
    }
}

 .star-burst-particle {
    position: fixed;
    pointer-events: none;
    z-index: 60;
    animation: starBurstFly 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    filter: drop-shadow(0 0 4px currentColor);
}

@keyframes starBurstFly {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(var(--bx), var(--by)) rotate(var(--rot)) scale(0.2);
    }
}

 .enhanced-meteor {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 12px 4px rgba(255, 215, 0, 0.6), 0 0 30px 8px rgba(255, 182, 193, 0.3);
}

    .enhanced-meteor::after {
        content: '';
        position: absolute;
        width: 200px;
        height: 3px;
        background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,215,0,0.6), rgba(255,182,193,0.3), transparent);
        transform: translateX(-200px);
        border-radius: 2px;
    }

.meteor-star-tail {
    position: absolute;
    font-size: 8px;
    color: rgba(255, 215, 0, 0.7);
    animation: meteorTailFloat 0.6s ease-out forwards;
    pointer-events: none;
}

@keyframes meteorTailFloat {
    0% {
        opacity: 0.8;
        transform: translate(0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-30px, -20px) scale(0.3);
    }
}

/* ── 飘心 ── */
.heart-float {
    position: fixed;
    pointer-events: none;
    z-index: 50;
    animation: heartRise 5s ease-out forwards;
    filter: drop-shadow(0 0 8px rgba(255,107,157,0.8));
}

@keyframes heartRise {
    0%   { opacity: 0; transform: translateY(0) scale(0.5) rotate(-10deg); }
    15%  { opacity: 1; }
    80%  { opacity: 0.8; }
    100% { opacity: 0; transform: translateY(-120px) scale(1.2) rotate(15deg); }
}

/* ── 烟火 ── */
.firework {
    position: fixed;
    pointer-events: none;
    z-index: 60;
}

.firework-particle {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    animation: fireworkFly 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes fireworkFly {
    0%   { opacity: 1; transform: translate(0, 0) scale(1); }
    70%  { opacity: 0.8; }
    100% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(0.2); }
}

/* ── 光芒射线 ── */
.light-ray {
    position: fixed;
    width: 3px;
    height: 200px;
    background: linear-gradient(180deg, rgba(255,215,0,0.9) 0%, rgba(255,182,193,0.6) 50%, transparent 100%);
    border-radius: 3px;
    pointer-events: none;
    z-index: 8;
    opacity: 0;
    transform-origin: top center;
    filter: blur(1px);
}

.light-ray.show {
    animation: lightRayFade 2s ease-out forwards;
}

@keyframes lightRayFade {
    0%   { opacity: 0; transform: scaleY(0) rotate(var(--ray-angle, 0deg)); }
    20%  { opacity: 0.8; transform: scaleY(1) rotate(var(--ray-angle, 0deg)); }
    100% { opacity: 0; transform: scaleY(1.3) rotate(var(--ray-angle, 0deg)); }
}

/* ── 涟漪环 ── */
.ring-wave {
    position: fixed;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255,182,193,0.7);
    border-radius: 50%;
    pointer-events: none;
    z-index: 8;
    margin: -5px 0 0 -5px;
    opacity: 0;
}

.ring-wave.show {
    animation: ringExpand 2s ease-out forwards;
}

@keyframes ringExpand {
    0%   { opacity: 0.8; transform: scale(0); }
    60%  { opacity: 0.4; }
    100% { opacity: 0; transform: scale(12); }
}

/* ── 螺旋星 ── */
.spiral-star {
    position: fixed;
    pointer-events: none;
    z-index: 9;
    opacity: 0;
}

.spiral-star.show {
    animation: spiralAscend 4s ease-out forwards;
}

@keyframes spiralAscend {
    0%   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
    100% { opacity: 0; transform: translate(40px, -100px) rotate(720deg) scale(0.2); }
}

/* ── 金色粒子 ── */
.golden-particle {
    position: fixed;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, #ffd700, rgba(255,182,193,0.4));
    border-radius: 50%;
    pointer-events: none;
    z-index: 8;
    box-shadow: 0 0 8px 2px rgba(255,215,0,0.5);
    animation: goldenFall 3s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

@keyframes goldenFall {
    0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
    80%  { opacity: 0.7; }
    100% { opacity: 0; transform: translateY(100vh) rotate(540deg); }
}