/***********************************************************************************************************************************
/***********************************************************************************************************************************

   ###    ##    ## #### ##     ##    ###    ######## ####  #######  ##    ##  ######  
  ## ##   ###   ##  ##  ###   ###   ## ##      ##     ##  ##     ## ###   ## ##    ## 
 ##   ##  ####  ##  ##  #### ####  ##   ##     ##     ##  ##     ## ####  ## ##       
##     ## ## ## ##  ##  ## ### ## ##     ##    ##     ##  ##     ## ## ## ##  ######  
######### ##  ####  ##  ##     ## #########    ##     ##  ##     ## ##  ####       ## 
##     ## ##   ###  ##  ##     ## ##     ##    ##     ##  ##     ## ##   ### ##    ## 
##     ## ##    ## #### ##     ## ##     ##    ##    ####  #######  ##    ##  ######  

For examples : https://www.dev.equideow.com/doc/animate

***********************************************************************************************************************************
***********************************************************************************************************************************/

/** SHOW CELL TILE *****************************************************************************************************************
************************************************************************************************************************************/

body.animation .animate--showcelltile{
	animation: showCellTile .25s ease-in-out 0s 1 normal forwards;
    opacity: 0;
}
@keyframes showCellTile{
	0%{
		opacity: 0;
		transform: scale(0.5);
	}
	80%{
		opacity: 1;
		transform: scale(1.025);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}

/** SHOW BOTTON *********************************************************************************************************************
************************************************************************************************************************************/

body.animation .animate--showbottom{
	animation: showBottom .33s ease-out 0s 1 normal forwards;
    opacity: 0;
}
@keyframes showBottom{
	0%{
		opacity: 0;
		transform: translate3d(0, 10px, 0);
	}
	100%{
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* ONTAP ***************************************************************************************************************************/
/***********************************************************************************************************************************/
@keyframes ontap {
	0% {transform: scale(1);}
	50% {transform: scale(.9);}
	100% {transform: scale(1);}
}


/***********************************************************************************************************************************
########  ########  ########    ###    ######## ##     ## 
##     ## ##     ## ##         ## ##      ##    ##     ## 
##     ## ##     ## ##        ##   ##     ##    ##     ## 
########  ########  ######   ##     ##    ##    ######### 
##     ## ##   ##   ##       #########    ##    ##     ## 
##     ## ##    ##  ##       ##     ##    ##    ##     ## 
########  ##     ## ######## ##     ##    ##    ##     ## 
***********************************************************************************************************************************/

body.animation .animate--breath{
	animation: animateBreath 20s infinite linear;
}
@keyframes animateBreath {
	0% {	transform: scale3d(1,1,1) rotate(0);}
	50% {	transform: scale3d(1.075,1.075,1.075)  rotate(1deg);}
	100% {	transform: scale3d(1,1,1) rotate(0);}
}

/***********************************************************************************************************************************
######## ##        #######     ###    ######## #### ##    ##  ######   
##       ##       ##     ##   ## ##      ##     ##  ###   ## ##    ##  
##       ##       ##     ##  ##   ##     ##     ##  ####  ## ##        
######   ##       ##     ## ##     ##    ##     ##  ## ## ## ##   #### 
##       ##       ##     ## #########    ##     ##  ##  #### ##    ##  
##       ##       ##     ## ##     ##    ##     ##  ##   ### ##    ##  
##       ########  #######  ##     ##    ##    #### ##    ##  ######   
***********************************************************************************************************************************/

body.animation .animate--float{
	animation: animateFloat 5s infinite ease-in-out;
}
@keyframes animateFloat{
	0%{		transform: translate3d(0,0,0) rotate3d(0,0,0,0deg);	}
	50%{	transform: translate3d(0,5px,0) rotate3d(0,0,1,-.5deg);	}
	100%{	transform: translate3d(0px) rotate3d(0,0,0,0deg);	}
}

/***********************************************************************************************************************************
########   #######  ##     ## ##    ##  ######  ######## 
##     ## ##     ## ##     ## ###   ## ##    ## ##       
##     ## ##     ## ##     ## ####  ## ##       ##       
########  ##     ## ##     ## ## ## ## ##       ######   
##     ## ##     ## ##     ## ##  #### ##       ##       
##     ## ##     ## ##     ## ##   ### ##    ## ##       
########   #######   #######  ##    ##  ######  ######## 
***********************************************************************************************************************************/

body.animation .animate--bounce {
	animation: animateBounce 0.75s;
	animation-fill-mode: both;
}
@keyframes animateBounce {
	from,
	20%,
	40%,
	60%,
	80%,
	to {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	0% {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}
	20% {
		transform: scale3d(1.1, 1.1, 1.1);
	}
	40% {
		transform: scale3d(0.9, 0.9, 0.9);
	}
	60% {
		opacity: 1;
		transform: scale3d(1.03, 1.03, 1.03);
	}
	80% {
		transform: scale3d(0.97, 0.97, 0.97);
	}
	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
  }
}

body.animation .animate--bounce-2 {
	animation: animateBounce2 1.25s;
	animation-fill-mode: both;
}
@keyframes animateBounce2 {
	from,
	20%,
	40%,
	60%,
	80%,
	to {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	0% {
		opacity: 0;
		transform: scale3d(0.6, 0.6, 0.6);
	}
	20% {
		transform: scale3d(2, 2, 2);
	}
	40% {
		transform: scale3d(1.3, 1.3, 1.3);
	}
	60% {
		opacity: 1;
		transform: scale3d(1.8, 1.8, 1.8);
	}
	80% {
		transform: scale3d(0.97, 0.97, 0.97);
	}
	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
  }
}

/***********************************************************************************************************************************
#### ##    ## 
 ##  ###   ## 
 ##  ####  ## 
 ##  ## ## ## 
 ##  ##  #### 
 ##  ##   ### 
#### ##    ## 
***********************************************************************************************************************************/

body.animation .animate--in {
  animation: animateIn 0.3s;
  animation-fill-mode: both;
}

@keyframes animateIn{
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
}

/***********************************************************************************************************************************
 #######  ##     ## ######## 
##     ## ##     ##    ##    
##     ## ##     ##    ##    
##     ## ##     ##    ##    
##     ## ##     ##    ##    
##     ## ##     ##    ##    
 #######   #######     ##    
***********************************************************************************************************************************/

.animate--out {
  animation: zoomOut 0.3s;
  animation-fill-mode: both;
  -webkit-animation: zoomOut 0.3s;
  -webkit-animation-fill-mode: both;
}

@-webkit-keyframes zoomOut{
    0% {
        opacity: 1;
    }
    100% {
         opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
}
@keyframes zoomOut{
    0% {
        opacity: 1;
    }
    100% {
         opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
}

/* TEXT--FLY ***********************************************************************************************************************/
/***********************************************************************************************************************************/

.text--fly{
	display: block;
	position: relative;
	animation: textFly .75s 1 0s;
}
@keyframes textFly{
	0%{
		transform: translateY(0) scale(3);
		opacity: 1;
	}
	50%{
		transform: translateY(0) scale(1);
		opacity: 1;
	}
	100%{
		transform: translateY(-50px) scale(1);
		opacity: 0;
	}
}


/* TEXT--CRASH *********************************************************************************************************************/
/***********************************************************************************************************************************/

.text--crash{
	display: block;
	position: relative;
	animation: textCrash .75s 1 0s;
}
@keyframes textCrash{
	0%{
		transform: translateY(0) scale(3);
		opacity: 1;
	}
	50%{
		transform: translateY(0) scale(1);
		opacity: 1;
	}
	100%{
		transform: translateY(50px) scale(1);
		opacity: 0;
	}
}

/***********************************************************************************************************************************
 ######  ########     ###    ########  ##    ## ##       ########  ######  
##    ## ##     ##   ## ##   ##     ## ##   ##  ##       ##       ##    ## 
##       ##     ##  ##   ##  ##     ## ##  ##   ##       ##       ##       
 ######  ########  ##     ## ########  #####    ##       ######    ######  
      ## ##        ######### ##   ##   ##  ##   ##       ##             ## 
##    ## ##        ##     ## ##    ##  ##   ##  ##       ##       ##    ## 
 ######  ##        ##     ## ##     ## ##    ## ######## ########  ######  
************************************************************************************************************************************/

.animate--sparkles{
	position: relative;
}
.animate--sparkles::before{
	background: url(/media/equideo/image/animations/animate-sparkles.png) no-repeat right top;
	content: "";
	display: block;
	height: 256px;
	left: calc(50% - 128px);
	position: absolute;
	top: 0;
	width: 256px;
	z-index: 1;
}
body.animation .animate--sparkles::before{
	animation: animateSparkes 2s infinite steps(32);
}
@keyframes animateSparkes {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -8192px top;
	}
}
.pix.animate--sparkles::before{
	transform-origin: top center;
	z-index: 2;
}
.pix--xl.animate--sparkles::before{
	transform: scale(0.75);
}
.pix--l.animate--sparkles::before{
	transform: scale(0.5);
}
.pix--m.animate--sparkles::before{
	transform: scale(0.375);
}
.pix--s.animate--sparkles::before{
	transform: scale(0.25);
}
.pix--xs.animate--sparkles::before{
	transform: scale(0.1875);
}
.pix--2xs.animate--sparkles::before{
	transform: scale(0.125);
}


/***********************************************************************************************************************************
.########..##.....##.##........######..########
.##.....##.##.....##.##.......##....##.##......
.##.....##.##.....##.##.......##.......##......
.########..##.....##.##........######..######..
.##........##.....##.##.............##.##......
.##........##.....##.##.......##....##.##......
.##.........#######..########..######..########
***********************************************************************************************************************************/

.animate--pulse{
	animation: tutorialtap 1s infinite ease-in-out;
}
@keyframes animateBreath {
	0%{ transform: scale(1); }
	25%{ transform: scale(.9); }
	100%{ transform: scale(1); }
}

/***********************************************************************************************************************************
########  ######## ##          ###    ##    ## 
##     ## ##       ##         ## ##    ##  ##  
##     ## ##       ##        ##   ##    ####   
##     ## ######   ##       ##     ##    ##    
##     ## ##       ##       #########    ##    
##     ## ##       ##       ##     ##    ##    
########  ######## ######## ##     ##    ##    
***********************************************************************************************************************************/

body.animation .animate--delay0{
	animation-delay: 0;
}
body.animation .animate--delay5{
	animation-delay: .05s;
}
body.animation .animate--delay10{
	animation-delay: .1s;
}
body.animation .animate--delay15{
	animation-delay: .15s;
}
body.animation .animate--delay20{
	animation-delay: .2s;
}
body.animation .animate--delay25{
	animation-delay: .25s;
}
body.animation .animate--delay30{
	animation-delay: .30s;
}
body.animation .animate--delay35{
	animation-delay: .35s;
}
body.animation .animate--delay40{
	animation-delay: .40s;
}
body.animation .animate--delay45{
	animation-delay: .45s;
}
body.animation .animate--delay50{
	animation-delay: .50s;
}
body.animation .animate--delay55{
	animation-delay: .55s;
}
body.animation .animate--delay60{
	animation-delay: .60s;
}
body.animation .animate--delay65{
	animation-delay: .65s;
}
body.animation .animate--delay70{
	animation-delay: .70s;
}
body.animation .animate--delay75{
	animation-delay: .75s;
}
body.animation .animate--delay80{
	animation-delay: .80s;
}
body.animation .animate--delay85{
	animation-delay: .85s;
}
body.animation .animate--delay90{
	animation-delay: .90s;
}
body.animation .animate--delay95{
	animation-delay: .95s;
}
body.animation .animate--delay100{
	animation-delay: 1s;
}