/* Short, purposeful transitions; the page stays readable without JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes motion-rise {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }

  @keyframes motion-panel {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }

  .site-header { animation: motion-rise .55s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-copy > .eyebrow { animation: motion-rise .55s .08s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-copy > h1 { animation: motion-rise .68s .16s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-copy > .lead { animation: motion-rise .65s .27s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-copy > .hero-sub { animation: motion-rise .65s .34s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-copy > .actions { animation: motion-rise .65s .42s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-copy > .requirement { animation: motion-rise .65s .51s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-product { animation: motion-rise .85s .3s cubic-bezier(.16, .8, .2, 1) both; }
  .capabilities { animation: motion-rise .65s .72s cubic-bezier(.2, .7, .2, 1) both; }

  /* motion.js applies this only to sections initially below the viewport. */
  .will-reveal {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity .65s cubic-bezier(.2, .7, .2, 1),
                transform .65s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--motion-delay, 0ms);
  }
  .will-reveal.is-revealed { opacity: 1; transform: translate3d(0, 0, 0); }

  .tour-tabs { --motion-delay: 65ms; }
  .tour-body { --motion-delay: 120ms; }
  .setup-steps, .pricing-grid { --motion-delay: 75ms; }

  .tour-panel:not([hidden]) .tour-text { animation: motion-panel .42s cubic-bezier(.2, .7, .2, 1) both; }
  .tour-panel:not([hidden]) .autobuyer-shot,
  .tour-panel:not([hidden]) .remote-demo { animation: motion-panel .5s .06s cubic-bezier(.2, .7, .2, 1) both; }
  .tour-tabs button[aria-selected="true"]::after {
    transform-origin: left center;
    animation: motion-tab-line .28s ease-out both;
  }
  @keyframes motion-tab-line {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  .questions details[open] p { animation: motion-panel .3s ease-out both; }

  .tour-tabs button { transition: background-color .2s ease, color .2s ease; }
  .text-button .play,
  .text-link span:last-child { transition: transform .2s ease, background-color .2s ease, border-color .2s ease; }
  .text-button:hover .play,
  .text-button:focus-visible .play { transform: scale(1.08); border-color: #79adff; background: #246bfd30; }
  .text-link:hover span:last-child,
  .text-link:focus-visible span:last-child { transform: translateX(3px); }
}