/* Motion layer: rebuilt from the original site's framer-motion setup.
   Entrance "from" states apply only once motion.js has added .js-motion to <html>. */

/* Scroll progress bar (useScroll + useSpring, stiffness 100 / damping 30) */
.ms-scroll-progress{display:none}
.js-progress .ms-scroll-progress{display:block;position:fixed;top:0;left:0;right:0;height:.25rem;z-index:100;
  background-color:var(--color-emerald-500);transform-origin:left center;transform:scaleX(0);pointer-events:none;will-change:transform}

/* Animate variants: fadeUp / slideLeft / slideRight, 0.6s easeOut, viewport once, margin -50px */
.js-motion [data-anim]{transition:opacity .6s cubic-bezier(0,0,.58,1),transform .6s cubic-bezier(0,0,.58,1)}
.js-motion [data-anim="fadeUp"]:not(.is-in){opacity:0;transform:translateY(40px)}
.js-motion [data-anim="slideLeft"]:not(.is-in){opacity:0;transform:translateX(-60px)}
.js-motion [data-anim="slideRight"]:not(.is-in){opacity:0;transform:translateX(60px)}

/* StaggerContainer / StaggerItem: fadeUp 40px, 0.5s easeOut, staggerChildren per container */
.js-motion [data-stagger-item]{transition:opacity .5s cubic-bezier(0,0,.58,1),transform .5s cubic-bezier(0,0,.58,1)}
.js-motion [data-stagger-item]:not(.is-in){opacity:0;transform:translateY(40px)}

/* AnimatedCounter: span fades up 20px over 0.5s while the number counts for 2s */
.js-motion [data-count]{transition:opacity .5s cubic-bezier(.42,0,.58,1),transform .5s cubic-bezier(.42,0,.58,1)}
.js-motion [data-count]:not(.is-in){opacity:0;transform:translateY(20px)}

/* Once settled, drop the hints so nothing stays on its own layer */
.js-motion .is-done{transition:none;will-change:auto}

/* Slide-ins must never widen the page on phones */
.js-motion main section{overflow-x:clip}

@media (prefers-reduced-motion:reduce){
  .animate-pulse,.btn-glow,.animated-gradient{animation:none!important}
}