Aurora - pulze

.aurora-wrap {
    position: relative;
    width: 100%;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(
            circle at center,
            rgba(65, 160, 255, .14),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #050816 0%,
            #091225 50%,
            #050816 100%
        );
}

/* központi fény */

.aurora-glow {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(70, 190, 255, .30),
            rgba(80, 100, 255, .12) 45%,
            transparent 72%
        );
    filter: blur(12px);
    animation: auroraPulse 3s ease-in-out infinite;
}

.aurora-core {
    position: relative;
    z-index: 5;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(
            circle at 35% 30%,
            #ffffff,
            #9be7ff 18%,
            #38a9ff 48%,
            #2454ff 72%,
            #101833 100%
        );
    box-shadow:
        0 0 25px rgba(90, 200, 255, .8),
        0 0 70px rgba(45, 120, 255, .45),
        0 0 130px rgba(90, 80, 255, .22);
    animation: corePulse 2.6s ease-in-out infinite;
}

.aurora-core span {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow:
        0 0 12px #ffffff,
        0 0 28px #8ce5ff;
}

/* orbitok */

.aurora-orbit {
    position: absolute;
    border: 1px solid rgba(110, 210, 255, .34);
    border-radius: 50%;
    transform-style: preserve-3d;
}

.orbit-one {
    width: 240px;
    height: 100px;
    transform: rotate(-20deg);
    animation: orbitOne 8s linear infinite;
    box-shadow:
        0 0 18px rgba(70, 190, 255, .12);
}

.orbit-two {
    width: 320px;
    height: 135px;
    transform: rotate(28deg);
    animation: orbitTwo 11s linear infinite reverse;
}

.orbit-three {
    width: 410px;
    height: 175px;
    transform: rotate(-8deg);
    border-color: rgba(150, 100, 255, .24);
    animation: orbitThree 15s linear infinite;
}

/* világító részecskék */

.aurora-particle {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9cecff;
    box-shadow:
        0 0 10px #7adfff,
        0 0 24px rgba(90, 180, 255, .8);
}

.particle-one {
    top: 25%;
    left: 30%;
    animation: particleOne 5s ease-in-out infinite;
}

.particle-two {
    top: 68%;
    left: 23%;
    animation: particleTwo 6s ease-in-out infinite;
}

.particle-three {
    top: 22%;
    right: 27%;
    background: #c69cff;
    box-shadow:
        0 0 10px #c69cff,
        0 0 24px rgba(180, 100, 255, .8);
    animation: particleThree 7s ease-in-out infinite;
}

.particle-four {
    bottom: 20%;
    right: 30%;
    animation: particleFour 5.5s ease-in-out infinite;
}

.particle-five {
    top: 48%;
    left: 15%;
    width: 5px;
    height: 5px;
    animation: particleFive 4.5s ease-in-out infinite;
}


/* animációk */

@keyframes auroraPulse {

    0%,
    100% {
        transform: scale(.88);
        opacity: .65;
    }

    50% {
        transform: scale(1.12);
        opacity: 1;
    }
}

@keyframes corePulse {

    0%,
    100% {
        transform: scale(.92);
    }

    50% {
        transform: scale(1.08);
    }
}

@keyframes orbitOne {

    from {
        transform:
            rotate(-20deg)
            rotate(0deg);
    }

    to {
        transform:
            rotate(-20deg)
            rotate(360deg);
    }
}

@keyframes orbitTwo {

    from {
        transform:
            rotate(28deg)
            rotate(360deg);
    }

    to {
        transform:
            rotate(28deg)
            rotate(0deg);
    }
}

@keyframes orbitThree {

    from {
        transform:
            rotate(-8deg)
            rotate(0deg);
    }

    to {
        transform:
            rotate(-8deg)
            rotate(360deg);
    }
}

@keyframes particleOne {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(40px, -28px);
    }
}

@keyframes particleTwo {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(35px, 30px);
    }
}

@keyframes particleThree {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-40px, 25px);
    }
}

@keyframes particleFour {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-28px, -32px);
    }
}

@keyframes particleFive {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(30px, -18px);
    }
}

const aurora = document.querySelector('.aurora-wrap');

if (aurora) {

    aurora.addEventListener('mousemove', function (event) {

        const rect = aurora.getBoundingClientRect();

        const x =
            (event.clientX - rect.left) /
            rect.width -
            0.5;

        const y =
            (event.clientY - rect.top) /
            rect.height -
            0.5;

        aurora.style.setProperty(
            '--mouse-x',
            `${x * 18}px`
        );

        aurora.style.setProperty(
            '--mouse-y',
            `${y * 18}px`
        );

        aurora
            .querySelector('.aurora-core')
            .style.transform =
            `translate(${x * 10}px, ${y * 10}px) scale(1.04)`;

    });


    aurora.addEventListener('mouseleave', function () {

        aurora
            .querySelector('.aurora-core')
            .style.transform =
            'translate(0, 0) scale(1)';

    });

}