/* C:\laragon\www\system\styles\core\motion.css
   Shared motion layer (2026-11-08), works with assets/js/motion.js. */

/* App pages: the content waits one frame so the cards don't flash before they come in.
   motion.js always removes the class (at the latest after 1.2 s). */
html.mo-enter .main > .content,
html.mo-enter .app-content { opacity: 0; }

/* Lenis smooth scrolling (landing page) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Landing: the phone preview floats with the scroll (motion.js sets --mo-py) */
.pv-phone-wrap { translate: 0 var(--mo-py, 0); }

/* Landing: the step in the middle of the screen gets a darker number and a blue edge */
/* The steps are also .reveal cards, and landing.css's ".js .reveal" transition (fade-in only) won over a plain
   ".how-step" rule, so the highlight snapped on (2026-11-08 check). This keeps the fade-in and adds the highlight. */
.js .how-step.reveal { transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1),
  border-color .35s ease, box-shadow .35s ease; transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s; }
.how-num { transition: color .35s ease; }
.how-step.is-current { border-color: #93c5fd; box-shadow: 0 10px 28px rgba(37, 99, 235, 0.14); }
.how-step.is-current .how-num { color: #93c5fd; }

@media (prefers-reduced-motion: reduce) {
  html.mo-enter .main > .content, html.mo-enter .app-content { opacity: 1; }
  .pv-phone-wrap { translate: none; }
}