Sarokból kibomló

.we-card-corner {
    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: 900px;
}

.we-card-corner-base {
    position: relative;
    z-index: 1;

    height: 100%;
    padding: 34px;

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

    background: #173b2b;
}

.we-card-corner-label {
    margin-bottom: 16px;

    color: #7ac98e;

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

.we-card-corner h3 {
    margin: 0 0 14px;

    color: #f4f1e9;

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

.we-card-corner p {
    max-width: 290px;
    margin: 0;

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

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


/* Kihajló sarok */

.we-card-corner-flap {
    position: absolute;

    top: 0;
    right: 0;

    width: 150px;
    height: 150px;

    z-index: 4;

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

    padding: 0 24px 24px 0;

    background:
        linear-gradient(
            145deg,
            #5fbd7d 0%,
            #3f9f63 55%,
            #246443 100%
        );

    clip-path: polygon(
        100% 0,
        100% 100%,
        0 0
    );

    transform-origin: 100% 0;

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

.we-card-corner-flap span {
    position: absolute;

    right: 19px;
    bottom: 27px;

    color: #08110c;

    font-family: Inter, system-ui, sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;

    transform: rotate(-45deg);
    transform-origin: center;

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

.we-card-corner-flap b {
    position: absolute;

    right: 10px;
    bottom: 10px;

    color: #08110c;

    font-size: 16px;
    font-weight: 400;

    opacity: 0;

    transform: translate(-8px, -8px);

    transition:
        opacity .4s ease .2s,
        transform .65s cubic-bezier(.22, 1, .36, 1) .2s;
}


/* Hover */

.we-card-corner:hover .we-card-corner-flap {
    width: 270px;
    height: 270px;

    transform: rotateX(34deg) rotateY(-8deg);
}

.we-card-corner:hover .we-card-corner-flap span {
    transform: rotate(-45deg) translate(3px, 3px);
}

.we-card-corner:hover .we-card-corner-flap b {
    opacity: 1;
    transform: translate(0, 0);
}

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

    const flap = card.querySelector(".we-card-corner-flap");

    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 rotateY = (x - 0.5) * -7;
        const rotateX = (y - 0.5) * 7;

        flap.style.transform = `
            rotateX(${34 + rotateX}deg)
            rotateY(${-8 + rotateY}deg)
        `;
    });

    card.addEventListener("mouseleave", () => {
        flap.style.transform = "";
    });

});