/* NEXU — capa de movimiento. Va aparte de style.css para no tocar el diseño aprobado.
   Todo vive bajo prefers-reduced-motion:no-preference; lo que oculta contenido además
   exige html.m (lo pone un script en <head>), así que sin JS la página se ve completa. */
h1 .ln{display:block}

@media (prefers-reduced-motion:no-preference){

/* ── Hero: entrada ───────────────────────────────────────────── */
@keyframes nxRise{from{opacity:0;translate:0 26px;filter:blur(6px)}}
@keyframes nxLine{from{translate:0 108%;rotate:2deg}}
@keyframes nxPop{from{opacity:0;scale:.82}}
@keyframes nxFade{from{opacity:0}}

html.m .hero-tag{animation:nxRise .9s cubic-bezier(.2,.7,.2,1) .1s both}
html.m h1 .ln{overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
html.m h1 .ln>span{display:inline-block;transform-origin:left bottom;animation:nxLine 1.15s cubic-bezier(.2,.75,.15,1) both}
html.m h1 .ln:nth-child(1)>span{animation-delay:.22s}
html.m h1 .ln:nth-child(2)>span{animation-delay:.38s}
html.m h1 .ln:nth-child(3)>span{animation-delay:.54s}
html.m .hero-copy>p:not(.risk-mini){animation:nxRise 1s cubic-bezier(.2,.7,.2,1) .62s both}
html.m .hero-actions{animation:nxRise 1s cubic-bezier(.2,.7,.2,1) .76s both}
html.m .risk-mini{animation:nxFade 1s ease .95s both}
html.m .hero-signatures>div{animation:nxRise .9s cubic-bezier(.2,.7,.2,1) both}
html.m .hero-signatures>div:nth-child(1){animation-delay:1s}
html.m .hero-signatures>div:nth-child(2){animation-delay:1.12s}
html.m .hero-signatures>div:nth-child(3){animation-delay:1.24s}

/* Brillo que recorre «dimensión.» */
@keyframes nxSheen{0%,55%{background-position:120% 0}100%{background-position:-20% 0}}
.hero h1 em{background:linear-gradient(100deg,#d6ab61 0 40%,#f7e2b0 50%,#d6ab61 60% 100%) 120% 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:nxSheen 6s ease-in-out 1.6s infinite}

/* ── Hero: composición flotante ──────────────────────────────────
   Flotan con `translate`, que se suma al `transform` (inclinación) de cada pieza.
   --mx/--my (-1…1) los pone motion.js con el puntero; --d es la profundidad. */
@keyframes nxFloat{
  0%,100%{translate:calc(var(--mx,0)*var(--d,0px)) calc(var(--my,0)*var(--d,0px))}
  50%{translate:calc(var(--mx,0)*var(--d,0px)) calc(var(--my,0)*var(--d,0px) + var(--a,-12px))}}
@keyframes nxSway{0%,100%{rotate:0deg}50%{rotate:var(--r,2deg)}}

.hero-visual .graph-float{--d:28px;--a:-14px;--r:-1.5deg;animation:nxPop 1.1s cubic-bezier(.2,.8,.2,1.15) .55s both,nxFloat 7s ease-in-out infinite,nxSway 9s ease-in-out infinite}
.hero-visual .feature-float{--d:16px;--a:-10px;animation:nxPop 1.1s cubic-bezier(.2,.8,.2,1.15) .75s both,nxFloat 8.5s ease-in-out -2s infinite}
.hero-visual .asset-float{--d:38px;--a:-18px;--r:2deg;animation:nxPop 1.1s cubic-bezier(.2,.8,.2,1.15) .95s both,nxFloat 6.5s ease-in-out -4s infinite,nxSway 8s ease-in-out -3s infinite}
.hero-visual .brand-float{--d:22px;--a:-13px;--r:-2.5deg;animation:nxPop 1.1s cubic-bezier(.2,.8,.2,1.15) 1.15s both,nxFloat 7.8s ease-in-out -1s infinite,nxSway 10s ease-in-out -5s infinite}
.hero-visual .floating-label{animation:nxFade 1.2s ease 1.4s both}

/* Línea del gráfico que se dibuja y se repite */
@keyframes nxDraw{0%{stroke-dashoffset:1}40%,82%{stroke-dashoffset:0;opacity:1}94%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1;opacity:0}}
@keyframes nxArea{0%,22%{opacity:0}45%,82%{opacity:1}94%,100%{opacity:0}}
.graph-float svg path[stroke]{stroke-dasharray:1;animation:nxDraw 7s cubic-bezier(.45,.1,.25,1) .9s infinite both}
.graph-float svg path[fill^="url"]{animation:nxArea 7s ease .9s infinite both}

/* Velas que respiran */
@keyframes nxBar{0%,100%{scale:1 1}50%{scale:1 .55}}
.mini-bars i{transform-origin:50% 100%;animation:nxBar 2.4s ease-in-out infinite}
.mini-bars i:nth-child(2){animation-delay:-.4s}.mini-bars i:nth-child(3){animation-delay:-.9s}
.mini-bars i:nth-child(4){animation-delay:-1.5s}.mini-bars i:nth-child(5){animation-delay:-.2s}
.mini-bars i:nth-child(6){animation-delay:-1.1s}.mini-bars i:nth-child(7){animation-delay:-1.8s}

/* Destello dorado sobre la X */
@keyframes nxGlint{0%,62%{translate:-160% 0}100%{translate:160% 0}}
.brand-float{overflow:hidden}
.brand-float::after{content:'';position:absolute;inset:-20% 0;background:linear-gradient(105deg,transparent 35%,#ffe7a033 50%,transparent 65%);animation:nxGlint 5.5s ease-in-out 2s infinite;pointer-events:none}

/* Puntos de estado con pulso */
@keyframes nxPulse{0%{box-shadow:0 0 0 0 #d6ab6190}100%{box-shadow:0 0 0 9px #d6ab6100}}
.status{animation:nxPulse 2s ease-out infinite}

/* Halo de fondo que respira */
@keyframes nxBreathe{0%,100%{opacity:1;scale:1}50%{opacity:.6;scale:1.08}}
.hero-bg{animation:nxBreathe 10s ease-in-out infinite}

/* ── Franja de mercados en bucle ─────────────────────────────── */
@keyframes nxMarquee{to{translate:-50% 0}}
.markets-strip.mq{display:block;overflow:hidden;padding-inline:0;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.markets-strip.mq .mq-track{display:flex;width:max-content;animation:nxMarquee 75s linear infinite}
.markets-strip.mq:hover .mq-track{animation-play-state:paused}
.markets-strip.mq span{padding-right:clamp(70px,9vw,150px)}

/* ── Apariciones al hacer scroll ─────────────────────────────── */
html.m [data-rv]{opacity:0;translate:0 34px;filter:blur(5px);transition:opacity .95s cubic-bezier(.2,.7,.2,1),translate .95s cubic-bezier(.2,.7,.2,1),filter .95s ease;transition-delay:calc(var(--i,0)*110ms)}
html.m [data-rv].in{opacity:1;translate:0 0;filter:none}
html.m .market-card[data-rv].in{transition-delay:0s}

/* Iconos de mercado flotando */
.market-icon{animation:nxFloat 5s ease-in-out infinite;--a:-7px}
.market-card:nth-child(2) .market-icon{animation-delay:-1.2s}
.market-card:nth-child(3) .market-icon{animation-delay:-2.5s}
.market-card:nth-child(4) .market-icon{animation-delay:-3.7s}

/* Dispositivos */
.device-scene .desktop-device{--a:-10px;animation:nxFloat 9s ease-in-out infinite}
.device-scene .phone-device{--a:-18px;animation:nxFloat 6.5s ease-in-out -2s infinite}
.device-scene .device-badge{--a:-9px;animation:nxFloat 7.5s ease-in-out -4s infinite}
.device-glow{animation:nxBreathe 8s ease-in-out infinite}

/* Simulador x10: el número cambia con un pequeño salto */
@keyframes nxTick{from{opacity:.25;translate:0 6px}}
.calc-breakdown strong.tick,#account-total.tick,#fund-price.tick{animation:nxTick .45s cubic-bezier(.2,.7,.2,1)}
.allocation i{transition:width .6s cubic-bezier(.2,.7,.2,1)}

/* Cierre */
@keyframes nxSpin{to{rotate:360deg}}
.closing-orb{animation:nxSpin 40s linear infinite}
.closing>img{--a:-16px;--r:5deg;animation:nxFloat 8s ease-in-out infinite,nxSway 12s ease-in-out infinite}
}