/* ==========================================
   ANIMATED STARS BACKGROUND
   Fondo de estrellas animado profesional
   ========================================== */

.stars-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    z-index: 0;
    background: linear-gradient(180deg, #0a0118 0%, #0f0a1f 50%, #1a0b2e 100%);
    overflow: hidden;
    pointer-events: none;
}

/* Estrellas pequeñas (más débiles) */
.stars-small {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
}

.stars-small::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 1px;
    background: white;
    border-radius: 50%;
    box-shadow: 
        120px 50px 0 0 rgba(255, 255, 255, 0.3),
        240px 120px 0 0 rgba(255, 255, 255, 0.2),
        360px 80px 0 0 rgba(255, 255, 255, 0.4),
        480px 200px 0 0 rgba(255, 255, 255, 0.25),
        600px 30px 0 0 rgba(255, 255, 255, 0.3),
        720px 160px 0 0 rgba(255, 255, 255, 0.2),
        840px 90px 0 0 rgba(255, 255, 255, 0.35),
        960px 220px 0 0 rgba(255, 255, 255, 0.3),
        1080px 70px 0 0 rgba(255, 255, 255, 0.25),
        1200px 180px 0 0 rgba(255, 255, 255, 0.2),
        1320px 110px 0 0 rgba(255, 255, 255, 0.3),
        1440px 40px 0 0 rgba(255, 255, 255, 0.4),
        1560px 150px 0 0 rgba(255, 255, 255, 0.25),
        150px 300px 0 0 rgba(255, 255, 255, 0.2),
        270px 380px 0 0 rgba(255, 255, 255, 0.3),
        390px 420px 0 0 rgba(255, 255, 255, 0.25),
        510px 340px 0 0 rgba(255, 255, 255, 0.35),
        630px 460px 0 0 rgba(255, 255, 255, 0.2),
        750px 320px 0 0 rgba(255, 255, 255, 0.3),
        870px 400px 0 0 rgba(255, 255, 255, 0.25),
        990px 280px 0 0 rgba(255, 255, 255, 0.4),
        1110px 480px 0 0 rgba(255, 255, 255, 0.2),
        1230px 360px 0 0 rgba(255, 255, 255, 0.3),
        1350px 440px 0 0 rgba(255, 255, 255, 0.25),
        1470px 300px 0 0 rgba(255, 255, 255, 0.35),
        180px 560px 0 0 rgba(255, 255, 255, 0.3),
        300px 620px 0 0 rgba(255, 255, 255, 0.2),
        420px 580px 0 0 rgba(255, 255, 255, 0.25),
        540px 640px 0 0 rgba(255, 255, 255, 0.4),
        660px 520px 0 0 rgba(255, 255, 255, 0.3),
        780px 600px 0 0 rgba(255, 255, 255, 0.2),
        900px 540px 0 0 rgba(255, 255, 255, 0.35),
        1020px 680px 0 0 rgba(255, 255, 255, 0.25),
        1140px 560px 0 0 rgba(255, 255, 255, 0.3),
        1260px 620px 0 0 rgba(255, 255, 255, 0.2),
        1380px 580px 0 0 rgba(255, 255, 255, 0.4),
        1500px 640px 0 0 rgba(255, 255, 255, 0.25),
        90px 720px 0 0 rgba(255, 255, 255, 0.3),
        210px 780px 0 0 rgba(255, 255, 255, 0.2),
        330px 740px 0 0 rgba(255, 255, 255, 0.35),
        450px 800px 0 0 rgba(255, 255, 255, 0.25);
    animation: twinkle-small 3s infinite ease-in-out;
}

/* Estrellas medianas (brillo medio) */
.stars-medium {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
}

.stars-medium::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 
        200px 100px 0 0 rgba(255, 255, 255, 0.6),
        400px 250px 0 0 rgba(255, 255, 255, 0.5),
        600px 150px 0 0 rgba(255, 255, 255, 0.7),
        800px 350px 0 0 rgba(255, 255, 255, 0.55),
        1000px 200px 0 0 rgba(255, 255, 255, 0.6),
        1200px 300px 0 0 rgba(255, 255, 255, 0.5),
        1400px 180px 0 0 rgba(255, 255, 255, 0.65),
        300px 450px 0 0 rgba(255, 255, 255, 0.6),
        500px 550px 0 0 rgba(255, 255, 255, 0.55),
        700px 480px 0 0 rgba(255, 255, 255, 0.7),
        900px 520px 0 0 rgba(255, 255, 255, 0.5),
        1100px 600px 0 0 rgba(255, 255, 255, 0.6),
        1300px 450px 0 0 rgba(255, 255, 255, 0.65),
        1500px 580px 0 0 rgba(255, 255, 255, 0.55),
        150px 700px 0 0 rgba(255, 255, 255, 0.6),
        350px 750px 0 0 rgba(255, 255, 255, 0.5),
        550px 680px 0 0 rgba(255, 255, 255, 0.7);
    animation: twinkle-medium 4s infinite ease-in-out;
}

