/* NeuralBTC motion layer — shared by every public page.
 * Loaded with /assets/motion.js. Everything here is progressive: the
 * classes are only added by JS, so a page without JS renders as before.
 * prefers-reduced-motion switches every animation off (bottom of file). */

:root{
  --mx-ease:cubic-bezier(.2,.7,.2,1);
  --mx-spring:cubic-bezier(.34,1.56,.64,1);
  --mx-fast:.18s; --mx-mid:.45s; --mx-slow:.8s;
}

/* ── neural field canvas (fixed, painted behind all in-flow content) ── */
.mx-field{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.mx-field.mx-on{opacity:1}

/* ── scroll progress ── */
.mx-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:300;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#4ade80,#60a5fa,#a78bfa,#facc15);box-shadow:0 0 12px rgba(96,165,250,.7)}

/* ── cursor spotlight (fine pointers only) ── */
.mx-spot{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;
  pointer-events:none;z-index:-1;opacity:0;transition:opacity .6s;
  background:radial-gradient(circle,rgba(96,165,250,.13),rgba(167,139,250,.06) 40%,transparent 68%)}
.mx-spot.mx-on{opacity:1}

/* ── scroll reveal (uses `translate`, so it composes with tilt's `transform`) ── */
.mx-rv{opacity:0;translate:0 26px;filter:blur(6px);
  transition:opacity var(--mx-slow) var(--mx-ease),translate var(--mx-slow) var(--mx-ease),filter var(--mx-slow) var(--mx-ease);
  transition-delay:var(--mx-d,0s)}
.mx-rv.mx-in{opacity:1;translate:0 0;filter:none}

/* ── 3D tilt + glare ── */
/* transitions listed in full so a card that is both revealed and tilted keeps both */
.mx-tilt{transform-style:preserve-3d;will-change:transform;
  transition:transform .5s var(--mx-ease),box-shadow .5s var(--mx-ease),border-color .3s,background .3s,
    opacity var(--mx-slow) var(--mx-ease) var(--mx-d,0s),translate var(--mx-slow) var(--mx-ease) var(--mx-d,0s),filter var(--mx-slow) var(--mx-ease) var(--mx-d,0s)}
.mx-tilt.mx-tilting{transition:transform .08s linear,box-shadow .3s,border-color .3s,background .3s,opacity .3s,translate .3s,filter .3s}
.mx-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;mix-blend-mode:screen;
  background:radial-gradient(420px circle at var(--mx-gx,50%) var(--mx-gy,50%),rgba(255,255,255,.13),rgba(96,165,250,.06) 35%,transparent 60%)}
.mx-tilting .mx-glare,.mx-tilt:hover .mx-glare{opacity:1}
/* border light that follows the pointer */
.mx-edge{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1px;opacity:0;transition:opacity .4s;
  background:radial-gradient(260px circle at var(--mx-gx,50%) var(--mx-gy,50%),rgba(255,255,255,.55),transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.mx-tilting .mx-edge,.mx-tilt:hover .mx-edge{opacity:1}

/* ── magnetic CTA + light sweep ── */
.mx-mag{transform:translate(var(--mx-mx,0px),var(--mx-my,0px));transition:transform .35s var(--mx-spring),box-shadow .3s}
.mx-shine{position:relative;overflow:hidden;isolation:isolate}
.mx-shine::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);
  animation:mx-sweep 4.8s ease-in-out infinite}
@keyframes mx-sweep{0%,62%{left:-60%}100%{left:130%}}

/* ── live values ── */
.mx-up{animation:mx-up 1s ease-out}
.mx-down{animation:mx-down 1s ease-out}
@keyframes mx-up{0%{color:#4ade80;text-shadow:0 0 18px rgba(74,222,128,.8)}100%{text-shadow:none}}
@keyframes mx-down{0%{color:#f87171;text-shadow:0 0 18px rgba(248,113,113,.8)}100%{text-shadow:none}}
.mx-breathe{animation:mx-breathe 2.8s ease-in-out infinite}
@keyframes mx-breathe{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 0%,transparent)}50%{box-shadow:0 0 26px 2px color-mix(in srgb,currentColor 38%,transparent)}}
.mx-caret::after{content:"";display:inline-block;width:.5em;height:1em;margin-left:2px;vertical-align:-.12em;background:currentColor;opacity:.7;animation:mx-blink .8s steps(1) infinite}
@keyframes mx-blink{50%{opacity:0}}
.mx-bar-shimmer{position:relative;overflow:hidden}
.mx-bar-shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-100%);animation:mx-shim 2.4s ease-in-out infinite}
@keyframes mx-shim{60%,100%{transform:translateX(100%)}}

