Lebegő ködfátyol

.we-bg-mist {
    position: relative;
    width: 100%;
    min-height: 520px;
    overflow: hidden;
    background: #080b11;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

.we-bg-mist-layer {
    position: absolute;
    width: 65%;
    height: 65%;
    border-radius: 50%;
    filter: blur(75px);
    opacity: .34;
    pointer-events: none;
    will-change: transform;
}

.we-bg-mist-one {
    top: -18%;
    left: -8%;
    background: rgba(63, 159, 99, .55);
    animation: weMistOne 14s ease-in-out infinite alternate;
}

.we-bg-mist-two {
    right: -12%;
    bottom: -20%;
    background: rgba(48, 92, 122, .48);
    animation: weMistTwo 17s ease-in-out infinite alternate;
}

.we-bg-mist-three {
    top: 28%;
    left: 28%;
    width: 48%;
    height: 48%;
    background: rgba(122, 201, 142, .20);
    animation: weMistThree 20s ease-in-out infinite alternate;
}

@keyframes weMistOne {
    0% {
        transform: translate3d(-4%, -2%, 0) scale(1);
        border-radius: 48% 52% 58% 42%;
    }

    50% {
        transform: translate3d(18%, 15%, 0) scale(1.18);
        border-radius: 62% 38% 44% 56%;
    }

    100% {
        transform: translate3d(30%, 5%, 0) scale(1.05);
        border-radius: 38% 62% 52% 48%;
    }
}

@keyframes weMistTwo {
    0% {
        transform: translate3d(5%, 4%, 0) scale(1.05);
        border-radius: 55% 45% 42% 58%;
    }

    50% {
        transform: translate3d(-18%, -14%, 0) scale(1.2);
        border-radius: 42% 58% 62% 38%;
    }

    100% {
        transform: translate3d(-8%, -24%, 0) scale(1);
        border-radius: 60% 40% 48% 52%;
    }
}

@keyframes weMistThree {
    0% {
        transform: translate3d(-8%, 4%, 0) scale(.9);
        border-radius: 50%;
    }

    50% {
        transform: translate3d(12%, -12%, 0) scale(1.2);
        border-radius: 42% 58% 55% 45%;
    }

    100% {
        transform: translate3d(-4%, 15%, 0) scale(1.08);
        border-radius: 58% 42% 45% 55%;
    }
}

.we-bg-mist::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at center,
            transparent 15%,
            rgba(8, 11, 17, .18) 55%,
            rgba(8, 11, 17, .88) 100%
        );
}

.we-bg-mist-content {
    position: relative;
    z-index: 3;
    max-width: 680px;
    padding: 45px;
    text-align: center;
    pointer-events: none;
}

.we-bg-mist-content span {
    display: block;
    margin-bottom: 16px;
    color: #7ac98e;
    font-family: Inter, system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .24em;
}

.we-bg-mist-content h2 {
    margin: 0 0 16px;
    color: #f4f1e9;
    font-family: "Bodoni Moda", Georgia, serif;
    font-size: clamp(42px, 7vw, 78px);
    font-weight: 500;
    line-height: 1;
}

.we-bg-mist-content p {
    max-width: 540px;
    margin: 0 auto;
    color: rgba(244, 241, 233, .62);
    font-family: Inter, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.8;
}

@media (max-width: 700px) {

    .we-bg-mist {
        min-height: 460px;
    }

    .we-bg-mist-layer {
        filter: blur(55px);
    }

    .we-bg-mist-content {
        padding: 30px 22px;
    }
}

document.querySelectorAll(".we-bg-mist").forEach(container => {

    const layers = container.querySelectorAll(".we-bg-mist-layer");

    container.addEventListener("mousemove", event => {

        const rect = container.getBoundingClientRect();

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

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

        layers.forEach((layer, index) => {

            const strength = (index + 1) * 7;

            layer.style.marginLeft =
                `${x * strength}px`;

            layer.style.marginTop =
                `${y * strength}px`;
        });
    });

    container.addEventListener("mouseleave", () => {

        layers.forEach(layer => {
            layer.style.marginLeft = "0px";
            layer.style.marginTop = "0px";
        });
    });

});