/* JAF motion + sci-fi layer (2026-10-13). Scoped to the Nova/Aqua look; every loop is off for prefers-reduced-motion and on trading screens (html[data-calm]). */
html[data-fx="nova"]{--mo-a:var(--accent,#14a0a2);--mo-b:var(--accent-2,#c79a45);--mo-ease:cubic-bezier(.2,.8,.2,1)}

/* ambient sci-fi backdrop: drifting grid + aurora, click-through, very low opacity */
.mo-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;opacity:.9;contain:strict;transform:translateZ(0)}
.mo-bg .g{position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--mo-a) 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--mo-a) 8%,transparent) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 72%)}
.mo-bg .a{position:absolute;width:46vmax;height:46vmax;border-radius:50%;opacity:.5;will-change:transform}
.mo-bg .a1{background:radial-gradient(circle,color-mix(in srgb,var(--mo-a) 22%,transparent),transparent 68%);left:-12vmax;top:-14vmax;animation:moDrift1 38s ease-in-out infinite alternate}
.mo-bg .a2{background:radial-gradient(circle,color-mix(in srgb,var(--mo-b) 18%,transparent),transparent 68%);right:-14vmax;bottom:-18vmax;animation:moDrift2 46s ease-in-out infinite alternate;opacity:.12}
@keyframes moGrid{to{transform:translate(56px,56px)}}
@keyframes moDrift1{to{transform:translate(18vmax,10vmax) scale(1.2)}}
@keyframes moDrift2{to{transform:translate(-16vmax,-9vmax) scale(1.15)}}
html[data-calm] .mo-bg .g,html[data-calm] .mo-bg .a{animation:none}

/* scroll progress */
.mo-prog{position:fixed;left:0;top:0;height:2px;width:100%;z-index:9999;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--mo-a),var(--mo-b));box-shadow:0 0 10px var(--mo-a);pointer-events:none}

