/*==================================================
MANTENPRO
ANIMATIONS.CSS
==================================================*/


/*=========================================
TRANSICIONES GLOBALES
=========================================*/

.fade-transition{
    transition: opacity var(--transition-normal),
                transform var(--transition-normal);
}


/*=========================================
HOVER SCALE
=========================================*/

.hover-scale{
    transition: transform var(--transition-normal);
}

.hover-scale:hover{
    transform: scale(1.03);
}


/*=========================================
HOVER LIFT
=========================================*/

.hover-lift{
    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}

.hover-lift:hover{
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}


/*=========================================
FADE IN
=========================================*/

.fade-in{
    animation: fadeIn .8s ease forwards;
}

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}


/*=========================================
FADE UP
=========================================*/

.fade-up{
    animation: fadeUp .8s ease forwards;
}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(30px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}


/*=========================================
FADE DOWN
=========================================*/

.fade-down{
    animation: fadeDown .8s ease forwards;
}

@keyframes fadeDown{

    from{

        opacity:0;
        transform:translateY(-30px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}


/*=========================================
FADE LEFT
=========================================*/

.fade-left{
    animation: fadeLeft .8s ease forwards;
}

@keyframes fadeLeft{

    from{

        opacity:0;
        transform:translateX(-40px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}


/*=========================================
FADE RIGHT
=========================================*/

.fade-right{
    animation: fadeRight .8s ease forwards;
}

@keyframes fadeRight{

    from{

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

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}


/*=========================================
SCALE IN
=========================================*/

.scale-in{
    animation: scaleIn .6s ease forwards;
}

@keyframes scaleIn{

    from{

        opacity:0;
        transform:scale(.9);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}


/*=========================================
FLOAT
=========================================*/

.float{

    animation: float 4s ease-in-out infinite;

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}


/*=========================================
PULSE
=========================================*/

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.04);

    }

    100%{

        transform:scale(1);

    }

}


/*=========================================
REVEAL ON SCROLL
=========================================*/

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}