/* sparkline draw-on + live head */
.mx-draw{stroke-dasharray:var(--mx-len);stroke-dashoffset:var(--mx-len);animation:mx-draw 1.6s var(--mx-ease) forwards}
@keyframes mx-draw{to{stroke-dashoffset:0}}
.mx-fadein{opacity:0;animation:mx-fade 1.2s .5s ease forwards}
@keyframes mx-fade{to{opacity:1}}

/* chart crosshair */
.mx-xh{position:absolute;pointer-events:none;opacity:0;transition:opacity .2s}
.mx-xh.mx-on{opacity:1}
.mx-xh-line{top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.45),transparent)}
.mx-xh-tip{transform:translate(-50%,-130%);padding:5px 9px;border-radius:8px;white-space:nowrap;font:700 11.5px Consolas,ui-monospace,monospace;
  color:#e5e7eb;background:rgba(3,7,18,.9);border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 24px rgba(0,0,0,.5)}
.mx-xh-dot{width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18),0 0 16px currentColor}

/* hero orbit rings (landing) */
.mx-orbit{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;border:1px dashed rgba(96,165,250,.28)}
.mx-orbit i{position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#4ade80;box-shadow:0 0 12px #4ade80}
.mx-orbit.o1{width:300px;height:300px;margin:-150px 0 0 -150px;animation:mx-spin 18s linear infinite}
.mx-orbit.o2{width:370px;height:370px;margin:-185px 0 0 -185px;border-color:rgba(167,139,250,.2);animation:mx-spin 30s linear infinite reverse}
.mx-orbit.o2 i{background:#facc15;box-shadow:0 0 12px #facc15}
.mx-orbit.o3{width:440px;height:440px;margin:-220px 0 0 -220px;border-style:solid;border-color:rgba(74,222,128,.08);animation:mx-spin 46s linear infinite}
.mx-orbit.o3 i{background:#60a5fa;box-shadow:0 0 12px #60a5fa;width:6px;height:6px;margin-left:-3px;top:-3px}
@keyframes mx-spin{to{transform:rotate(360deg)}}
@media (max-width:760px){.mx-orbit.o1{width:200px;height:200px;margin:-100px 0 0 -100px}.mx-orbit.o2{width:250px;height:250px;margin:-125px 0 0 -125px}.mx-orbit.o3{display:none}}

/* engine pipeline (landing) */
.mx-pipe{margin:0 auto 46px;max-width:1000px}
.mx-pipe svg{width:100%;height:auto;display:block;overflow:visible}
.mx-pipe .mx-pipe-v{display:none}
.mx-pipe-node{animation:mx-node 3.2s ease-in-out infinite}
@keyframes mx-node{0%,100%{opacity:.85}50%{opacity:1}}
@media (max-width:760px){.mx-pipe .mx-pipe-h{display:none}.mx-pipe .mx-pipe-v{display:block;max-width:360px;margin:0 auto}}

/* motion-sensor opt-in chip (iOS only, where permission is required) */
.mx-gyro{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:120;display:flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:999px;border:1px solid rgba(96,165,250,.45);background:rgba(8,12,22,.92);backdrop-filter:blur(12px);
  color:#dbeafe;font:600 13px ui-sans-serif,system-ui,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.5);cursor:pointer;
  animation:mx-pop .5s var(--mx-spring)}
.mx-gyro button{all:unset;cursor:pointer;color:#6b7280;font-size:16px;padding:0 2px 0 6px;min-width:20px;text-align:center}
@keyframes mx-pop{from{opacity:0;transform:translateY(16px) scale(.9)}}

@media (prefers-reduced-motion:reduce){
  .mx-rv{opacity:1;translate:none;filter:none;transition:none}
  .mx-shine::after,.mx-breathe,.mx-bar-shimmer::after,.mx-orbit,.mx-pipe-node,.mx-caret::after{animation:none}
  .mx-draw{animation:none;stroke-dashoffset:0}
  .mx-fadein{animation:none;opacity:1}
  .mx-mag,.mx-tilt{transform:none !important}
  .mx-spot{display:none}
}