/* ==========================================================================
   Cosmic Celestial Crescent Moon, Golden Mountains, Twinkling Stars & 5 Meteors
   ========================================================================== */

.stars-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: radial-gradient(ellipse at 65% 25%, #181233 0%, #0a0818 50%, #030207 100%);
}

/* Glowing Sleek Crescent Moon Element (Mặt trăng khuyết mềm mại) */
.stars-container::before {
    content: '';
    position: absolute;
    top: 14%;
    right: 20%;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    box-shadow: 22px 18px 0 0 rgba(240, 223, 205, 0.95);
    filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.65)) drop-shadow(0 0 50px rgba(142, 84, 233, 0.4));
    opacity: 0.92;
    animation: moonFloat 14s ease-in-out infinite alternate;
}

@keyframes moonFloat {
    0% { transform: translateY(0) rotate(-3deg); filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.5)); }
    100% { transform: translateY(-18px) rotate(3deg); filter: drop-shadow(0 0 45px rgba(212, 175, 55, 0.8)); }
}

/* Shooting Stars / Meteors (5 Active Meteors across the sky) */
.stars-container::after {
    content: '';
    position: absolute;
    top: 2%;
    left: 60%;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 
        0 0 12px #fff, 
        -25px -25px 25px rgba(212,175,55,0.9), 
        -70px -70px 50px rgba(255,255,255,0.5);
    animation: meteor 6s linear infinite;
    opacity: 0;
}

.shooting-star-extra-1 {
    position: absolute;
    top: 18%;
    left: 40%;
    width: 3px;
    height: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff, -20px -20px 20px rgba(142,84,233,0.9), -50px -50px 35px rgba(255,255,255,0.5);
    animation: meteor 8.5s linear infinite 2s;
    opacity: 0;
}

.shooting-star-extra-2 {
    position: absolute;
    top: 8%;
    left: 80%;
    width: 3px;
    height: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff, -20px -20px 20px rgba(212,175,55,0.9), -50px -50px 35px rgba(255,255,255,0.5);
    animation: meteor 7s linear infinite 4s;
    opacity: 0;
}

.shooting-star-extra-3 {
    position: absolute;
    top: 25%;
    left: 70%;
    width: 3px;
    height: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 12px #fff, -22px -22px 22px rgba(240,223,205,0.9), -55px -55px 40px rgba(212,175,55,0.6);
    animation: meteor 6.5s linear infinite 1.2s;
    opacity: 0;
}

.shooting-star-extra-4 {
    position: absolute;
    top: 5%;
    left: 30%;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 14px #fff, -28px -28px 28px rgba(142,84,233,0.9), -65px -65px 45px rgba(255,255,255,0.6);
    animation: meteor 9s linear infinite 5.5s;
    opacity: 0;
}

@keyframes meteor {
    0% { transform: rotate(215deg) translateX(0); opacity: 1; width: 4px; }
    30% { transform: rotate(215deg) translateX(-650px); opacity: 0; width: 160px; }
    100% { transform: rotate(215deg) translateX(-650px); opacity: 0; }
}

/* Layer 1: Dense Tiny Stars */
.stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 
        10vw 20vh #fff, 25vw 80vh rgba(255,255,255,0.9), 40vw 30vh #fff, 
        55vw 70vh rgba(255,255,255,0.7), 70vw 15vh #fff, 85vw 60vh #fff, 
        95vw 45vh rgba(255,255,255,0.8), 5vw 90vh #fff, 15vw 40vh #fff,
        35vw 85vh rgba(255,255,255,0.9), 50vw 10vh #fff, 65vw 50vh #fff,
        80vw 95vh rgba(255,255,255,0.7), 90vw 25vh #fff, 20vw 55vh #fff,
        30vw 5vh #fff, 45vw 95vh rgba(255,255,255,0.9), 60vw 20vh #fff,
        75vw 75vh #fff, 88vw 5vh #fff, 12vw 65vh #fff, 38vw 15vh rgba(255,255,255,0.8),
        52vw 82vh #fff, 68vw 38vh #fff, 82vw 12vh rgba(255,255,255,0.9);
    animation: twinkle 3s ease-in-out infinite alternate;
}

