/*==========================================================
PUENTE DEL INCA
DESIGN SYSTEM
05. ANIMATIONS
==========================================================*/

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

a,
button,
.pi-btn,
.pi-card,
img{

    transition:var(--transition);

}

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

@keyframes piFadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.pi-fade-up{

    animation:piFadeUp .9s cubic-bezier(.22,.61,.36,1) forwards;

}

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

@keyframes piFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

.pi-fade{

    animation:piFade 1s ease forwards;

}

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

@keyframes piFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}

.pi-float{

    animation:piFloat 7s ease-in-out infinite;

}

/*==========================================================
IMAGE ZOOM
==========================================================*/

.pi-image img{

    transition:transform 1.2s ease;

}

.pi-image:hover img{

    transform:scale(1.05);

}

/*==========================================================
BUTTON HOVER
==========================================================*/

.pi-btn:hover{

    transform:translateY(-3px);

}

/*==========================================================
CARD HOVER
==========================================================*/

.pi-card{

    transition:

        transform .45s,

        box-shadow .45s;

}

.pi-card:hover{

    transform:translateY(-10px);

}

/*==========================================================
SOFT SHADOW
==========================================================*/

.pi-soft-shadow{

    box-shadow:var(--shadow-md);

}