@use '../utils' as *;

/*----------------------------------------*/
/*  Animations styles
/*----------------------------------------*/
// 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 sticky {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0%);
  }
}

@keyframes tdSpinner {
  from {
    -webkit-transform: rotate(0turn);
    transform: rotate(0turn);
  }

  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}

// Banner shape 
@keyframes banner-shape-anim {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-10px);
  }
}

@keyframes banner-shape-anim-2 {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-15px);
  }
}

@keyframes banner-shape-anim-3 {
  0% {
    transform: translateY(0);
  }

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

.upDown {
  animation: upDown 1s infinite alternate;
}

@keyframes upDown {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-15px);
  }
}

@keyframes animationglob {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

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

/* Moving Left Animation */
.movingLeftX {
  animation: movingLeftX 35s linear infinite;
}

@keyframes movingLeftX {
  0% {
    transform: translateX(0) rotateY(0deg);
  }
  50% {
    transform: translateX(100%);
  }
  51% {
    transform: translateX(100%) rotateY(180deg);
  }
  100% {
    transform: translateX(0) rotateY(180deg);
  }
}

/* Moving Right Animation */
.movingRightX {
  animation: movingRightX 35s linear infinite;
}

@keyframes movingRightX {
  0% {
    transform: translateX(100%) rotateY(0deg);
  }
  50% {
    transform: translateX(0);
  }
  51% {
    transform: translateX(0) rotateY(180deg);
  }
  100% {
    transform: translateX(100%) rotateY(180deg);
  }
}
