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

.scrollFade,
.scrollFadeUp,
.scrollFadeDown,
.scrollFadeRight,
.scrollFadeLeft,
.scrollZoomIn {
  opacity: 0;
}

.animate--spin {
  animation-name: spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

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

.animate--swaying {
  animation-name: swaying;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@-webkit-keyframes swaying {
  0% {
    rotate: 0deg;
  }

  50% {
    rotate: 3deg;
  }

  100% {
    rotate: 0deg;
  }
}

@keyframes swaying {
  0% {
    rotate: 0deg;
  }

  50% {
    rotate: 3deg;
  }

  100% {
    rotate: 0deg;
  }
}

.animate--breathing {
  animation-name: breathing;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

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

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

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

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

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

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

.animate--gradient {
  --ag-duration: 5s;
  --ag-easing: cubic-bezier(.4, 0, .2, 1);
  --ag-scale: 200%;
  --ag-direction: alternate;

  background-size: var(--ag-scale) var(--ag-scale);
  animation: gradient-pan var(--ag-duration) var(--ag-easing) infinite var(--ag-direction);

  will-change: background-position;
}

@keyframes gradient-pan {
  0% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animate--gradient {
    animation: none;
  }
}