[data-animation="fadeInUp"] {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    transition: 1.2s ease 0.2s;

    --opacity: 1;
    --transform: translateY(0);
}
.unset {
    opacity: var(--opacity);
    transform: var(--transform);
}


/*********************************************************************************************/
[data-animation="flipInY"] {
    opacity: 0;
    transition: opacity 0.5s ease;
    animation: flipInYOut 1s both; /* Aplica la animación flipInYOut */

    --opacity: 1;
    --transition: opacity 0.5s ease;
    --animation: flipInY 1s both; /* Aplica la animación flipInY */
}
@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotateY(-10deg);
    }
    70% {
        transform: perspective(400px) rotateY(10deg);
    }
    100% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@keyframes flipInYOut {
    0% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
    40% {
        transform: perspective(400px) rotateY(10deg);
    }
    70% {
        transform: perspective(400px) rotateY(-10deg);
    }
    100% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}
.unset2 {
    opacity: var(--opacity);
    transition: var(--transition);
    animation: var(--animation);
}


/*********************************************************************************************/
[data-animation="fadeInDown"] {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
    transition: 1.2s ease 0.2s;

    --opacity: 1;
    --transform: translateY(0);
}
.unset3 {
    opacity: var(--opacity);
    transform: var(--transform);
}

/*********************************************************************************************/
[data-animation="backInLeft"] {
    /* estado inicial: fuera y oculto */
    opacity: 0;
    transform: translateX(-200px) scale(0.7);
    /* no ejecutar la animación por defecto */
    --opacity: 1;
    --transform: translateX(0) scale(1);
    --animation: backInLeft 0.9s both;
}

@keyframes backInLeft {
    0% {
        transform: translateX(-200px) scale(0.7);
        opacity: 0;
    }
    60% {
        transform: translateX(20px) scale(1.02);
        opacity: 1;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

.unset4 {
    opacity: var(--opacity);
    transform: var(--transform);
    animation: var(--animation);
}

/********************************************************************************/
[data-animation="zoomIn"] {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
    transition: opacity 600ms ease, transform 600ms ease;

    --opacity: 1;
    --transform: scale3d(1, 1, 1);
}
.unset5 {
    opacity: var(--opacity);
    transform: var(--transform);
}







/************************************************************************************/
/* Opcional: mejora general */
[data-animation] {
    will-change: transform, opacity;
    backface-visibility: hidden;
}