/* ============================================================
   ASIF TRADERS - Motion system (Phase 1)
   Tokens + Lenis + entrance reveals + micro-interactions.
   Motion-only layer: animates transform/opacity only (zero CLS).
   ============================================================ */

/* ---------- Global motion tokens ---------- */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);      /* premium decelerate - entrances */
  --ease-in-out:cubic-bezier(.65,0,.35,1);  /* hover / tap */
  --dur-micro:.2s;
  --dur-small:.4s;
  --dur-medium:.6s;
  --dur-large:.9s;
  --stagger:.07s;
}

/* ---------- Lenis smooth scroll ---------- */
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}

/* ---------- Entrance reveals (transform/opacity only) ---------- */
[data-motion]{opacity:0;transform:translateY(22px);transition:opacity var(--dur-medium) var(--ease-out),transform var(--dur-medium) var(--ease-out);transition-delay:var(--d,0s);will-change:opacity,transform}
[data-motion="up-sm"]{transform:translateY(10px)}
[data-motion="num"]{transform:scale(.85);transition-duration:var(--dur-small)}
[data-motion].in{opacity:1;transform:none}

/* ---------- Micro-interactions: token timing for existing states ---------- */
.btn,.qbtn,.icon-btn,.pcard,.pcard .media img,.look-arrow,.car-arrow,.arrow-link{transition-timing-function:var(--ease-in-out)}
.btn,.qbtn,.icon-btn,.look-arrow,.car-arrow,.arrow-link{transition-duration:var(--dur-micro)}
.pcard,.pcard .media img{transition-duration:var(--dur-small)}
.pcard:active{transform:translateY(-2px) scale(.98)}
.pcard:active .media img{transform:scale(1.02)}

/* ---------- Phase 1 — Global chrome (header + buttons) ---------- */
.hero6-btn,.hero6-cta,.hero4-btn,.qbtn{transition-timing-function:var(--ease-in-out)!important;transition-duration:var(--dur-micro)!important}
.hero6-cta:active,.hero4-btn:active{transform:scale(.97)}
.qbtn:active{transform:scale(.97)}
.hero6-nav>a::after,.hero6-dd-trigger::after{transition:transform var(--dur-small) var(--ease-in-out)}
.hero6-cta .hero6-arrow{transition:transform var(--dur-micro) var(--ease-in-out)}

/* ---------- Reduced motion: everything instant ---------- */
@media(prefers-reduced-motion:reduce){
  [data-motion]{opacity:1!important;transform:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .hero6-bar,.site-header,.utility-bar,.header-main,.hero6-btn,.hero6-cta,.hero4-btn{transition:none!important}
}