/* === COSMIC BACKGROUND ANIMATIONS === */
@keyframes twinkle-1 {
    0% { opacity: 0.3; filter: brightness(0.6); }
    20% { opacity: 1; filter: brightness(1.8); }
    40% { opacity: 0.2; filter: brightness(0.4); }
    60% { opacity: 0.8; filter: brightness(1.2); }
    80% { opacity: 0.1; filter: brightness(0.3); }
    100% { opacity: 0.4; filter: brightness(0.7); }
}

@keyframes twinkle-2 {
    0% { opacity: 0.6; filter: brightness(1); }
    15% { opacity: 0.2; filter: brightness(0.4); }
    35% { opacity: 1; filter: brightness(1.6); }
    55% { opacity: 0.3; filter: brightness(0.5); }
    75% { opacity: 0.9; filter: brightness(1.4); }
    100% { opacity: 0.5; filter: brightness(0.8); }
}

@keyframes twinkle-3 {
    0% { opacity: 0.4; filter: brightness(0.7); }
    25% { opacity: 0.1; filter: brightness(0.2); }
    45% { opacity: 0.7; filter: brightness(1.1); }
    65% { opacity: 1; filter: brightness(1.7); }
    85% { opacity: 0.2; filter: brightness(0.4); }
    100% { opacity: 0.6; filter: brightness(0.9); }
}

@keyframes twinkle-4 {
    0% { opacity: 0.7; filter: brightness(1.1); }
    30% { opacity: 0.3; filter: brightness(0.5); }
    50% { opacity: 0.1; filter: brightness(0.3); }
    70% { opacity: 1; filter: brightness(1.5); }
    90% { opacity: 0.4; filter: brightness(0.6); }
    100% { opacity: 0.8; filter: brightness(1.2); }
}

@keyframes twinkle-5 {
    0% { opacity: 0.2; filter: brightness(0.4); }
    18% { opacity: 0.8; filter: brightness(1.3); }
    38% { opacity: 0.4; filter: brightness(0.6); }
    58% { opacity: 0.1; filter: brightness(0.2); }
    78% { opacity: 1; filter: brightness(1.8); }
    100% { opacity: 0.3; filter: brightness(0.5); }
}

/* === COSMIC BACKGROUND CONTAINER === */
.cosmic-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.cosmic-base {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0a0512 0%, #1a0b2e 30%, #2d1b69 70%, #4c1d95 100%);
    z-index: 1;
}

.cosmic-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.star-layer-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(1.5px 1.5px at 15% 25%, #fbbf24, transparent),
        radial-gradient(1px 1px at 85% 15%, #d97706, transparent),
        radial-gradient(0.8px 0.8px at 5% 50%, rgba(168, 85, 247, 0.7), transparent);
    background-size: 180px 180px, 220px 220px, 160px 160px;
    background-repeat: repeat;
    animation: twinkle-1 3.7s ease-in-out infinite;
}

.star-layer-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(1px 1px at 45% 60%, rgba(251, 191, 36, 0.9), transparent),
        radial-gradient(1px 1px at 35% 45%, #d946ef, transparent),
        radial-gradient(0.9px 0.9px at 95% 65%, #8b5cf6, transparent);
    background-size: 200px 200px, 170px 170px, 140px 140px;
    background-repeat: repeat;
    animation: twinkle-2 4.3s ease-in-out infinite 0.8s;
}

.star-layer-3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(1.2px 1.2px at 75% 35%, #f59e0b, transparent),
        radial-gradient(0.8px 0.8px at 65% 75%, rgba(217, 70, 239, 0.8), transparent);
    background-size: 190px 190px, 210px 210px;
    background-repeat: repeat;
    animation: twinkle-3 5.1s ease-in-out infinite 1.6s;
}

.star-layer-4 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(0.8px 0.8px at 25% 80%, rgba(245, 158, 11, 0.8), transparent),
        radial-gradient(1.1px 1.1px at 55% 20%, #a855f7, transparent);
    background-size: 230px 230px, 150px 150px;
    background-repeat: repeat;
    animation: twinkle-4 6.2s ease-in-out infinite 2.4s;
}

.star-layer-5 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(0.7px 0.7px at 12% 8%, #fbbf24, transparent),
        radial-gradient(0.6px 0.6px at 88% 92%, #8b5cf6, transparent),
        radial-gradient(0.9px 0.9px at 67% 33%, rgba(251, 191, 36, 0.6), transparent),
        radial-gradient(0.5px 0.5px at 23% 67%, rgba(168, 85, 247, 0.5), transparent);
    background-size: 250px 250px, 180px 180px, 200px 200px, 170px 170px;
    background-repeat: repeat;
    animation: twinkle-5 4.8s ease-in-out infinite 3.2s;
}