/* //////////////////////// */
/* //////////////////////// */
/* ////// ANIMATIONS ////// */
/* //////////////////////// */
/* //////////////////////// */

@keyframes cloud {
  0% {
    transform: translateX(90%);
  }
  50% {
    transform: translateX(95%);
  }
  100% {
    transform: translateX(90%);
  }
}

@keyframes rotate-gradient {
  0% {
    --angle: 0deg;
  }

  100% {
    --angle: 360deg;
  }
}

@keyframes motion {
  0% {
    transform: translate3d(-2%, 0, 0);
  }

  50% {
    transform: translate3d(0, -2%, 0);
  }

  100% {
    transform: translate3d(-2%, 0, 0);
  }
}

@keyframes breathing {
  0% {
    transform: scale(1);
    rotate: 0;
  }

  50% {
    transform: scale(0.95);
    rotate: 3deg;
  }

  100% {
    transform: scale(1);
    rotate: 0;
  }
}

@keyframes fading {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.55;
    transform: scale(1.005);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: translateZ(0);
  }
}

.animate__fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: translateZ(0);
  }
}

.animate__fadeInDown {
  animation-name: fadeInDown;
}

.animate__animated {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}