/* ===== Fade In From Left ===== */
.commonfadeInLeft {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

.commonfadeInLeft.visible {
    opacity: 1;
    transform: translateX(0);
}

.commonfadeInLeft.hidden {
    opacity: 0;
    transform: translateX(-40px);
}

/* ===== Fade In From Right ===== */
.commonfadeInRight {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

.commonfadeInRight.visible {
    opacity: 1;
    transform: translateX(0);
}

.commonfadeInRight.hidden {
    opacity: 0;
    transform: translateX(40px);
}

/* ===== Fade In From Bottom - Modern 3D Lift Version ===== */
.commonFadeInBottom-3d {
    opacity: 0;
    transform:
        translateY(60px) scale(0.97) perspective(1000px) rotateX(10deg);
    transition:
        opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 1s ease-out;
    /* box-shadow: 0 0 0 rgba(0, 0, 0, 0); */
    will-change: transform, opacity, box-shadow;
}

.commonFadeInBottom-3d.visible {
    opacity: 1;
    transform:
        translateY(0) scale(1) perspective(1000px) rotateX(0deg);
    /* box-shadow:
        0 25px 60px -15px rgba(0, 0, 0, 0.35),
        0 10px 30px -10px rgba(0, 0, 0, 0.25); */
}