/* Shared animation utilities for Thrive static pages */
.will-animate {
  --animate-translate-x: 0px;
  --animate-translate-y: 32px;
  --animate-duration: 0.6s;
  --animate-delay: 0s;
  opacity: 0;
  transform: translate3d(var(--animate-translate-x), var(--animate-translate-y), 0);
  will-change: opacity, transform;
}

.will-animate[data-animate="fade-up"] {
  --animate-translate-y: 36px;
}

.will-animate[data-animate="fade-left"] {
  --animate-translate-x: -60px;
  --animate-translate-y: 0px;
}

.will-animate[data-animate="fade-right"] {
  --animate-translate-x: 60px;
  --animate-translate-y: 0px;
}

.will-animate[data-animate-delay="short"] {
  --animate-delay: 0.12s;
}

.will-animate[data-animate-delay="medium"] {
  --animate-delay: 0.22s;
}

.will-animate[data-animate-delay="long"] {
  --animate-delay: 0.36s;
}

.will-animate[data-animate-duration="slow"] {
  --animate-duration: 0.8s;
}

.will-animate[data-animate-duration="fast"] {
  --animate-duration: 0.45s;
}

.will-animate.is-visible {
  opacity: 1;
  animation-name: fade-in-transform;
  animation-duration: var(--animate-duration);
  animation-delay: var(--animate-delay);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

@supports (translate: 0 0) {
  .will-animate {
    transform: none;
    translate: var(--animate-translate-x, 0px) var(--animate-translate-y, 32px);
    will-change: opacity, translate;
  }

  @keyframes fade-in-transform {
    from {
      opacity: 0;
      translate: var(--animate-translate-x, 0px) var(--animate-translate-y, 32px);
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }
}

@supports not (translate: 0 0) {
  @keyframes fade-in-transform {
    from {
      opacity: 0;
      transform: translate3d(var(--animate-translate-x, 0px), var(--animate-translate-y, 32px), 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .will-animate {
    opacity: 1;
    transform: none;
    translate: 0;
    will-change: auto;
  }

  .will-animate.is-visible {
    animation: none !important;
  }
}