/*
 * Movement on the website. Only for visitors whose system allows motion;
 * scroll reveals only once motion.js has run, so without it everything shows.
 */
@media (prefers-reduced-motion: no-preference) {
  /* the hero's sheets land on the desk one by one, then drift a little.
     `translate` composes with each sheet's own tilt (transform: rotate). */
  .comp > * {
    animation: ax-land 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both, ax-drift 6.5s ease-in-out infinite alternate;
  }
  .comp > .c-sheet { animation-delay: 0.05s, 1.1s; }
  .comp > .c-slide { animation-delay: 0.2s, 1.9s; }
  .comp > .c-plan { animation-delay: 0.35s, 2.7s; }
  .comp > .c-quiz { animation-delay: 0.5s, 3.5s; }

  @keyframes ax-land {
    from { opacity: 0; translate: 0 32px; }
    to { opacity: 1; translate: 0 0; }
  }
  @keyframes ax-drift {
    from { translate: 0 0; }
    to { translate: 0 -7px; }
  }

  /* the highlighter sweeps in under a headline's key words */
  html.motion .hl {
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 0.9s cubic-bezier(0.3, 0.6, 0.2, 1) 0.25s;
  }
  html.motion .hl.in { background-size: 100% 100%; }

  /* sections rise into place as they come into view */
  html.motion .rv {
    opacity: 0;
    translate: 0 22px;
    transition: opacity 0.6s ease, translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  html.motion .rv.in { opacity: 1; translate: 0 0; }

  /* buttons answer the pointer */
  .btn { transition: translate 0.15s ease, background-color 0.15s ease; }
  .btn:hover { translate: 0 -2px; }
}