/*
 * Shared motion a theme opts into (render_theme_motion_assets() in its layout's head; no theme gets it otherwise):
 *
 * - Arriving: as a section's parts scroll into view they fade in and rise a little, once, grid items one after another.
 *   Nothing is hidden by this file alone: motion.js marks the page (html.motion-on) and each part it will bring in
 *   (.motion-item) only after it has checked that the visitor allows motion and the browser can watch the page. A page
 *   whose script fails, a crawler and a printed page see everything at once. A picture in the first screen is never
 *   brought in; it is the first thing a visitor should see.
 * - Page changes: moving to another page of the same website cross-fades where the browser supports cross-document
 *   view transitions. Elsewhere the rule is ignored.
 *
 * Only opacity and transform move. Visitors who ask for less motion get none of it.
 */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--motion-page-speed, 280ms);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* The transition belongs to the arrived state only: a part is hidden at once when it is marked (it is out of sight, or
   not painted yet), and only its arrival moves. */
html.motion-on .motion-item.is-arrived {
  transition:
    opacity var(--motion-speed, 620ms) cubic-bezier(0.25, 0.6, 0.3, 1) var(--motion-delay, 0ms),
    transform var(--motion-speed, 620ms) cubic-bezier(0.2, 0.7, 0.2, 1) var(--motion-delay, 0ms);
}

html.motion-on .motion-item:not(.is-arrived) {
  opacity: 0;
  transform: translate3d(0, var(--motion-rise, 1.25rem), 0);
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  html.motion-on .motion-item,
  html.motion-on .motion-item:not(.is-arrived) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media print {
  html.motion-on .motion-item:not(.is-arrived) {
    opacity: 1;
    transform: none;
  }
}