/* ==========================================================================
   FAIQA RIAZ - MOTION LAYER
   Every rule below only applies once motion.js adds .m-on to <html>, and
   motion.js does nothing at all when the visitor asks for reduced motion.
   So without the script (or with reduced motion) the site looks exactly as
   it did before: nothing is ever left hidden.
   ========================================================================== */

/* SCROLL REVEAL: sections below the fold ease in once, then the classes are removed */
.m-on .m-rv {
  opacity: 0;
  translate: 0 1.4rem;
  transition: opacity .8s var(--ease), translate .9s var(--ease);
  transition-delay: calc(var(--d, 0) * 80ms);
}
.m-on .m-rv.is-in { opacity: 1; translate: none; }

/* process track: each step lights up as it arrives, and stays lit */
.m-on .track li { transition: border-color .9s var(--ease); }
.m-on .track li.m-lit { border-top-color: var(--accent); }

/* SCROLL-SCRUBBED STATEMENT: words wake up one by one as the line scrolls in */
.m-on .m-w { transition: opacity .25s linear; }

/* IMAGES: a slow settle from a slight zoom, driven by scroll (see motion.js) */
.m-on .m-img { transform-origin: 50% 50%; }

/* CURSOR SPOTLIGHT on cards: a soft glow that follows the pointer */
.m-spot { --spot: rgba(253, 161, 12, .14); }
.panel--2.m-spot, .bento__cell--accent.m-spot { --spot: rgba(255, 255, 255, .24); }
.m-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 65%);
  transition: opacity .45s var(--ease);
}
.m-spot:hover::after { opacity: 1; }

/* MAGNETIC BUTTONS and TILT are positioned by script through inline translate / transform */
.m-mag { will-change: translate; }
.m-tilt { will-change: transform; transform-style: preserve-3d; }