body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    background: radial-gradient(circle at center, #0a001f, #020024, #000);
    animation: breathe 10s infinite alternate;
}
@keyframes breathe {
    0% {
        background: radial-gradient(circle at center, #0a001f, #020024, #000);
    }
    100% {
        background: radial-gradient(circle at center, #12003a, #030034, #000);
    } 
}


.stars-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
    z-index: 1;
}

#layer1 {
    animation: move-stars1 50s linear infinite;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"%3E%3Ccircle cx="10" cy="10" r="1" fill="%23bbbbff" opacity="0.2"/%3E%3Ccircle cx="50" cy="150" r="1.5" fill="%23aabbee" opacity="0.15"/%3E%3Ccircle cx="100" cy="100" r="1.2" fill="%23ccddee" opacity="0.2"/%3E%3Ccircle cx="200" cy="50" r="1" fill="%23ccccff" opacity="0.1"/%3E%3Ccircle cx="150" cy="200" r="1.4" fill="%23ddddff" opacity="0.18"/%3E%3C/svg%3E');
    background-size: repeat;
}

#layer2 {
    animation: move-stars2 70s linear infinite;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"%3E%3Ccircle cx="20" cy="30" r="1.5" fill="%23bbbbff" opacity="0.1"/%3E%3Ccircle cx="100" cy="250" r="1.8" fill="%23aabbee" opacity="0.12"/%3E%3Ccircle cx="150" cy="200" r="1.4" fill="%23ccddee" opacity="0.1"/%3E%3Ccircle cx="250" cy="100" r="1.6" fill="%23ccccff" opacity="0.08"/%3E%3Ccircle cx="300" cy="50" r="1.7" fill="%23ddddff" opacity="0.15"/%3E%3C/svg%3E');
    background-size: repeat;
    opacity: 0.7;
}

#layer3 {
    animation: move-stars3 100s linear infinite;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"%3E%3Ccircle cx="50" cy="50" r="1.2" fill="%23bbbbff" opacity="0.1"/%3E%3Ccircle cx="200" cy="350" r="1.8" fill="%23aabbee" opacity="0.12"/%3E%3Ccircle cx="350" cy="300" r="1" fill="%23ccddee" opacity="0.1"/%3E%3Ccircle cx="300" cy="100" r="1.5" fill="%23ccccff" opacity="0.08"/%3E%3Ccircle cx="400" cy="200" r="1.6" fill="%23ddddff" opacity="0.1"/%3E%3C/svg%3E');
    background-size: repeat;
    opacity: 0.5;
}

/* Анимация движений для звезд */
@keyframes move-stars1 {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(-500px, 500px);
    }
}

@keyframes move-stars2 {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(-300px, 300px);
    }
}

@keyframes move-stars3 {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(-700px, 700px);
    }
}

/* Туманность */
.nebula {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0));
    filter: blur(150px);
    animation: rotate-nebula 120s linear infinite, nebula-colors 240s infinite alternate;
    z-index: 0;
}

/* Анимация вращения */
@keyframes rotate-nebula {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Суперплавная смена цвета с минимальными изменениями */
@keyframes nebula-colors {
    0% {
        background: radial-gradient(circle, rgba(255, 150, 255, 0.07), rgba(0, 0, 0, 0));
    }
    5% {
        background: radial-gradient(circle, rgba(240, 140, 250, 0.07), rgba(0, 0, 0, 0));
    }
    10% {
        background: radial-gradient(circle, rgba(230, 130, 245, 0.07), rgba(0, 0, 0, 0));
    }
    15% {
        background: radial-gradient(circle, rgba(220, 120, 240, 0.07), rgba(0, 0, 0, 0));
    }
    20% {
        background: radial-gradient(circle, rgba(200, 110, 235, 0.07), rgba(0, 0, 0, 0));
    }
    25% {
        background: radial-gradient(circle, rgba(180, 100, 230, 0.07), rgba(0, 0, 0, 0));
    }
    30% {
        background: radial-gradient(circle, rgba(150, 90, 225, 0.07), rgba(0, 0, 0, 0));
    }
    35% {
        background: radial-gradient(circle, rgba(120, 80, 220, 0.07), rgba(0, 0, 0, 0));
    }
    40% {
        background: radial-gradient(circle, rgba(90, 70, 215, 0.07), rgba(0, 0, 0, 0));
    }
    45% {
        background: radial-gradient(circle, rgba(70, 100, 220, 0.07), rgba(0, 0, 0, 0));
    }
    50% {
        background: radial-gradient(circle, rgba(90, 140, 240, 0.07), rgba(0, 0, 0, 0));
    }
    55% {
        background: radial-gradient(circle, rgba(110, 180, 255, 0.07), rgba(0, 0, 0, 0));
    }
    60% {
        background: radial-gradient(circle, rgba(140, 210, 250, 0.07), rgba(0, 0, 0, 0));
    }
    65% {
        background: radial-gradient(circle, rgba(170, 230, 240, 0.07), rgba(0, 0, 0, 0));
    }
    70% {
        background: radial-gradient(circle, rgba(200, 240, 230, 0.07), rgba(0, 0, 0, 0));
    }
    75% {
        background: radial-gradient(circle, rgba(220, 245, 220, 0.07), rgba(0, 0, 0, 0));
    }
    80% {
        background: radial-gradient(circle, rgba(240, 250, 210, 0.07), rgba(0, 0, 0, 0));
    }
    85% {
        background: radial-gradient(circle, rgba(250, 255, 200, 0.07), rgba(0, 0, 0, 0));
    }
    90% {
        background: radial-gradient(circle, rgba(255, 240, 190, 0.07), rgba(0, 0, 0, 0));
    }
    95% {
        background: radial-gradient(circle, rgba(255, 200, 180, 0.07), rgba(0, 0, 0, 0));
    }
    100% {
        background: radial-gradient(circle, rgba(255, 150, 255, 0.07), rgba(0, 0, 0, 0));
    }
}

.dust {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

.dust::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://cdn.pixabay.com/photo/2017/08/30/00/52/space-2695560_960_720.png') repeat;
    animation: dust-animation 5s linear infinite;
    opacity: 0.4;
}

/* Анимация движения пыли */
@keyframes dust-animation {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(500px, 500px);
    }
}