:root {
    --bg-dark: #050b14;
    --bg-mid: #081826;

    --blue-bg: rgba(40, 198, 205, 0);
    --blue-soft-glow: rgba(0, 224, 255, 0.2);
    --blue-faint-glow: rgba(0, 224, 255, 0.08);
    --blue-subSoft-glow: rgba(40, 166, 204, 0.078);
    --blue-subFaint-glow: rgba(40, 204, 188, 0.22);

    --neo-bg: rgba(40, 205, 197, 0);
    --neo-soft-glow: rgba(0, 242, 255, 0.2);
    --neo-faint-glow: rgba(0, 255, 255, 0.08);
    --neo-subSoft-glow: rgba(40, 204, 204, 0.078);
    --neo-subFaint-glow: rgba(40, 196, 204, 0.22);
}

.css-background {
    position: fixed;
    inset: 0;
    z-index: var(--css-background);
}

.background-container {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.halos-container {
    height: 200%;
    width: 200%;
    background: radial-gradient(circle at center, #229faa -16%, #050b14 47%);
    perspective: 1000px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.center-ring {
    height: 500px;
    width: 500px;
    background: #00f4ff08;
    border: 4px solid #005a6e91;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    box-shadow: inset 0px 0px 20px 20px #004655, 0px 0px 20px 20px #00d2ff30;
    opacity: 1;
    transform: translate(-50%, -50%) translateZ(-100px);
    animation: center-hole 20s linear infinite;
    animation-play-state: running;
    will-change: transform;
}

.halo {
    height: 500px;
    width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    opacity: 1;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) translateZ(25px);
    will-change: transform;
}

.sub-halo {
    height: 465px;
    width: 465px;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    opacity: 1;
    transform: translate(-50%, -50%) translateZ(25px);
    /* -400 78 */
    will-change: transform;
}

.halo-1,
.halo-3,
.halo-5 {
    background: var(--blue-bg);
    border: 4px solid var(--faint-glow);
    box-shadow: 0 0 20px var(--soft-glow);

}

.sub-halo-1,
.sub-halo-3,
.sub-halo-5 {
    border: 4px solid var(--blue-subSoft-glow);
    box-shadow: 0px 0px 20px 0px var(--blue-subFaint-glow);
}

.halo-2,
.halo-6,
.halo-4 {
    background: var(--neo-bg);
    border: 4px solid var(--neo-soft-glow);
    box-shadow: 0px 0px 20px 9px var(--neo-faint-glow);
    /* animation-delay: 4s; */
}

.sub-halo-2,
.sub-halo-6,
.sub-halo-4 {
    border: 4px solid var(--neo-subSoft-glow);
    box-shadow: 0px 0px 20px 9px var(--neo-subFaint-glow);
}

.halo-1 {
    animation: halo-1 20s linear infinite;
    animation-play-state: running;
}

.halo-2 {
    animation: halo-2 17s linear infinite;
    animation-play-state: running;
}

.halo-3 {
    animation: halo-3 14s linear infinite;
    animation-play-state: running;
}

.halo-4 {
    animation: halo-4 11s linear infinite;
    animation-play-state: running;
}

.halo-5 {
    animation: halo-5 10s linear infinite;
    animation-play-state: running;
}

.halo-6 {
    animation: halo-6 15s linear infinite;
    animation-play-state: running;
}

.stop-animation {
    animation-play-state: paused !important;
}

@keyframes halo-1 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateZ(-350px) scale(0.1);
    }

    95% {
        opacity: 1;
        transform: translate(-50%, -50%) translateZ(855px) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateZ(880px) scale(1);
    }
}

@keyframes halo-2 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateZ(-250px) scale(0.1);
    }

    95% {
        opacity: 0.5;
        transform: translate(-50%, -50%) translateZ(855px) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateZ(880px) scale(1);
    }
}

@keyframes halo-3 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateZ(-150px) scale(0.1);
    }

    95% {
        opacity: 1;
        transform: translate(-50%, -50%) translateZ(855px) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateZ(880px) scale(1);
    }
}

@keyframes halo-4 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateZ(-550px) scale(0.1);
    }

    95% {
        opacity: 0.5;
        transform: translate(-50%, -50%) translateZ(855px) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateZ(880px) scale(1);
    }
}

@keyframes halo-5 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateZ(-650px) scale(0.1);
    }

    95% {
        opacity: 1;
        transform: translate(-50%, -50%) translateZ(855px) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateZ(880px) scale(1);
    }
}

@keyframes halo-6 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateZ(-0px) scale(0.1);
    }

    95% {
        opacity: 1;
        transform: translate(-50%, -50%) translateZ(855px) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateZ(880px) scale(1);
    }
}

@keyframes center-hole {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }

    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(7);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
}