Szétválasztható panelek

.we-card-split {
    position: relative;
    width: min(100%, 420px);
    height: 300px;

    overflow: hidden;
    border-radius: 26px;

    background: #0b1210;
    border: 1px solid rgba(95, 189, 125, .22);

    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);

    cursor: pointer;
    isolation: isolate;
}

.we-card-split-panel {
    position: absolute;
    top: 0;

    width: 50%;
    height: 100%;

    background: #173b2b;

    transition:
        transform .9s cubic-bezier(.22, 1, .36, 1);
}

.we-card-split-left {
    left: 0;
    padding: 34px 22px 34px 34px;

    z-index: 3;
}

.we-card-split-right {
    right: 0;
    z-index: 3;

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

    padding: 34px 34px 34px 22px;
}

.we-card-split-left span {
    display: block;
    margin-bottom: 18px;

    color: #7ac98e;

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

.we-card-split-left h3 {
    margin: 0;

    color: #f4f1e9;

    font-family: "Bodoni Moda", Georgia, serif;
    font-size: clamp(29px, 5vw, 42px);
    font-weight: 500;
    line-height: 1.02;
}

.we-card-split-hidden {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #f4f1e9;

    font-family: Inter, system-ui, sans-serif;
    font-size: 13px;
    white-space: nowrap;

    opacity: 0;
    transform: translateX(20px);

    transition:
        opacity .45s ease .28s,
        transform .7s cubic-bezier(.22, 1, .36, 1) .28s;
}

.we-card-split-hidden b {
    color: #7ac98e;
    font-size: 19px;
    font-weight: 400;
}

.we-card-split-center {
    position: absolute;
    inset: 0;

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

    z-index: 1;

    color: #7ac98e;

    font-family: Inter, system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3em;

    opacity: .7;
}


/* HOVER */

.we-card-split:hover .we-card-split-left {
    transform: translateX(-72%);
}

.we-card-split:hover .we-card-split-right {
    transform: translateX(72%);
}

.we-card-split:hover .we-card-split-hidden {
    opacity: 1;
    transform: translateX(0);
}


/* Középen maradó finom tartalom */

.we-card-split-center::before,
.we-card-split-center::after {
    content: "";

    position: absolute;

    width: 1px;
    height: 70px;

    background: rgba(122, 201, 142, .18);

    transition:
        height .8s cubic-bezier(.22, 1, .36, 1),
        opacity .5s ease;
}

.we-card-split-center::before {
    transform: translateY(-60px);
}

.we-card-split-center::after {
    transform: translateY(60px);
}

.we-card-split:hover .we-card-split-center::before,
.we-card-split:hover .we-card-split-center::after {
    height: 34px;
    opacity: .35;
}

document.querySelectorAll(".we-card-split").forEach(card => {

    const left = card.querySelector(".we-card-split-left");
    const right = card.querySelector(".we-card-split-right");

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

        const rect = card.getBoundingClientRect();

        const x = event.clientX - rect.left;
        const center = rect.width / 2;

        const offset = (x - center) / center;

        left.style.transform =
            `translateX(calc(-72% + ${offset * -4}px))`;

        right.style.transform =
            `translateX(calc(72% + ${offset * 4}px))`;
    });

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

        left.style.transform = "";
        right.style.transform = "";
    });

});