@use '../utils' as *;

/*----------------------------------------*/
/*  Animations 
/*----------------------------------------*/

// Animate ripple
@keyframes popupBtn {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.3;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

// sticky-animation
@keyframes spin {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}
@-moz-keyframes spin {
  0% { -moz-transform: rotate(360deg); }
  100% { -moz-transform: rotate(0deg); }
}
@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(360deg); }
  100% { -webkit-transform: rotate(0deg); }
}




/*----------------------------------------*/
/*  Populer animation
/*----------------------------------------*/

@-webkit-keyframes circleMove {
	0% {
	 -webkit-transform:rotate(0deg)
	}
	to {
	 -webkit-transform:rotate(360deg)
	}
   }
   @keyframes circleMove {
	0% {
	 -webkit-transform:rotate(0deg)
	}
	to {
	 -webkit-transform:rotate(360deg)
	}
   }
   @-webkit-keyframes imageMove1 {
	0% {
	 -webkit-transform:translateX(-50%) rotate(0deg)
	}
	to {
	 -webkit-transform:translateX(-50%) rotate(-360deg)
	}
   }
   @keyframes imageMove1 {
	0% {
	 -webkit-transform:translateX(-50%) rotate(0deg)
	}
	to {
	 -webkit-transform:translateX(-50%) rotate(-360deg)
	}
   }
   @-webkit-keyframes imageMove2 {
	0% {
	 -webkit-transform:translateX(-50%) rotate(-60deg)
	}
	to {
	 -webkit-transform:translateX(-50%) rotate(-420deg)
	}
   }
   @keyframes imageMove2 {
	0% {
	 -webkit-transform:translateX(-50%) rotate(-60deg)
	}
	to {
	 -webkit-transform:translateX(-50%) rotate(-420deg)
	}
   }
   @-webkit-keyframes imageMove3 {
	0% {
	 -webkit-transform:translateX(-50%) rotate(-120deg)
	}
	to {
	 -webkit-transform:translateX(-50%) rotate(-480deg)
	}
   }
   @keyframes imageMove3 {
	0% {
	 -webkit-transform:translateX(-50%) rotate(-120deg)
	}
	to {
	 -webkit-transform:translateX(-50%) rotate(-480deg)
	}
   }
   @-webkit-keyframes imageMove4 {
	0% {
	 -webkit-transform:translateX(-50%) rotate(-180deg)
	}
	to {
	 -webkit-transform:translateX(-50%) rotate(-540deg)
	}
   }
   @keyframes imageMove4 {
	0% {
	 -webkit-transform:translateX(-50%) rotate(-180deg)
	}
	to {
	 -webkit-transform:translateX(-50%) rotate(-540deg)
	}
   }
   @-webkit-keyframes imageMove5 {
	0% {
	 -webkit-transform:translateX(-50%) rotate(-240deg)
	}
	to {
	 -webkit-transform:translateX(-50%) rotate(-600deg)
	}
   }
   @keyframes imageMove5 {
	0% {
	 -webkit-transform:translateX(-50%) rotate(-240deg)
	}
	to {
	 -webkit-transform:translateX(-50%) rotate(-600deg)
	}
   }
   @-webkit-keyframes imageMove6 {
	0% {
	 -webkit-transform:translateX(-50%) rotate(-300deg)
	}
	to {
	 -webkit-transform:translateX(-50%) rotate(-660deg)
	}
   }
   @keyframes imageMove6 {
	0% {
	 -webkit-transform:translateX(-50%) rotate(-300deg)
	}
	to {
	 -webkit-transform:translateX(-50%) rotate(-660deg)
	}
   }



   .movingX {
	-webkit-animation:movingX 35s linear infinite;
	animation:movingX 35s linear infinite
   }
   @-webkit-keyframes movingX {
	0% {
	 -webkit-transform:translateX(0) rotateY(0deg);
	 transform:translateX(0) rotateY(0deg)
	}
	50% {
	 -webkit-transform:translateX(calc(100vw - 100%));
	 transform:translateX(calc(100vw - 100%))
	}
	51% {
	 -webkit-transform:translateX(calc(100vw - 100%)) rotateY(180deg);
	 transform:translateX(calc(100vw - 100%)) rotateY(180deg)
	}
	100% {
	 -webkit-transform:translateX(0) rotateY(180deg);
	 transform:translateX(0) rotateY(180deg)
	}
   }
   @keyframes movingX {
	0% {
	 -webkit-transform:translateX(0) rotateY(0deg);
	 transform:translateX(0) rotateY(0deg)
	}
	50% {
	 -webkit-transform:translateX(calc(100vw - 100%));
	 transform:translateX(calc(100vw - 100%))
	}
	51% {
	 -webkit-transform:translateX(calc(100vw - 100%)) rotateY(180deg);
	 transform:translateX(calc(100vw - 100%)) rotateY(180deg)
	}
	100% {
	 -webkit-transform:translateX(0) rotateY(180deg);
	 transform:translateX(0) rotateY(180deg)
	}
   }


/*----------------------------------------*/
/*  Float Bob X Animation Css
/*----------------------------------------*/

@-webkit-keyframes float-bob-y {
	0% {
	  transform: translateY(-15px);
	}
  
	50% {
	  transform: translateY(-5px);
	}
  
	100% {
	  transform: translateY(-15px);
	}
  }
  
  @keyframes float-bob-y {
	0% {
	  transform: translateY(-15px);
	}
  
	50% {
	  transform: translateY(-5px);
	}
  
	100% {
	  transform: translateY(-15px);
	}
  }
  
  .float-bob-y {
	-webkit-animation-name: float-bob-y;
	animation-name: float-bob-y;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
  }
  
/*======================================
click-pulse animation
========================================*/
  
@-webkit-keyframes click-pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255,255.4);
    }
    70% {
        -webkit-box-shadow: 0 0 0 60px rgba(255,255,255,0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255,0);
    }
  }
  @keyframes click-pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.4);
      }
      70% {
          -webkit-box-shadow: 0 0 0 60px rgba(255,255,255, 0);
      }
      100% {
          -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
      }
  }


/*======================================
Marquee animation
========================================*/

  @-webkit-keyframes marquee {
	from {
	  -webkit-transform: translateX(0);
			  transform: translateX(0);
	}
	to {
	  -webkit-transform: translateX(-50%);
			  transform: translateX(-50%);
	}
  }
  
  @keyframes marquee {
	from {
	  -webkit-transform: translateX(0);
			  transform: translateX(0);
	}
	to {
	  -webkit-transform: translateX(-50%);
			  transform: translateX(-50%);
	}
}

@-webkit-keyframes marquee2 {
	to {
	  -webkit-transform: translateX(0);
			  transform: translateX(0);
	}
	from {
	  -webkit-transform: translateX(-50%);
			  transform: translateX(-50%);
	}
  }
  @keyframes marquee2 {
	to {
	  -webkit-transform: translateX(0);
			  transform: translateX(0);
	}
	from {
	  -webkit-transform: translateX(-50%);
			  transform: translateX(-50%);
	}
}

/*----------------------------------------*/
/*  video-border Animation Css
/*----------------------------------------*/
@include keyframes(video-border) {
	0% {
	  transform: translate(-50%, -50%) scale(.8);
	}
  
	60% {
	  opacity: 1;
	}
  
	100% {
	  transform: translate(-50%, -50%) scale(1.3);
	  opacity: 0;
	}
}