/* ═══════════════════════════════════════════════════════
   🌌 COSMIC BACKGROUND MODULE
   Stars + Shooting Comets Animation
   ═══════════════════════════════════════════════════════ */

/* Контейнер звёзд - фиксированный на весь экран */
.stars-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse at bottom, #0d1b2a 0%, #020810 100%);
}

/* Звёзды */
.star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    animation: twinkle var(--duration, 3s) ease-in-out infinite;
    opacity: 0;
}

@keyframes twinkle {
    0%, 100% { 
        opacity: 0; 
        transform: scale(0.5); 
    }
    50% { 
        opacity: var(--brightness, 0.5); 
        transform: scale(1); 
    }
}

/* Комета / Падающая звезда */
.shooting-star {
    position: absolute;
    width: 150px;
    height: 2px;
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.8), rgba(34, 211, 238, 0.3), transparent);
    border-radius: 50%;
    transform: rotate(-45deg);
    opacity: 0;
    filter: blur(0.5px);
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
}

.shooting-star::before {
    content: '';
    position: absolute;
    left: 0;
    top: -1px;
    width: 8px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px #22d3ee, 0 0 20px #22d3ee;
}

@keyframes shootStar {
    0% { 
        opacity: 0; 
        transform: rotate(-45deg) translateX(0); 
    }
    10% { 
        opacity: 1; 
    }
    80% { 
        opacity: 0.8; 
    }
    100% { 
        opacity: 0; 
        transform: rotate(-45deg) translateX(-800px); 
    }
}

/* Все контейнеры поверх звёзд */
.page-wrapper,
.main-content,
.app-header,
header {
    position: relative;
    z-index: 1;
}