/* ==============================
   HIKARI PW DARK BACKGROUND
============================== */

html,
body{
    margin:0;
    padding:0;
    min-height:100%;
    background:#050507;
    overflow-x:hidden;
}

body{
    position:relative;
    isolation:isolate;
}

/* Основной фон */

body::before{

    content:"";

    position:fixed;
    inset:0;

    z-index:-100;

    background:

        radial-gradient(circle at 15% 20%,
            rgba(255,40,140,.05),
            transparent 30%),

        radial-gradient(circle at 80% 15%,
            rgba(255,60,170,.04),
            transparent 35%),

        radial-gradient(circle at 50% 95%,
            rgba(255,40,150,.03),
            transparent 45%),

        linear-gradient(
            180deg,
            #111116 0%,
            #09090d 40%,
            #050507 100%);
}

/* Звезды */

.stars{

    position:fixed;

    inset:0;

    z-index:-99;

    pointer-events:none;

    background-image:

        radial-gradient(circle,rgba(255,255,255,.9) 1px,transparent 1.8px),

        radial-gradient(circle,rgba(255,180,220,.6) 1px,transparent 2px),

        radial-gradient(circle,rgba(255,255,255,.4) .8px,transparent 1.6px);

    background-size:

        170px 170px,
        250px 250px,
        340px 340px;

    animation:starsMove 180s linear infinite;

    opacity:.55;

}

/* Дополнительный слой звезд */

.stars::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        radial-gradient(circle,#fff 1px,transparent 2px);

    background-size:120px 120px;

    opacity:.15;

    animation:twinkle 5s ease-in-out infinite alternate;

}

/* Мерцание */

.stars::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at 30% 20%, rgba(255,255,255,.08), transparent 2px),
        radial-gradient(circle at 70% 40%, rgba(255,255,255,.06), transparent 2px),
        radial-gradient(circle at 60% 80%, rgba(255,255,255,.08), transparent 2px),
        radial-gradient(circle at 15% 60%, rgba(255,255,255,.07), transparent 2px);

    animation:twinkle 3s ease-in-out infinite alternate;

}

/* Анимации */

@keyframes starsMove{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(-300px);
    }

}

@keyframes twinkle{

    from{
        opacity:.15;
    }

    50%{
        opacity:.4;
    }

    to{
        opacity:.2;
    }

}