/**
 * Scroll motion styles, used by src/js/scroll-motion.js.
 *
 * Standalone like the script, so both can be removed together from
 * functions.php (search "scroll-motion"). The hidden state is only ever added
 * by the script, so without it every panel simply shows as normal.
 *
 * `translate` rather than `transform`, so this never overrides a component's
 * own transforms.
 */
.motion-reveal {
  opacity: 0;
  translate: 0 2rem;
  transition:
    opacity 0.7s ease-out,
    translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.motion-reveal.is-revealed {
  opacity: 1;
  translate: none;
}

.motion-parallax {
  will-change: translate;
}

/* The hero image's frame clips it as it moves. */
.motion-parallax-frame {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .motion-reveal {
    opacity: 1;
    transition: none;
    translate: none;
  }

  .motion-parallax {
    translate: none !important;
  }
}

@media print {
  .motion-reveal {
    opacity: 1;
    translate: none;
  }
}