/* ==================== BACKGROUND CONTAINER ==================== */
.bg-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    z-index: 0;
}

/* Основной градиент - глубокий космос */
.bg-base {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(139, 0, 50, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(180, 130, 50, 0.2) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(20, 0, 40, 0.8) 0%, transparent 70%),
        radial-gradient(ellipse at 10% 90%, rgba(194, 22, 49, 0.15) 0%, transparent 40%),
        radial-gradient(ellipse at 90% 10%, rgba(212, 168, 83, 0.1) 0%, transparent 40%),
        linear-gradient(135deg, #0a0510 0%, #0d0a18 25%, #120815 50%, #0a0510 75%, #08040d 100%);
}

/* Звёзды */
.stars {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #fff, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, #fff, transparent),
        radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 230px 80px, #fff, transparent),
        radial-gradient(2px 2px at 300px 150px, rgba(212,168,83,0.8), transparent),
        radial-gradient(1px 1px at 350px 200px, #fff, transparent),
        radial-gradient(2px 2px at 420px 50px, rgba(194,22,49,0.7), transparent),
        radial-gradient(1px 1px at 500px 180px, #fff, transparent),
        radial-gradient(2px 2px at 580px 90px, rgba(255,255,255,0.7), transparent);
    background-size: 600px 300px;
    animation: starsMove 100s linear infinite;
}

.stars:nth-child(2) {
    background-size: 400px 200px;
    opacity: 0.5;
    animation-duration: 150s;
    animation-direction: reverse;
}

@keyframes starsMove {
    from { transform: translateY(0); }
    to { transform: translateY(-300px); }
}

/* Туманность */
.nebula {
    position: absolute;
    top: 0; left: 0;
    width: 200%; height: 200%;
    background: 
        radial-gradient(ellipse at 30% 20%, rgba(194, 22, 49, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(212, 168, 83, 0.06) 0%, transparent 45%),
        radial-gradient(ellipse at 20% 80%, rgba(100, 50, 150, 0.05) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 30%, rgba(194, 22, 49, 0.04) 0%, transparent 35%);
    animation: nebulaFloat 30s ease-in-out infinite;
    filter: blur(40px);
}

@keyframes nebulaFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-5%, 3%) scale(1.05); }
    66% { transform: translate(3%, -5%) scale(0.95); }
}

/* Светящиеся орбы */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    animation: orbFloat 20s ease-in-out infinite;
}

.orb-1 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(194, 22, 49, 0.3) 0%, transparent 70%);
    top: -100px; left: -100px;
    animation-delay: 0s;
}

.orb-2 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(212, 168, 83, 0.25) 0%, transparent 70%);
    bottom: -50px; right: -50px;
    animation-delay: -7s;
    animation-duration: 25s;
}

.orb-3 {
    width: 250px; height: 250px;
    background: radial-gradient(circle, rgba(150, 50, 100, 0.2) 0%, transparent 70%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -14s;
    animation-duration: 30s;
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
    25% { transform: translate(30px, -30px) scale(1.1); opacity: 0.8; }
    50% { transform: translate(-20px, 20px) scale(0.9); opacity: 0.5; }
    75% { transform: translate(20px, 30px) scale(1.05); opacity: 0.7; }
}

/* Лучи света */
.light-burst {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 150%; height: 150%;
    background: 
        conic-gradient(from 0deg at 50% 50%,
            transparent 0deg,
            rgba(212, 168, 83, 0.03) 10deg,
            transparent 20deg,
            rgba(194, 22, 49, 0.02) 40deg,
            transparent 50deg,
            rgba(212, 168, 83, 0.03) 70deg,
            transparent 80deg,
            rgba(194, 22, 49, 0.02) 100deg,
            transparent 110deg,
            rgba(212, 168, 83, 0.03) 130deg,
            transparent 140deg,
            rgba(194, 22, 49, 0.02) 160deg,
            transparent 170deg,
            rgba(212, 168, 83, 0.03) 190deg,
            transparent 200deg,
            rgba(194, 22, 49, 0.02) 220deg,
            transparent 230deg,
            rgba(212, 168, 83, 0.03) 250deg,
            transparent 260deg,
            rgba(194, 22, 49, 0.02) 280deg,
            transparent 290deg,
            rgba(212, 168, 83, 0.03) 310deg,
            transparent 320deg,
            rgba(194, 22, 49, 0.02) 340deg,
            transparent 360deg
        );
    animation: lightBurstRotate 60s linear infinite;
}

@keyframes lightBurstRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Летящие частицы */
.particles-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
}

.flying-particle {
    position: absolute;
    width: 3px; height: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 6px 2px currentColor;
    animation: particleFly linear infinite;
    opacity: 0;
}

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

/* Сетка */
.grid-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(212, 168, 83, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 168, 83, 0.03) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}

/* Виньетка */
.vignette {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
}