/* Motion layer (2026-10-26), ideas from the scroll-craft repo, kept restrained for a B2B site.
   Loaded on every page; removing this file's <link> and motion.js's <script> undoes all of it.
   Everything starts visible: motion.js only hides things that are still below the screen, so
   nothing above the fold waits for a script, and reduced-motion visitors get the page as it was. */
:root {
  --mo-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Headings rise line by line from behind a mask */
.mo-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.mo-wi { display: inline-block; transition: transform .8s var(--mo-ease), opacity .8s var(--mo-ease); }
.mo-pending .mo-wi { transform: translateY(105%); opacity: 0; }

/* Groups (steps, price drivers, proof links, FAQ, cards) arrive one after another */
.mo-item { transition: opacity .6s var(--mo-ease), transform .6s var(--mo-ease); }
.mo-item.mo-pending { opacity: 0; transform: translateY(16px); }

/* Photo heroes: the photo moves a little slower than the page */
.mo-par.page-hero { background-position: center calc(50% + var(--mo-py, 0px)); }

/* Desktop only: a soft light follows the pointer across cards */
@media (hover: hover) and (pointer: fine) {
  .mo-spot { position: relative; isolation: isolate; }
  .mo-spot::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
    background: radial-gradient(420px circle at var(--mo-x, 50%) var(--mo-y, 50%), rgba(72, 188, 172, .14), transparent 60%);
    opacity: 0; transition: opacity .18s ease-out;
  }
  .mo-spot:hover::after { opacity: 1; }
  .mx-panel.mo-spot::after { background: radial-gradient(380px circle at var(--mo-x, 50%) var(--mo-y, 50%), rgba(255, 255, 255, .08), transparent 60%); }
  /* buttons lean slightly toward the pointer */
  .mo-mag { transition: transform .25s var(--mo-ease), background-color .2s, color .2s; }
}

@media (prefers-reduced-motion: reduce) {
  .mo-pending .mo-wi, .mo-item.mo-pending { transform: none; opacity: 1; }
  .mo-par.page-hero { background-position: center; }
}