Réteges kihúzás

.we-card-stack {
    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;

    perspective: 1000px;
}

.we-card-stack-layer,
.we-card-stack-main {
    position: absolute;

    inset: 0;

    border-radius: 24px;

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


/* Hátsó réteg */

.we-card-stack-back {
    background: #294f3b;

    transform:
        translate(0, 0)
        scale(.91);

    z-index: 1;
}

.we-card-stack-back span {
    position: absolute;

    right: 24px;
    top: 22px;

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

    font-family: Inter, system-ui, sans-serif;
    font-size: 38px;
    font-weight: 700;
}


/* Középső réteg */

.we-card-stack-middle {
    background: #214732;

    transform:
        translate(0, 0)
        scale(.95);

    z-index: 2;
}

.we-card-stack-middle span {
    position: absolute;

    right: 24px;
    bottom: 24px;

    color: rgba(122, 201, 142, .55);

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


/* Főlap */

.we-card-stack-main {
    z-index: 3;

    padding: 34px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: #173b2b;

    transform: translate(0, 0);
}

.we-card-stack-main small {
    margin-bottom: 14px;

    color: #7ac98e;

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

.we-card-stack-main h3 {
    margin: 0 0 13px;

    color: #f4f1e9;

    font-family: "Bodoni Moda", Georgia, serif;
    font-size: clamp(31px, 5vw, 44px);
    font-weight: 500;
    line-height: 1;
}

.we-card-stack-main p {
    max-width: 285px;

    margin: 0 0 17px;

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

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

.we-card-stack-main strong {
    color: #f4f1e9;

    font-family: Inter, system-ui, sans-serif;
    font-size: 12px;
}


/* HOVER */

.we-card-stack:hover .we-card-stack-main {
    transform:
        translateX(-22px)
        translateY(-8px);
}

.we-card-stack:hover .we-card-stack-middle {
    transform:
        translateX(30px)
        translateY(14px)
        scale(.95);
}

.we-card-stack:hover .we-card-stack-back {
    transform:
        translateX(68px)
        translateY(30px)
        scale(.91);
}


/* Finom különbség a rétegek között */

.we-card-stack:hover .we-card-stack-middle {
    transition-delay: .08s;
}

.we-card-stack:hover .we-card-stack-back {
    transition-delay: .16s;
}

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

    const main = card.querySelector(".we-card-stack-main");
    const middle = card.querySelector(".we-card-stack-middle");
    const back = card.querySelector(".we-card-stack-back");

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

        const rect = card.getBoundingClientRect();

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

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

        const moveX = (x - 0.5) * 8;
        const moveY = (y - 0.5) * 6;

        main.style.transform = `
            translate(
                ${-22 + moveX}px,
                ${-8 + moveY}px
            )
        `;

        middle.style.transform = `
            translate(
                ${30 + moveX * .7}px,
                ${14 + moveY * .7}px
            )
            scale(.95)
        `;

        back.style.transform = `
            translate(
                ${68 + moveX * .4}px,
                ${30 + moveY * .4}px
            )
            scale(.91)
        `;
    });

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

        main.style.transform = "";
        middle.style.transform = "";
        back.style.transform = "";
    });

});