@use '../utils' as *;


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

// animation
@keyframes animation-5 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1); 
  }
}
.aniamtion-key-5 {
  position: relative;
  animation-name: animation-5;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  // transition: $trans;
}

@keyframes animation-7 {
  0% {
    
    transform:rotate(0) ;
  }

  100% {
  
    transform: rotate(-1000deg);
  }
}

.keyframe5 {
  position: relative;
  animation-name: animation-7;
  animation-duration: 90s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(0.59, 0.59, 1, 1)
}

@keyframes animation-1 {
  0% {
    
    transform:translateY(0) ;
  }

  100% {
  
    transform: translateY(30px);
  }
}

.aniamtion-key-1 {
  position: relative;
  animation-name: animation-1;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes animation-2 {
  0% {
    
    transform:translateX(0) ;
  }

  100% {
  
    transform: translateX(50px);
  }
}

.aniamtion-key-2 {
  position: relative;
  animation-name: animation-2;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes animation-3 {
  0% {
    
    transform:translateY(0) ;
  }

  100% {
  
    transform: translateY(60px);
  }
}

.aniamtion-key-3 {
  position: relative;
  animation-name: animation-3;
  animation-duration: 1.3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes animation-4 {
  0% {
    
    transform:translateY(0) ;
  }

  100% {
  
    transform: translateY(40px);
  }
}

.aniamtion-key-4 {
  position: relative;
  animation-name: animation-4;
  animation-duration: 1.6s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes animation-6 {
  0% {
    
    transform:translateY(0) ;
  }

  100% {
  
    transform: translateY(50px);
  }
}

.aniamtion-key-6 {
  position: relative;
  animation-name: animation-6;
  animation-duration: 1.9s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes animation-8 {
  0% {
    
    padding-left: 0px;
  }

  100% {
  
    padding-left: 50px;
  }
}

.aniamtion-key-7 {
  position: relative;
  animation-name: animation-8;
  animation-duration: 1.3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@-webkit-keyframes fade-in-down {
  0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -50px, 0);
      transform: translate3d(0, -50px, 0);
  }

  100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
  }
}

@keyframes fade-in-down {
  0% {
      -webkit-transform: translate3d(0, -50px, 0);
      transform: translate3d(0, -50px, 0);
  }

  100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
  }
}

@keyframes pulse-border {
  0% {
    transform: translateX(0) translateY(0) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(0) translateY(0) translateZ(0) scale(1.5);
    opacity: 1;
  }
}
.pulse-border {
  position: relative;
  animation-name: pulse-border;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes infiniteAnimation {
  0% {
      transform: rotate(0deg);
  }
  50% {
      transform: rotate(180deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

.element {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  animation: infiniteAnimation 2s linear infinite;
}

.circle {
  animation: rotateCircle 9s linear infinite;
}
@keyframes rotateCircle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes thfadeInDown {
    0% {
      opacity: 0;
      transform: translateY(-100%);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .thfadeInDown {
    animation: thfadeInDown 1s ease-out forwards;
  }

@keyframes move {
  from {
    clip-path: circle(20% at 0% 50%);
  }
  to {
    clip-path: circle(20% at 100% 50%);
  }
}

//   margquee animation //
// @keyframes marquee {
//   0% { transform: translateX(0); }
//   100% { transform: translatex(-100%); }
// }
// @keyframes marquee-2 {
//   0% { transform: translateX(-100%); }
//   100% { transform: translatex(0); }
// }





// reveal animation
.reveal {
  position: relative;
  display: -ms-inline-flexbox;
  visibility: hidden;
  overflow: hidden;
}

.reveal img {
  height: 100%;
  width: 100%;
  display: inline-block;
  -o-object-fit: cover;
  object-fit: cover;
  transform-origin: left;
}


// image anime
.image-anime {
  position: relative;
  overflow: hidden;
}

.image-anime:after {
  content: "";
  position: absolute;
  width: 200%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 1;
}

.image-anime:hover:after {
  height: 250%;
  transition: all 600ms linear;
  background-color: transparent;
}

// musking image
.th-clip-anim {
  width: 100%;
  display: grid;
  align-items: center;
  justify-items: center;
  overflow: hidden;
  position: relative;
}
.th-clip-anim .th-anim-img {
  opacity: 0;
  width: 100%;
  height: 100%;
}
.th-clip-anim .mask {
  background-size: cover;
  background-position: center;
  transform: scale(1.005);
}
.th-clip-anim > * {
  grid-area: 1/1/2/2;
  width: 100%;
  height: 100%;
  max-height: 100%;
}

