/* MAD TRADERS: motion layer. Everything here is decoration only and is switched off for visitors who prefer reduced motion. */
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(70px,50px) scale(1.18)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes shine{from{background-position:0 center}to{background-position:200% center}}
@keyframes pulseGlow{0%,100%{box-shadow:0 8px 30px #27d69a24}50%{box-shadow:0 8px 44px #27d69a66}}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.8);opacity:0}}
@keyframes sweep{0%,55%{left:-60%}100%{left:140%}}

.hero-copy>*{animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) backwards}
.hero-copy>:nth-child(2){animation-delay:.12s}.hero-copy>:nth-child(3){animation-delay:.24s}.hero-copy>:nth-child(4){animation-delay:.36s}.hero-copy>:nth-child(5){animation-delay:.48s}
.hero-visual{animation:fadeUp 1s .25s cubic-bezier(.2,.7,.2,1) backwards;transition:transform .18s ease-out}
.signal-float{animation:floaty 5s ease-in-out infinite}
.ambient-a{animation:drift 20s ease-in-out infinite alternate}
.ambient-b{animation:drift 26s ease-in-out infinite alternate-reverse}
.brand-mark span{transform-origin:bottom;animation:grow .7s cubic-bezier(.2,.8,.2,1) backwards}
.brand-mark span:nth-child(1){animation-delay:.15s}.brand-mark span:nth-child(2){animation-delay:.3s}.brand-mark span:nth-child(3){animation-delay:.45s}
.gradient-text{background-image:linear-gradient(100deg,#43e6b0,#9bffe0,#43e6b0);background-size:200% auto;animation:shine 5s linear infinite}
.chart-area svg path[stroke]{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.4s .5s ease forwards}
.chart-area svg path:not([stroke]){animation:fadeIn 1.6s 1.4s ease backwards}
.live-dot{position:relative}
.live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 1.8s ease-out infinite}

.button-primary{position:relative;overflow:hidden;animation:pulseGlow 3.2s ease-in-out infinite}
.button-primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffff55,transparent);transform:skewX(-20deg);animation:sweep 4.5s ease-in-out infinite;pointer-events:none}
.button:hover{transform:translateY(-2px)}

.feature-card,.plan-card,.metrics>div{transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.feature-card:hover,.plan-card:hover,.metrics>div:hover{transform:translateY(-6px);border-color:#38dda566;box-shadow:0 22px 50px #0007,0 0 0 1px #38dda533}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#38dda5,#6657ff);z-index:9999;pointer-events:none}

.demo-modal{position:fixed;inset:0;background:#000c;display:grid;place-items:center;z-index:10000;padding:20px;backdrop-filter:blur(6px)}
.demo-modal[hidden]{display:none}
.demo-box{position:relative;width:min(900px,100%);border:1px solid #ffffff22;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 40px 120px #000a;animation:fadeUp .35s both}
.demo-box video{display:block;width:100%;max-height:80vh}
.demo-close{position:absolute;top:8px;right:10px;z-index:2;width:36px;height:36px;border-radius:50%;border:1px solid #ffffff33;background:#000a;color:#fff;font-size:20px;line-height:1;cursor:pointer}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .chart-area svg path[stroke]{stroke-dashoffset:0}
}
.button[hidden],[hidden].demo-modal{display:none!important}

/* ===== Round 2: bigger, interactive motion + brighter accent theme ===== */
@keyframes spin{to{--ang:360deg}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes ripple{to{transform:scale(3.2);opacity:0}}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}

.ambient{opacity:.2!important}
.gradient-text{background-image:linear-gradient(100deg,#43e6b0,#5ad7ff,#9a8cff,#43e6b0)}
.hero{position:relative;isolation:isolate}
.hero-canvas{position:absolute;left:0;top:-60px;width:100%;height:calc(100% + 60px);z-index:-1;pointer-events:none}

.glow-border{position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--ang),transparent 0 55%,#38dda5 72%,#5ad7ff 84%,#9a8cff 92%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 5s linear infinite}

.cursor-glow{position:fixed;left:0;top:0;width:460px;height:460px;margin:-230px 0 0 -230px;border-radius:50%;background:radial-gradient(circle,#38dda52b,#6657ff12 45%,transparent 68%);pointer-events:none;z-index:2;opacity:0;transition:opacity .4s;mix-blend-mode:screen}
.spot{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),#38dda533,transparent 62%);mix-blend-mode:screen}
.feature-card:hover .spot,.plan-card:hover .spot{opacity:1}
.feature-card:hover .feature-icon{transform:rotate(-10deg) scale(1.18)}
.feature-icon{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.mini-row{transition:background .2s,transform .2s}
.mini-row:hover{background:#38dda510;transform:translateX(5px)}

.button{position:relative;overflow:hidden}
.button span{display:inline-block;transition:transform .25s}
.button:hover span{transform:translateX(5px)}
.button-primary:hover{box-shadow:0 12px 52px #27d69a99}
.ripple{position:absolute;border-radius:50%;background:#ffffff55;transform:scale(0);animation:ripple .65s ease-out forwards;pointer-events:none}
.nav-link{background:linear-gradient(#38dda5,#38dda5) 0 100%/0 2px no-repeat;transition:background-size .3s,color .2s}
.nav-link:hover{background-size:100% 2px}

.marquee{overflow:hidden;border-block:1px solid #ffffff12;background:#0b111980;padding:15px 0;margin:60px 0 0;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font:700 13px/1 "DM Sans",sans-serif;letter-spacing:3px;color:#8fa0ad;padding:0 34px;white-space:nowrap;position:relative}
.marquee span::after{content:"◆";position:absolute;right:-6px;color:#38dda5;font-size:9px}

.reveal.rv-l:not(.in){transform:translateX(-50px)}
.reveal.rv-r:not(.in){transform:translateX(50px)}
.reveal.rv-z:not(.in){transform:scale(.9) translateY(20px)}