/* ═══════════════════════════════════════════════════════════════
   motion.css — styles for js/motion.js (tickers, pills, particles)
   plus a few shared micro-interactions. Spring curves arrive as
   --spring-snappy / --spring-bouncy / --spring-gentle (set by motion.js).
   ═══════════════════════════════════════════════════════════════ */

/* rolling digits */
.mo-tk{display:inline-flex;align-items:flex-end;white-space:pre;font-variant-numeric:tabular-nums}
.mo-tkd,.mo-tks{display:inline-block;height:1.18em;line-height:1.18em}
.mo-tkd{overflow:hidden;position:relative}
.mo-tkr{display:flex;flex-direction:column;will-change:transform}
.mo-tkr>span{display:block;height:1.18em;line-height:1.18em;text-align:center}

/* sliding tab pill: the group needs position:relative (added here) */
.mo-pills{position:relative;isolation:isolate}
.mo-pills>.mo-pill{position:absolute;left:0;top:0;z-index:-1;border-radius:var(--r-sm);background:var(--card-2);
  box-shadow:inset 0 0 0 1px var(--line-2);pointer-events:none;opacity:0}
.mo-pills.mo-brand>.mo-pill{background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand-line)}
.mo-pills>button[aria-pressed="true"],.mo-pills>button.on{background:transparent!important;box-shadow:none!important}

/* particles live in one fixed layer above everything */
.mo-fx{position:fixed;inset:0;pointer-events:none;z-index:9000;overflow:hidden}
.mo-p{position:absolute;display:block;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:2px}
.mo-p1{border-radius:50%;width:7px;height:7px}
.mo-p2{width:14px;height:6px;margin:-3px 0 0 -7px}
.mo-p2 svg{display:block}
.mo-ring{position:absolute;width:30px;height:30px;border:2px solid var(--brand);border-radius:50%}
.mo-spark{position:absolute;width:3px;height:9px;border-radius:2px;transform-origin:50% 100%}

/* pressing: every button squishes and ripples from js/fx.js (Motion.press / ripple), .mo-press included */

/* a shimmer sweep for loading placeholders */
.mo-shim{position:relative;overflow:hidden;background:var(--card-2)}
.mo-shim::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);animation:mo-shim 1.5s infinite}
@keyframes mo-shim{to{transform:translateX(100%)}}

/* a slow rotating gradient border (the #1 trader, the current reward tier) */
.mo-glow{position:relative;isolation:isolate}
.mo-glow::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:-1;
  background:conic-gradient(from var(--d),transparent 0 62%,var(--brand) 78%,var(--foam) 82%,var(--brand) 86%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:mo-spin 5s linear infinite}
@keyframes mo-spin{to{--d:360deg}}

/* small idle motions for trader identicons (traders.css) */
@keyframes mo-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-2deg)}}
@keyframes mo-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(7deg)}}

/* rolling characters (Motion.roll / rollIn). Only the new character is text; the
   one it replaces (or a short reel of digits) is drawn by ::before and scrolls away */
.mo-rl{display:inline-block;position:relative;white-space:pre;clip-path:inset(0 -4px);font:inherit;color:inherit;letter-spacing:inherit}
.mo-rl>rl-d{display:inline-block;position:relative;white-space:pre;
  animation:mo-rl-u .52s var(--spring-snappy,cubic-bezier(.22,1,.36,1)) both}
.mo-rl>rl-d::before{content:attr(data-o);position:absolute;left:50%;transform:translateX(-50%);white-space:pre;text-align:center}
.mo-rl.u>rl-d::before{bottom:100%}
.mo-rl.d>rl-d{animation-name:mo-rl-d}
.mo-rl.d>rl-d::before{top:100%}
@keyframes mo-rl-u{from{transform:translateY(calc(var(--k,1) * 100%))}}
@keyframes mo-rl-d{from{transform:translateY(calc(var(--k,1) * -100%))}}

/* a soft wash behind a value that just changed (Motion.flash(el, dir, true)) */
.fx-u,.fx-d,.fx-n{border-radius:3px}
.fx-u{animation:fx-u .9s ease-out}
.fx-d{animation:fx-d .9s ease-out}
.fx-n{animation:fx-n .9s ease-out}
@keyframes fx-u{0%{background-color:rgba(var(--up-rgb),.22)}100%{background-color:rgba(var(--up-rgb),0)}}
@keyframes fx-d{0%{background-color:rgba(var(--down-rgb),.22)}100%{background-color:rgba(var(--down-rgb),0)}}
@keyframes fx-n{0%{background-color:rgba(var(--brand-rgb),.2)}100%{background-color:rgba(var(--brand-rgb),0)}}
body.no-flash .fx-u,body.no-flash .fx-d,body.no-flash .fx-n{animation:none}

/* the ripple a press leaves (Motion.ripple): clipped to the button's shape, in its text colour */
.mo-rip{position:absolute;overflow:hidden;pointer-events:none}
.mo-rip>b{position:absolute;border-radius:50%;background:currentColor;opacity:0}

@media (prefers-reduced-motion:reduce){
  .mo-shim::after,.mo-glow::before{animation:none}
  .mo-rl>rl-d{animation:none}
  .mo-rl>rl-d::before{display:none}
}
body.motion-reduced .mo-rl>rl-d::before{display:none}