/* Shared motion primitives for custom blocks */

.wgtl-motion-reveal {
  transition:
    opacity 560ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 560ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}

.wgtl-motion-ready .wgtl-motion-reveal {
  opacity: 0;
  transform: translate3d(0, var(--wgtl-motion-distance, 12px), 0);
  filter: blur(var(--wgtl-motion-blur, 2px));
}

.wgtl-motion-reveal.is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

.wgtl-motion-ready .wgtl-motion-reveal-left {
  transform: translate3d(calc(var(--wgtl-motion-distance, 12px) * -1), 0, 0);
}

.wgtl-motion-ready .wgtl-motion-reveal-right {
  transform: translate3d(var(--wgtl-motion-distance, 12px), 0, 0);
}

.wgtl-motion-reveal-left.is-inview,
.wgtl-motion-reveal-right.is-inview {
  transform: translate3d(0, 0, 0);
}

.wgtl-motion-delay-1 {
  transition-delay: 80ms;
}

.wgtl-motion-delay-2 {
  transition-delay: 160ms;
}

.wgtl-motion-delay-3 {
  transition-delay: 240ms;
}

.wgtl-motion-delay-4 {
  transition-delay: 320ms;
}

.wgtl-motion-lift {
  transition:
    transform 180ms ease-out,
    box-shadow 180ms ease-out;
}

/* .wgtl-motion-lift:hover,
.wgtl-motion-lift:focus-visible {
  transform: translate3d(0, -2px, 0);
} */

@media (prefers-reduced-motion: reduce) {
  .wgtl-motion-reveal,
  .wgtl-motion-reveal-left,
  .wgtl-motion-reveal-right {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .wgtl-motion-delay-1,
  .wgtl-motion-delay-2,
  .wgtl-motion-delay-3,
  .wgtl-motion-delay-4 {
    transition-delay: 0ms !important;
  }

  .wgtl-motion-lift,
  .wgtl-motion-lift:hover,
  .wgtl-motion-lift:focus-visible {
    transform: none !important;
    transition: none !important;
  }
}