@keyframes gradient-slide {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Animate-on utilities
   Use: <div class="animate fade-in-up"> ... </div>
   JS adds `.animate-on` when near viewport.
*/
:where(.animate, [data-animate]):where(.fade-in, .fade-in-left, .fade-in-right, .fade-in-up, .fade-in-down, .slide-in-left, .slide-in-right, .slide-in-up, .slide-in-down) {
  --animate-duration: 600ms;
  --animate-delay: 0ms;
  --animate-distance: 24px;
  --animate-ease: cubic-bezier(.22, 1, .36, 1);
  transition:
    transform var(--animate-duration) var(--animate-ease) var(--animate-delay),
    opacity var(--animate-duration) var(--animate-ease) var(--animate-delay);
  will-change: transform, opacity;
}

.delay-1 {
  --animate-delay: 120ms;
}

.delay-2 {
  --animate-delay: 240ms;
}

.delay-3 {
  --animate-delay: 360ms;
}

.slow-1 {
  --animate-duration: 800ms;
}

.slow-2 {
  --animate-duration: 1100ms;
}

.slow-3 {
  --animate-duration: 1400ms;
}

:where(.animate, [data-animate]).fade-in {
  opacity: 0;
}

:where(.animate, [data-animate]).fade-in.animate-on {
  opacity: 1;
}

:where(.animate, [data-animate]).fade-in-left {
  opacity: 0;
  transform: translateX(calc(var(--animate-distance) * -1));
}

:where(.animate, [data-animate]).fade-in-left.animate-on {
  opacity: 1;
  transform: translateX(0);
}

:where(.animate, [data-animate]).fade-in-right {
  opacity: 0;
  transform: translateX(var(--animate-distance));
}

:where(.animate, [data-animate]).fade-in-right.animate-on {
  opacity: 1;
  transform: translateX(0);
}

:where(.animate, [data-animate]).fade-in-up {
  opacity: 0;
  transform: translateY(calc(var(--animate-distance) * -1));
}

:where(.animate, [data-animate]).fade-in-up.animate-on {
  opacity: 1;
  transform: translateY(0);
}

:where(.animate, [data-animate]).fade-in-down {
  opacity: 0;
  transform: translateY(var(--animate-distance));
}

:where(.animate, [data-animate]).fade-in-down.animate-on {
  opacity: 1;
  transform: translateY(0);
}

:where(.animate, [data-animate]).slide-in-left {
  opacity: 0;
  transform: translateX(calc(var(--animate-distance) * -1));
}

:where(.animate, [data-animate]).slide-in-left.animate-on {
  opacity: 1;
  transform: translateX(0);
}

:where(.animate, [data-animate]).slide-in-right {
  opacity: 0;
  transform: translateX(var(--animate-distance));
}

:where(.animate, [data-animate]).slide-in-right.animate-on {
  opacity: 1;
  transform: translateX(0);
}

:where(.animate, [data-animate]).slide-in-up {
  opacity: 0;
  transform: translateY(calc(var(--animate-distance) * -1));
}

:where(.animate, [data-animate]).slide-in-up.animate-on {
  opacity: 1;
  transform: translateY(0);
}

:where(.animate, [data-animate]).slide-in-down {
  opacity: 0;
  transform: translateY(var(--animate-distance));
}

:where(.animate, [data-animate]).slide-in-down.animate-on {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  :where(.animate, [data-animate]):where(.fade-in, .fade-in-left, .fade-in-right, .fade-in-up, .fade-in-down, .slide-in-left, .slide-in-right, .slide-in-up, .slide-in-down) {
    transition: none;
    transform: none;
    opacity: 1;
  }
}