/* Layer 2: Glowing Golden Celestial Stars */
.stars-medium {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: 
        15vw 15vh #f0dfcd, 35vw 75vh rgba(212,175,55,0.8), 
        50vw 25vh #f0dfcd, 65vw 85vh rgba(212,175,55,0.9), 
        80vw 35vh #f0dfcd, 90vw 70vh #f0dfcd,
        8vw 50vh rgba(212,175,55,0.8), 28vw 90vh #f0dfcd,
        48vw 60vh #f0dfcd, 78vw 10vh #f0dfcd,
        93vw 20vh rgba(212,175,55,0.7), 22vw 30vh #f0dfcd,
        62vw 5vh #f0dfcd, 85vw 90vh #f0dfcd;
    animation: twinkle-medium 4.5s ease-in-out infinite alternate;
}

/* Layer 3: Large Pulsing Sparkle Stars */
.stars-large {
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 5px;
    background: transparent;
    border-radius: 50%;
    box-shadow: 
        8vw 8vh rgba(255,255,255,0.95), 42vw 55vh rgba(255,255,255,1), 
        72vw 45vh rgba(255,255,255,0.9), 88vw 85vh rgba(255,255,255,1),
        23vw 72vh rgba(255,255,255,0.85), 57vw 18vh rgba(255,255,255,0.9),
        18vw 28vh rgba(212,175,55,0.9), 74vw 78vh rgba(212,175,55,0.95);
    animation: twinkle-large 4s ease-in-out infinite alternate;
}

/* Twinkling Keyframes */
@keyframes twinkle {
    0% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 0.4; transform: scale(0.9); }
}

@keyframes twinkle-medium {
    0% { opacity: 0.9; transform: scale(1); filter: drop-shadow(0 0 3px rgba(212,175,55,0.5)); }
    50% { opacity: 0.3; transform: scale(0.7); }
    100% { opacity: 1; transform: scale(1.1); filter: drop-shadow(0 0 8px rgba(212,175,55,0.9)); }
}

@keyframes twinkle-large {
    0% { opacity: 0.4; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.4); box-shadow: 0 0 15px rgba(255,255,255,0.9), 0 0 30px rgba(212,175,55,0.6); }
    100% { opacity: 0.4; transform: scale(0.9); }
}

/* Deep Space Cosmic Nebulae */
.nebula-purple {
    position: absolute;
    top: 5%;
    left: -15%;
    width: 65vw;
    height: 65vw;
    background: radial-gradient(circle, rgba(142, 84, 233, 0.18) 0%, rgba(92, 59, 196, 0.08) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    animation: rotateNebula 50s linear infinite;
}

.nebula-gold {
    position: absolute;
    bottom: -15%;
    right: -15%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, rgba(184, 134, 11, 0.05) 45%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    animation: rotateNebula-reverse 70s linear infinite;
}

@keyframes rotateNebula {
    from { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); }
    to { transform: rotate(360deg) scale(1); }
}

@keyframes rotateNebula-reverse {
    from { transform: rotate(360deg) scale(1.1); }
    50% { transform: rotate(180deg) scale(1); }
    to { transform: rotate(0deg) scale(1.1); }
}

/* Glowing Gold Mountain Range SVG Overlay (Fixed at bottom of screen) */
.mountain-range-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 260px;
    z-index: 1;
    pointer-events: none;
}

.mountain-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.mountain-peak-gold {
    fill: url(#mountainGoldGrad);
    stroke: #FFD700;
    stroke-width: 3.5px;
    filter: drop-shadow(0 0 15px #FFD700) drop-shadow(0 0 35px rgba(255, 215, 0, 0.85));
    opacity: 0.95;
}

.mountain-peak-violet {
    fill: url(#mountainGoldBackGrad);
    stroke: #D4AF37;
    stroke-width: 2.5px;
    filter: drop-shadow(0 0 12px #D4AF37) drop-shadow(0 0 30px rgba(212, 175, 55, 0.8));
    opacity: 0.9;
}