.ap-motion-item {
  --ap-motion-distance: 24px;
  --ap-motion-scale: 1;
  --ap-motion-duration: 720ms;
  --ap-motion-delay: 0ms;
}

.ap-motion-heading {
  --ap-motion-distance: 30px;
  --ap-motion-scale: 0.985;
  --ap-motion-duration: 860ms;
}

.ap-motion-image {
  --ap-motion-distance: 18px;
  --ap-motion-scale: 0.985;
  --ap-motion-duration: 820ms;
}

.ap-motion-soft {
  --ap-motion-distance: 14px;
  --ap-motion-duration: 640ms;
}

.ap-motion-pending {
  opacity: 0;
}

.ap-motion-enter {
  animation: ap-motion-reveal var(--ap-motion-duration)
    cubic-bezier(0.22, 1, 0.36, 1) var(--ap-motion-delay) both;
}

@keyframes ap-motion-reveal {
  from {
    opacity: 0;
    translate: 0 var(--ap-motion-distance);
    scale: var(--ap-motion-scale);
  }

  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@media (max-width: 767px) {
  .ap-motion-item {
    --ap-motion-distance: 18px;
    --ap-motion-duration: 660ms;
  }

  .ap-motion-heading {
    --ap-motion-distance: 22px;
    --ap-motion-duration: 780ms;
  }

  .ap-motion-image,
  .ap-motion-soft {
    --ap-motion-distance: 12px;
  }
}

@media (prefers-reduced-motion: reduce), print {
  .ap-motion-item {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    animation: none !important;
  }
}

.ap-motion-item:focus-within {
  opacity: 1;
  translate: none;
  scale: none;
  animation: none;
}