/* ============ ARUS MOTION SYSTEM ============
   Subtle, editorial. No rainbow, no bounce, no infinite flash. */

/* Scroll reveal — only when JS is present (.js on <html>) */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.js .reveal.is-in{opacity:1;transform:translateY(0)}
.js .reveal[data-dir="left"]{transform:translateX(-16px)}
.js .reveal[data-dir="right"]{transform:translateX(16px)}
.js .reveal[data-dir="left"].is-in,.js .reveal[data-dir="right"].is-in{transform:translateX(0)}
.js .reveal[data-dir="zoom"]{transform:scale(.97)}
.js .reveal[data-dir="zoom"].is-in{transform:scale(1)}

/* Stagger children */
.js .stagger>*{opacity:0;transform:translateY(10px);transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}
.js .stagger.is-in>*{opacity:1;transform:translateY(0)}
.js .stagger.is-in>*:nth-child(1){transition-delay:.04s}
.js .stagger.is-in>*:nth-child(2){transition-delay:.1s}
.js .stagger.is-in>*:nth-child(3){transition-delay:.16s}
.js .stagger.is-in>*:nth-child(4){transition-delay:.22s}
.js .stagger.is-in>*:nth-child(5){transition-delay:.28s}
.js .stagger.is-in>*:nth-child(6){transition-delay:.34s}
.js .stagger.is-in>*:nth-child(7){transition-delay:.4s}
.js .stagger.is-in>*:nth-child(8){transition-delay:.46s}

/* Hover lift */
.lift{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s cubic-bezier(.22,1,.36,1),border-color .35s}
.lift:hover{transform:translateY(-3px);box-shadow:0 10px 30px -12px rgba(10,10,10,.12)}

/* Subtle 3D tilt (pointer-driven) */
.tilt{transform-style:preserve-3d;transition:transform .25s ease-out;will-change:transform}
.tilt:hover{transition:transform .08s linear}

/* Marquee */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:0;width:max-content;animation:marquee 36s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Animated underline link */
.u-link{position:relative}
.u-link::after{content:'';position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.u-link:hover::after{transform:scaleX(1);transform-origin:left}

/* Shimmer sweep (buttons / badges, on hover only) */
.shimmer{position:relative;overflow:hidden}
.shimmer::after{content:'';position:absolute;top:0;left:-80%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:left .6s ease}
.shimmer:hover::after{left:130%}

/* Soft pulse for live dot */
.live-dot{position:relative}
.live-dot::before{content:'';position:absolute;inset:-3px;border-radius:9999px;border:1px solid currentColor;opacity:.6;animation:ping 2.2s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(2);opacity:0}}

/* Page fade-in */
.page-enter{animation:pageIn .5s cubic-bezier(.22,1,.36,1) both}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Chart draw */
.chart-enter{animation:chartIn .9s cubic-bezier(.22,1,.36,1) both}
@keyframes chartIn{from{opacity:0;transform:scaleY(.96)}to{opacity:1;transform:scaleY(1)}}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .stagger>*{opacity:1;transform:none;transition:none}
  .marquee-track{animation:none}
  .reveal,.tilt,.lift{animation:none}
}