/* Scroll-reveal styles for /assets/js/motion.js. Staged by the build pipeline.
 * The design overrides the tokens in its own stylesheet (loaded after this
 * one) rather than editing this file:
 *
 *   :root { --motion-distance: 12px; --motion-duration: 480ms;
 *           --motion-ease: cubic-bezier(.23, 1, .32, 1); --motion-stagger: 60ms; }
 *
 * Every hiding rule is scoped to html.motion-ready, which only the script sets
 * and only when motion is wanted. Without JavaScript, under
 * prefers-reduced-motion, in print and in the WordPress editor nothing here
 * hides anything.
 */
:root {
  --motion-distance: 14px;
  --motion-duration: 520ms;
  --motion-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --motion-stagger: 60ms;
  --motion-stagger-cap: 480ms;
}

html.motion-ready [data-reveal],
html.motion-ready [data-reveal-group] > * {
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

html.motion-ready [data-reveal]:not(.is-revealed),
html.motion-ready [data-reveal-group]:not(.is-revealed) > * {
  opacity: 0;
  transform: translateY(var(--motion-distance));
}

html.motion-ready [data-reveal="fade"]:not(.is-revealed) { transform: none; }
html.motion-ready [data-reveal="scale"]:not(.is-revealed) { transform: scale(0.97); }
html.motion-ready [data-reveal="left"]:not(.is-revealed) { transform: translateX(calc(var(--motion-distance) * -1)); }
html.motion-ready [data-reveal="right"]:not(.is-revealed) { transform: translateX(var(--motion-distance)); }

html.motion-ready [data-reveal-group] > * {
  transition-delay: min(calc(var(--reveal-index, 0) * var(--motion-stagger)), var(--motion-stagger-cap));
}

html.motion-ready .is-revealed,
html.motion-ready .is-revealed > * {
  will-change: auto;
}

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

@media (prefers-reduced-motion: reduce) {
  html.motion-ready [data-reveal],
  html.motion-ready [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media print {
  html.motion-ready [data-reveal],
  html.motion-ready [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}