/* EASYPRINT LANDING MOTION V1 */

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

  /* Gate only after the JS controller has initialized. */

  html.ep-motion-ready #how-it-works:not(.ep-motion-visible)
  .how-heading,
  html.ep-motion-ready #how-it-works:not(.ep-motion-visible)
  .how-browser-demo,
  html.ep-motion-ready #how-it-works:not(.ep-motion-visible)
  .how-desktop-caption,
  html.ep-motion-ready #pricing:not(.ep-motion-visible)
  .pricing-container,
  html.ep-motion-ready #about:not(.ep-motion-visible)
  .ep-notes-container {
    opacity: 0 !important;
    translate: 0 22px;
  }

  html.ep-motion-ready #how-it-works .how-heading,
  html.ep-motion-ready #how-it-works .how-browser-demo,
  html.ep-motion-ready #how-it-works .how-desktop-caption,
  html.ep-motion-ready #pricing .pricing-container,
  html.ep-motion-ready #about .ep-notes-container {
    transition:
      opacity 850ms ease,
      translate 850ms cubic-bezier(.2,.72,.2,1);
  }

  html.ep-motion-ready #how-it-works.ep-motion-visible
  .how-heading,
  html.ep-motion-ready #how-it-works.ep-motion-visible
  .how-browser-demo,
  html.ep-motion-ready #how-it-works.ep-motion-visible
  .how-desktop-caption,
  html.ep-motion-ready #pricing.ep-motion-visible
  .pricing-container,
  html.ep-motion-ready #about.ep-motion-visible
  .ep-notes-container {
    opacity: 1 !important;
    translate: 0 0;
  }

  /* Monitor and caption follow the heading. */

  html.ep-motion-ready #how-it-works .how-browser-demo {
    transition-delay: 180ms;
  }

  html.ep-motion-ready #how-it-works .how-desktop-caption {
    transition-delay: 350ms;
  }

  /* Each workflow card is independently revealed. */

  html.ep-motion-ready #how-it-works .how-zoom-card,
  html.ep-motion-ready #how-it-works .steps-grid .step-card {
    opacity: 0 !important;
    translate: 0 17px;
    transition:
      opacity 580ms ease,
      translate 650ms cubic-bezier(.2,.75,.2,1),
      box-shadow 250ms ease !important;
  }

  html.ep-motion-ready #how-it-works .how-zoom-card.ep-step-on,
  html.ep-motion-ready #how-it-works .steps-grid .step-card.ep-step-on {
    opacity: 1 !important;
    translate: 0 0;
  }

  /* Only cards fade out during a repeating sequence. */

  html.ep-motion-ready #how-it-works .how-zoom-card.ep-step-off,
  html.ep-motion-ready #how-it-works .steps-grid .step-card.ep-step-off {
    opacity: 0 !important;
    translate: 0 -12px;
  }

  /* Preserve existing positioning transforms and card hover. */

  html.ep-motion-ready #how-it-works .how-zoom-card:hover {
    transition:
      opacity 580ms ease,
      translate 650ms ease,
      box-shadow 250ms ease !important;
  }

}

/* Full content remains accessible without motion. */

@media (prefers-reduced-motion: reduce) {
  html.ep-motion-ready #how-it-works .how-heading,
  html.ep-motion-ready #how-it-works .how-browser-demo,
  html.ep-motion-ready #how-it-works .how-desktop-caption,
  html.ep-motion-ready #how-it-works .how-zoom-card,
  html.ep-motion-ready #how-it-works .steps-grid .step-card,
  html.ep-motion-ready #pricing .pricing-container,
  html.ep-motion-ready #about .ep-notes-container {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }
}