/* header scan line */
html[data-fx="nova"] .tbar{position:relative}
html[data-fx="nova"] .tbar::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:34%;pointer-events:none;background:linear-gradient(90deg,transparent,var(--mo-a),var(--mo-b),transparent);opacity:.75;animation:moScan 7s linear infinite}
@keyframes moScan{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
html[data-calm] .tbar::after{animation-duration:14s;opacity:.5}

/* page entrance */
html[data-fx="nova"] main.stage,html[data-fx="nova"] main.guest{animation:moPage .55s ease-out}
@keyframes moPage{from{opacity:0}}

/* staggered reveal (JS adds mo-r then mo-in, then removes both) */
.mo-r{opacity:0;transform:translateY(28px)}
.mo-r.mo-in{opacity:1;transform:none;transition:opacity .6s var(--mo-ease),transform .6s var(--mo-ease);transition-delay:var(--d,0ms)}
html[data-calm] .mo-r{transform:translateY(8px);filter:none}
html[data-calm] .mo-r.mo-in{transition-duration:.35s}

/* cards: lift, glow, cursor spotlight, HUD corners */
.mo-card{position:relative;transition:transform .3s var(--mo-ease),box-shadow .3s var(--mo-ease),border-color .3s}
.mo-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--mo-a) 14%,transparent),transparent 70%)}
.mo-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--mo-a) 55%,var(--line,#cde5e2));box-shadow:0 14px 34px -16px color-mix(in srgb,var(--mo-a) 55%,transparent),0 0 0 1px color-mix(in srgb,var(--mo-a) 20%,transparent)}
.mo-card:hover::after{opacity:1}
html[data-calm] .mo-card:hover{transform:none}
.mo-hud{position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;opacity:.0;transition:opacity .35s;
 --c:var(--mo-a);background:
 linear-gradient(var(--c),var(--c)) top left/14px 2px no-repeat,linear-gradient(var(--c),var(--c)) top left/2px 14px no-repeat,
 linear-gradient(var(--c),var(--c)) top right/14px 2px no-repeat,linear-gradient(var(--c),var(--c)) top right/2px 14px no-repeat,
 linear-gradient(var(--c),var(--c)) bottom left/14px 2px no-repeat,linear-gradient(var(--c),var(--c)) bottom left/2px 14px no-repeat,
 linear-gradient(var(--c),var(--c)) bottom right/14px 2px no-repeat,linear-gradient(var(--c),var(--c)) bottom right/2px 14px no-repeat}
.mo-card:hover>.mo-hud{opacity:.9}
.mo-card.mo-pulse>.mo-hud{animation:moHud 3.2s ease-in-out infinite}
@keyframes moHud{50%{opacity:.55}}
html[data-calm] .mo-card.mo-pulse>.mo-hud{animation:none}

/* nav */
html[data-fx="nova"] .tbar a.navlink,html[data-fx="nova"] .nav-item>a,html[data-fx="nova"] .nav-item>button{position:relative}
html[data-fx="nova"] .nav-item>a::before,html[data-fx="nova"] .nav-item>button::before,html[data-fx="nova"] a.navlink::before{content:"";position:absolute;left:12%;right:12%;bottom:2px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--mo-a),var(--mo-b));transform:scaleX(0);transform-origin:50% 50%;transition:transform .35s var(--mo-ease);pointer-events:none}
html[data-fx="nova"] .nav-item>a:hover::before,html[data-fx="nova"] .nav-item>button:hover::before,html[data-fx="nova"] .nav-item.open>button::before,html[data-fx="nova"] a.navlink:hover::before,html[data-fx="nova"] a.navlink.on::before,html[data-fx="nova"] .nav-item>.active::before{transform:scaleX(1)}
html[data-fx="nova"] .nav-item.open .drop-panel,html[data-fx="nova"] .drop.open .drop-panel,html[data-fx="nova"] .menu.open{animation:moDrop .28s var(--mo-ease) both;transform-origin:50% 0}
@keyframes moDrop{from{opacity:0;transform:translateY(-8px) scale(.97)}}
html[data-fx="nova"] .drop-panel a,html[data-fx="nova"] .menu a{transition:background .2s,padding-left .25s var(--mo-ease),color .2s}
html[data-fx="nova"] .drop-panel a:hover,html[data-fx="nova"] .menu a:hover{padding-left:calc(var(--pl,12px) + 4px)}

/* buttons: press + ripple + lift */
html[data-fx="nova"] button,html[data-fx="nova"] .btn,html[data-fx="nova"] .hm-btn{transition:transform .18s var(--mo-ease),box-shadow .25s,background .2s,border-color .2s,color .2s;position:relative}
html[data-fx="nova"] button:not(:disabled):hover,html[data-fx="nova"] .btn:hover,html[data-fx="nova"] .hm-btn:hover{transform:translateY(-1px)}
html[data-fx="nova"] button:not(:disabled):active,html[data-fx="nova"] .btn:active,html[data-fx="nova"] .hm-btn:active{transform:translateY(0) scale(.96)}
.mo-rip{position:absolute;border-radius:50%;pointer-events:none;width:10px;height:10px;margin:-5px 0 0 -5px;background:color-mix(in srgb,var(--mo-a) 45%,transparent);animation:moRip .6s ease-out forwards}
@keyframes moRip{to{transform:scale(22);opacity:0}}
html[data-fx="nova"] button,html[data-fx="nova"] .btn,html[data-fx="nova"] .hm-btn{overflow:hidden}
html[data-fx="nova"] .wbtns button,html[data-fx="nova"] .wpin,html[data-fx="nova"] .wkill{overflow:visible}

/* inputs */
html[data-fx="nova"] input,html[data-fx="nova"] select,html[data-fx="nova"] textarea{transition:border-color .25s,box-shadow .3s var(--mo-ease),background .25s}
html[data-fx="nova"] input:focus,html[data-fx="nova"] select:focus,html[data-fx="nova"] textarea:focus{animation:moFocus .5s var(--mo-ease)}
@keyframes moFocus{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--mo-a) 45%,transparent)}to{box-shadow:0 0 0 6px color-mix(in srgb,var(--mo-a) 0%,transparent)}}

