/* Four chapter headings reveal by phrase. All text stays visible by default. */
@media (prefers-reduced-motion: no-preference) {
  [data-text-motion].text-motion-enter {
    --heading-rise: 32px;
    --heading-duration: 900ms;
    --heading-stagger: 140ms;
    animation: chapter-heading-position var(--heading-duration) cubic-bezier(.22, .61, .36, 1) both;
  }

  [data-text-motion].text-motion-enter > .text-motion-lead {
    animation: chapter-heading-lead var(--heading-duration) ease-out both;
  }

  [data-text-motion].text-motion-enter > em {
    animation: chapter-heading-accent var(--heading-duration) ease-out var(--heading-stagger) both;
  }

  @keyframes chapter-heading-position {
    from { transform: translate3d(0, var(--heading-rise), 0); }
    to { transform: translate3d(0, 0, 0); }
  }

  @keyframes chapter-heading-lead {
    from { opacity: .12; }
    to { opacity: 1; }
  }

  @keyframes chapter-heading-accent {
    from { opacity: .12; }
    to { opacity: 1; }
  }
}

@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  [data-text-motion].text-motion-enter {
    --heading-rise: 24px;
    --heading-duration: 760ms;
    --heading-stagger: 120ms;
  }
}

@media (prefers-reduced-motion: reduce), print {
  [data-text-motion].text-motion-enter,
  [data-text-motion].text-motion-enter > .text-motion-lead,
  [data-text-motion].text-motion-enter > em {
    animation: none;
    opacity: 1;
    transform: none;
  }
}