Lassú organikus áramlás

.we-bg-organic {
    position: relative;

    width: 100%;
    min-height: 420px;

    overflow: hidden;

    background: #0b0f19;

    display: flex;
    align-items: center;
    justify-content: center;

    isolation: isolate;
}

.we-bg-organic-shape {
    position: absolute;

    width: 380px;
    height: 380px;

    border-radius: 50%;

    filter: blur(55px);

    opacity: .48;

    animation:
        weOrganicFloat 16s ease-in-out infinite alternate,
        weOrganicMorph 11s ease-in-out infinite alternate;

    z-index: -1;
}

.we-bg-organic-one {
    background: #315f4a;

    top: -120px;
    left: 8%;

    animation-delay: 0s;
}

.we-bg-organic-two {
    background: #3f4774;

    right: 5%;
    top: 15%;

    animation-delay: -5s;
}

.we-bg-organic-three {
    background: #234f45;

    bottom: -160px;
    left: 35%;

    animation-delay: -9s;
}

.we-bg-organic-content {
    position: relative;

    max-width: 620px;

    padding: 45px;

    text-align: center;

    color: #f4f1e9;
}

.we-bg-organic-content span {
    display: block;

    margin-bottom: 16px;

    color: #7ac98e;

    font-family: Inter, system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
}

.we-bg-organic-content h2 {
    margin: 0 0 14px;

    font-family: "Bodoni Moda", Georgia, serif;
    font-size: clamp(40px, 7vw, 72px);
    font-weight: 500;
    line-height: 1;
}

.we-bg-organic-content p {
    margin: 0;

    color: rgba(244, 241, 233, .62);

    font-family: Inter, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.7;
}

@keyframes weOrganicFloat {

    0% {
        transform:
            translate3d(-40px, -25px, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(55px, 35px, 0)
            scale(1.16);
    }

    100% {
        transform:
            translate3d(-15px, 70px, 0)
            scale(.92);
    }
}

@keyframes weOrganicMorph {

    0% {
        border-radius:
            48% 52% 44% 56% /
            56% 42% 58% 44%;
    }

    50% {
        border-radius:
            62% 38% 55% 45% /
            42% 61% 39% 58%;
    }

    100% {
        border-radius:
            38% 62% 63% 37% /
            64% 39% 61% 36%;
    }
}

document.querySelectorAll(".we-bg-organic").forEach(background => {

    const shapes = background.querySelectorAll(
        ".we-bg-organic-shape"
    );

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

        const rect = background.getBoundingClientRect();

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

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

        shapes.forEach((shape, index) => {

            const strength = (index + 1) * 10;

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

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

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

        shapes.forEach(shape => {
            shape.style.marginLeft = "";
            shape.style.marginTop = "";
        });
    });

});