/* v1-smart — motion. Only active under html.js-motion (set by motion.js when
   the visitor allows motion). Without it, everything is static and visible. */
@media (prefers-reduced-motion:no-preference){
  html.js-motion{
    /* page transitions */
  }
  html.js-motion body{opacity:0;transition:opacity .22s ease}
  html.js-motion body.pt-in{opacity:1}
  html.js-motion body.pt-out{opacity:0;transition-duration:.18s}

  /* header progress */
  html.js-motion .hdr .progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:linear-gradient(90deg,var(--gold-2),var(--blue));transform:scaleX(var(--p,0));transform-origin:left;pointer-events:none}

  /* hero intro */
  html.js-motion .m-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
  html.js-motion .m-wi{display:inline-block;transform:translateY(110%);animation:m-rise .9s var(--ease) var(--d,0ms) forwards}
  html.js-motion .hero .lead,html.js-motion .hero-actions,html.js-motion .hero-proof{opacity:0;animation:m-up .8s var(--ease) forwards}
  html.js-motion .hero .lead{animation-delay:.45s}
  html.js-motion .hero-actions{animation-delay:.58s}
  html.js-motion .hero-proof{animation-delay:.7s}
  html.js-motion .lc{opacity:0;animation:m-pop .9s var(--ease) calc(.35s + var(--d,0)*.14s) forwards}
  html.js-motion .lc-live::before{animation:m-ring 1.8s ease-out infinite}
  html.js-motion .page-head h1 .m-wi{animation-duration:.8s}
  html.js-motion .page-head .lead{opacity:0;animation:m-up .7s var(--ease) .35s forwards}

  /* floating hero cards drift */
  @media (min-width:1001px){
    html.js-motion .lc-1{animation:m-pop .9s var(--ease) .35s forwards,m-drift 7s ease-in-out 1.3s infinite}
    html.js-motion .lc-2{animation:m-pop2 .9s var(--ease) .49s forwards,m-drift 8s ease-in-out 1.6s infinite reverse}
    html.js-motion .lc-3{animation:m-pop .9s var(--ease) .63s forwards,m-drift 9s ease-in-out 1.9s infinite}
  }

  /* scroll reveals */
  html.js-motion [data-reveal]{opacity:0;transition:opacity .7s var(--ease) var(--d,0ms),transform .8s var(--ease) var(--d,0ms)}
  html.js-motion [data-reveal="up"]{transform:translateY(28px)}
  html.js-motion [data-reveal="scale"]{transform:scale(.94)}
  html.js-motion [data-reveal].in{opacity:1;transform:none}

  /* marquee */
  html.js-motion .marquee .track{animation:m-marquee 40s linear infinite}
  html.js-motion .marquee:hover .track{animation-play-state:paused}

  /* counters */
  html.js-motion .stat b{opacity:.99}

  /* cards: shine on hover + tilt (transform set by JS) */
  html.js-motion .tilt{transform-style:preserve-3d;transition:transform .5s var(--ease),border-color .3s,box-shadow .4s;will-change:transform}
  html.js-motion .tilt.tilting{transition:transform .08s linear,border-color .3s,box-shadow .4s}
  html.js-motion .inf-card::after,html.js-motion .case::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,var(--shine) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease);z-index:2}
  html.js-motion .inf-card:hover::after,html.js-motion .case:hover::after{transform:translateX(120%)}

  /* magnetic buttons */
  html.js-motion .btn-primary,html.js-motion .btn-lg{transition:transform .35s var(--ease),filter .25s,background .25s,border-color .25s}

  /* modal pop */
  html.js-motion .prof-ph img{animation:m-fade .6s ease}
  html.js-motion .aud-row i b{animation:m-grow .9s var(--ease)}

  /* cart bar enter */
  html.js-motion .cart-bar{animation:m-pop .5s var(--ease)}
  html.js-motion .m-tick{animation:m-tick .4s var(--ease)}
}

@keyframes m-rise{to{transform:none}}
@keyframes m-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes m-pop{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes m-pop2{from{opacity:0;transform:translateY(calc(-50% + 24px)) scale(.96)}to{opacity:1;transform:translateY(-50%)}}
@keyframes m-fade{from{opacity:0}to{opacity:1}}
@keyframes m-drift{0%,100%{translate:0 0}50%{translate:0 -14px}}
@keyframes m-ring{0%{box-shadow:0 0 0 0 rgba(73,209,125,.6)}100%{box-shadow:0 0 0 10px rgba(73,209,125,0)}}
@keyframes m-marquee{to{transform:translateX(-50%)}}
@keyframes m-grow{from{width:0}}
@keyframes m-tick{0%{transform:translateY(4px);opacity:.4}100%{transform:none;opacity:1}}