/* tables */
html[data-fx="nova"] main table tbody tr{transition:background .2s,box-shadow .25s}
html[data-fx="nova"] main table tbody tr:hover{background:color-mix(in srgb,var(--mo-a) 7%,transparent);box-shadow:inset 3px 0 0 var(--mo-a)}
.mo-row{animation:moRow .55s var(--mo-ease) both,moRowHi 1.6s ease-out}
@keyframes moRow{from{opacity:0;transform:translateX(-14px)}}
@keyframes moRowHi{from{background:color-mix(in srgb,var(--mo-b) 24%,transparent)}to{background:transparent}}

/* live number flashes (data-meaningful: green = rose, red = fell) */
.mo-up{animation:moUp .9s ease-out}
.mo-dn{animation:moDn .9s ease-out}
@keyframes moUp{0%{color:var(--buy,#1a9a58);text-shadow:0 0 14px color-mix(in srgb,var(--buy,#1a9a58) 70%,transparent);background:color-mix(in srgb,var(--buy,#1a9a58) 18%,transparent)}100%{background:transparent;text-shadow:none}}
@keyframes moDn{0%{color:var(--sell,#d6455b);text-shadow:0 0 14px color-mix(in srgb,var(--sell,#d6455b) 70%,transparent);background:color-mix(in srgb,var(--sell,#d6455b) 18%,transparent)}100%{background:transparent;text-shadow:none}}

/* loading shimmer */
.mo-loading{background:linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--mo-a) 22%,transparent) 50%,transparent 100%) 0 0/200% 100% no-repeat;-webkit-background-clip:text;background-clip:text;animation:moShim 1.4s linear infinite;opacity:.75}
@keyframes moShim{to{background-position:-200% 0}}


/* status dots breathe */
html[data-fx="nova"] .dot.on,html[data-fx="nova"] .led.on,html[data-fx="nova"] .sb-dot.ok{animation:moBreath 2.4s ease-in-out infinite}
@keyframes moBreath{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--buy,#1a9a58) 0%,transparent);opacity:.75}}

@media (prefers-reduced-motion:reduce){.mo-bg .g,.mo-bg .a{animation-duration:120s}}

/* guaranteed stagger for page sections (no JS needed; backwards fill only, so no lingering transform) */
html[data-fx="nova"] main.stage>*{animation:moRise .75s var(--mo-ease) backwards}
html[data-fx="nova"] main.stage>*:nth-child(2){animation-delay:.08s}
html[data-fx="nova"] main.stage>*:nth-child(3){animation-delay:.16s}
html[data-fx="nova"] main.stage>*:nth-child(4){animation-delay:.24s}
html[data-fx="nova"] main.stage>*:nth-child(5){animation-delay:.32s}
html[data-fx="nova"] main.stage>*:nth-child(n+6){animation-delay:.4s}
@keyframes moRise{from{opacity:0;transform:translateY(22px)}}
html[data-calm] main.stage>*{animation-duration:.4s}
.tbar .navlink,.tbar .nav-item{animation:moDown .6s var(--mo-ease) backwards}
.tbar .nav-item:nth-child(2){animation-delay:.06s}.tbar .nav-item:nth-child(3){animation-delay:.12s}.tbar .nav-item:nth-child(4){animation-delay:.18s}.tbar .nav-item:nth-child(5){animation-delay:.24s}
@keyframes moDown{from{opacity:0;transform:translateY(-12px)}}

/* scroll performance: no hover effects while scrolling, none on big containers */
html.mo-scrolling .mo-card,html.mo-scrolling .mo-card:hover{transform:none!important;transition:none!important;box-shadow:inherit}
html.mo-scrolling .mo-card::after,html.mo-scrolling .mo-hud{display:none}
.mo-big:hover{transform:none!important;box-shadow:none!important}
.mo-big::after,.mo-big>.mo-hud{display:none}