/* Content is visible without JavaScript. Only a successful initialization opts into motion. */
html.motion-ready .motion-reveal {
  --motion-reveal-y: 0px;
  opacity: var(--motion-opacity, 1);
  translate: 0 calc(var(--motion-reveal-y) + var(--motion-text-y, 0px));
  transition-property: opacity, translate, clip-path;
  transition-duration: 760ms;
  transition-timing-function: cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--motion-delay, 0ms);
}

html.motion-ready .motion-reveal.motion-pending {
  --motion-reveal-y: 24px;
  opacity: 0;
  pointer-events: none;
}

html.motion-ready [data-reveal="image"].motion-reveal {
  clip-path: inset(0 0 0 0);
  transition-duration: 880ms;
}

html.motion-ready [data-reveal="image"].motion-pending {
  --motion-reveal-y: 12px;
  clip-path: inset(0 0 6% 0);
}

html.motion-ready .motion-instant {
  transition: none !important;
}

html.motion-ready .motion-parallax-frame {
  overflow: hidden;
}

html.motion-ready .motion-parallax-image {
  translate: 0 var(--motion-image-y, 0px);
  scale: 1.018;
  transform-origin: center;
}

html.motion-ready .motion-parallax-text {
  translate: 0 calc(var(--motion-reveal-y, 0px) + var(--motion-text-y, 0px));
}

html.motion-ready .motion-parallax-active > .motion-parallax-image {
  will-change: translate;
}

html.motion-ready .motion-parallax-text.motion-parallax-active {
  will-change: translate;
}

html.motion-ready.motion-suspended .motion-reveal {
  transition: none !important;
}

html.motion-ready.motion-suspended .motion-parallax-image,
html.motion-ready.motion-suspended .motion-parallax-text {
  will-change: auto;
}

/* CSS also provides a fail-safe if the preference changes before the JS listener runs. */
html.capture .motion-reveal {
  opacity: var(--motion-opacity, 1) !important;
  translate: none !important;
  clip-path: none !important;
  transition: none !important;
}

html.capture .motion-parallax-image,
html.capture .motion-parallax-text {
  translate: none !important;
  scale: none !important;
  will-change: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready .motion-reveal {
    opacity: var(--motion-opacity, 1) !important;
    translate: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  html.motion-ready .motion-parallax-image,
  html.motion-ready .motion-parallax-text {
    translate: none !important;
    scale: none !important;
    will-change: auto !important;
  }
}