/* ===================================================== */
/*                 ANIMATIONS MINEPIXEL                  */
/* ===================================================== */


.fade{

opacity:0;

transform:translateY(40px);

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

}


.fade.show{

opacity:1;

transform:translateY(0);

}



/* Apparition depuis la gauche */

.slide-left{

opacity:0;

transform:translateX(-50px);

transition:.8s;

}


.slide-left.show{

opacity:1;

transform:translateX(0);

}



/* Apparition depuis la droite */

.slide-right{

opacity:0;

transform:translateX(50px);

transition:.8s;

}


.slide-right.show{

opacity:1;

transform:translateX(0);

}



/* Zoom */

.zoom{

opacity:0;

transform:scale(.85);

transition:.7s;

}


.zoom.show{

opacity:1;

transform:scale(1);

}



/* ===================================================== */
/*                     LOGO                              */
/* ===================================================== */


.hero-logo{

animation:

logoFloat 4s infinite ease-in-out;

}


@keyframes logoFloat{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-15px);

}


}



/* ===================================================== */
/*                     GLOW                              */
/* ===================================================== */


.glow{

animation:glow 3s infinite;

}


@keyframes glow{


0%,100%{

filter:drop-shadow(0 0 5px var(--primary));

}


50%{

filter:drop-shadow(0 0 30px var(--primary));

}


}



/* ===================================================== */
/*                 BOUTONS                              */
/* ===================================================== */


.btn{

position:relative;

overflow:hidden;

}


.btn::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:rgba(255,255,255,.25);

transition:.5s;

}


.btn:hover::before{

left:100%;

}



/* ===================================================== */
/*                LOADING PAGE                           */
/* ===================================================== */


body.loaded{

animation:pageEnter .5s ease;

}


@keyframes pageEnter{


from{

opacity:0;

}


to{

opacity:1;

}


}