/* Estrellas grandes (muy brillantes) */
.stars-large {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
}

.stars-large::before {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    box-shadow: 
        300px 180px 0 0 rgba(255, 255, 255, 0.9),
        700px 280px 0 0 rgba(255, 255, 255, 0.95),
        1100px 120px 0 0 rgba(255, 255, 255, 0.85),
        1500px 220px 0 0 rgba(255, 255, 255, 0.9),
        400px 480px 0 0 rgba(255, 255, 255, 0.95),
        800px 420px 0 0 rgba(255, 255, 255, 0.85),
        1200px 520px 0 0 rgba(255, 255, 255, 0.9),
        200px 650px 0 0 rgba(255, 255, 255, 0.95),
        600px 720px 0 0 rgba(255, 255, 255, 0.85),
        1000px 680px 0 0 rgba(255, 255, 255, 0.9);
    animation: twinkle-large 5s infinite ease-in-out;
}

/* Estrellas fugaces */
.shooting-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
    opacity: 0;
}

.shooting-star::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, transparent 100%);
    transform: translateX(-80px) rotate(-45deg);
}

.shooting-star:nth-child(1) {
    top: 15%;
    left: 80%;
    animation: shooting 3s linear infinite;
}

.shooting-star:nth-child(2) {
    top: 25%;
    left: 75%;
    animation: shooting 4s linear infinite 1s;
}

.shooting-star:nth-child(3) {
    top: 35%;
    left: 85%;
    animation: shooting 5s linear infinite 2s;
}

.shooting-star:nth-child(4) {
    top: 45%;
    left: 70%;
    animation: shooting 6s linear infinite 3s;
}

.shooting-star:nth-child(5) {
    top: 55%;
    left: 90%;
    animation: shooting 4.5s linear infinite 1.5s;
}

.shooting-star:nth-child(6) {
    top: 65%;
    left: 78%;
    animation: shooting 5.5s linear infinite 2.5s;
}

.shooting-star:nth-child(7) {
    top: 20%;
    left: 88%;
    animation: shooting 3.5s linear infinite 0.5s;
}

.shooting-star:nth-child(8) {
    top: 50%;
    left: 82%;
    animation: shooting 4.8s linear infinite 3.5s;
}

/* Animaciones */
@keyframes twinkle-small {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

@keyframes twinkle-medium {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.9; }
}

@keyframes twinkle-large {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

@keyframes shooting {
    0% {
        transform: translateX(0) translateY(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(-600px) translateY(600px);
        opacity: 0;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .stars-small::before {
        box-shadow: 
            60px 50px 0 0 rgba(255, 255, 255, 0.3),
            120px 120px 0 0 rgba(255, 255, 255, 0.2),
            180px 80px 0 0 rgba(255, 255, 255, 0.4),
            240px 200px 0 0 rgba(255, 255, 255, 0.25),
            300px 30px 0 0 rgba(255, 255, 255, 0.3),
            360px 160px 0 0 rgba(255, 255, 255, 0.2),
            75px 300px 0 0 rgba(255, 255, 255, 0.2),
            135px 380px 0 0 rgba(255, 255, 255, 0.3),
            195px 420px 0 0 rgba(255, 255, 255, 0.25),
            255px 340px 0 0 rgba(255, 255, 255, 0.35);
    }
    
    .stars-medium::before {
        box-shadow: 
            100px 100px 0 0 rgba(255, 255, 255, 0.6),
            200px 250px 0 0 rgba(255, 255, 255, 0.5),
            300px 150px 0 0 rgba(255, 255, 255, 0.7),
            150px 450px 0 0 rgba(255, 255, 255, 0.6),
            250px 550px 0 0 rgba(255, 255, 255, 0.55);
    }
    
    .stars-large::before {
        box-shadow: 
            150px 180px 0 0 rgba(255, 255, 255, 0.9),
            350px 280px 0 0 rgba(255, 255, 255, 0.95),
            200px 480px 0 0 rgba(255, 255, 255, 0.95);
    }
}