/* =========================
   SELESTICA ATMOSPHERE
   ========================= */

body {
    background: #0E1124;
    overflow-x: hidden;
    position: relative;
}

/* Световые точки */

body::before,
body::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    filter: blur(80px);
    opacity: 0;
}

/* Вспышка №1 */

body::before {
    width: 280px;
    height: 280px;

    background: radial-gradient(
        circle,
        rgba(98,17,255,0.55) 0%,
        rgba(98,17,255,0.25) 30%,
        rgba(98,17,255,0) 75%
    );

    top: 20%;
    left: 15%;

    animation: selesticaGlow1 35s ease-in-out infinite;
}

/* Вспышка №2 */

body::after {
    width: 220px;
    height: 220px;

    background: radial-gradient(
        circle,
        rgba(98,17,255,0.45) 0%,
        rgba(98,17,255,0.18) 35%,
        rgba(98,17,255,0) 75%
    );

    bottom: 20%;
    right: 10%;

    animation: selesticaGlow2 48s ease-in-out infinite;
}

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

@keyframes selesticaGlow1 {

    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    4% {
        opacity: .45;
    }

    8% {
        opacity: 0;
        transform: scale(1.25);
    }

    100% {
        opacity: 0;
    }
}

@keyframes selesticaGlow2 {

    0%, 45% {
        opacity: 0;
        transform: scale(.9);
    }

    50% {
        opacity: .35;
    }

    55% {
        opacity: 0;
        transform: scale(1.3);
    }

    100% {
        opacity: 0;
    }
}

/* Выделение текста */

::selection {
    background: #6211FF;
    color: #FFFFFF;
}