/*
  Oak Days scroll motion (optional layer)

  Everything here only applies once js/motion.js has added the
  "motion-ready" class to <html>. Without the script, or with
  prefers-reduced-motion, the page renders exactly as before.

  To remove all motion: delete the <link> to this file and the
  <script> for js/motion.js in index.html.

  Timing follows the Oak Days motion guide: "grow" duration (600 ms),
  entrance easing cubic-bezier(0.2, 0.7, 0.2, 1), transform and
  opacity only, no bounce or overshoot.
*/

:root {
  --motion-duration: 600ms;
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --motion-distance: 24px;
}

/* Hidden start states */
.motion-ready [data-motion] {
  opacity: 0;
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
}

/* Text: rises a little while it fades in */
.motion-ready [data-motion="rise"] {
  transform: translate3d(0, var(--motion-distance), 0);
}

/* Imagery: grows from 96% to full size, never past it */
.motion-ready [data-motion="grow"] {
  transform: scale(0.96);
}

/* Imagery beside text: drifts in from its own side of the page */
.motion-ready [data-motion="drift-left"] {
  transform: translate3d(calc(var(--motion-distance) * -1.5), 0, 0);
}

.motion-ready [data-motion="drift-right"] {
  transform: translate3d(calc(var(--motion-distance) * 1.5), 0, 0);
}

/* Settled state */
.motion-ready [data-motion].is-visible {
  opacity: 1;
  transform: none;
}

/* Hero parallax: the photo lags behind the scroll. It only starts moving once
   the top of the hero has scrolled out of view, so no gap can show at the top
   and no zoom is needed (a zoom would crop the model's head and feet). The
   hero clips the part that moves past its bottom edge. */
.motion-ready .hero {
  overflow: hidden;
}

.motion-ready .hero-photo {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-motion] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .motion-ready .hero-photo {
    transform: none;
  }
}