/*
 * Motion layer — loaded after the approved stylesheet, and additive only.
 *
 * Every rule is scoped to html.hp-motion (set by assets/js/animations.js, and only for
 * visitors who have not asked their device to reduce motion) and only touches elements
 * the script has tagged with data-hp-reveal. With JavaScript off, with reduced motion
 * requested, or with the switch off under Appearance → Customize → Motion, the approved
 * design renders exactly as signed off.
 *
 * Only transform and opacity are animated: neither one can shift layout, so text does not
 * reflow and the page cannot jump while it scrolls.
 */

@media (prefers-reduced-motion: no-preference){

  /* Tagged elements wait just below their final position, invisible. */
  html.hp-motion [data-hp-reveal]{
    opacity:0;
    transform:translate3d(0,20px,0);
  }

  /* …and settle into place as they enter the screen, in a gentle stagger. */
  html.hp-motion [data-hp-reveal].is-in{
    opacity:1;
    transform:none;
    transition:opacity .6s cubic-bezier(.22,.61,.36,1),
               transform .7s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--hp-delay,0ms);
  }

  /* A section heading leads its own content by a beat. */
  html.hp-motion .section-head[data-hp-reveal].is-in{
    transition-duration:.55s,.6s;
  }
}