/* indeploy motion + design-v2 layer (loaded after inline base CSS) */

/* ---- design-v2 accent refinements ---- */
.btn{background:linear-gradient(180deg,#13d3c4,#03b1a6);box-shadow:0 1px 0 #ffffff22 inset,0 6px 18px #00c7b733}
.btn:hover{background:linear-gradient(180deg,#1ad9ca,#06b8ad);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn,.btn.sec,.btn.danger,.btn.indigo,.upg,.card,.pill,input,select,textarea{transition:all .16s cubic-bezier(.2,.7,.3,1)}
.card{backdrop-filter:saturate(1.05)}
.pill.ok{box-shadow:0 0 0 1px #1d523833,0 0 14px #28b76b22}

/* ---- page entrance ---- */
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.content,.authcard,.mkt-nav,.hero{animation:pageIn .5s cubic-bezier(.2,.7,.3,1) both}

/* ---- scroll reveal (JS adds .in) ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.06s}.reveal.d2{transition-delay:.12s}.reveal.d3{transition-delay:.18s}.reveal.d4{transition-delay:.24s}

/* ---- aurora hero ---- */
.hero{position:relative}
.hero .aurora{position:absolute;inset:-20% -10% auto -10%;height:160%;z-index:0;pointer-events:none;filter:blur(40px);opacity:.6}
.hero .aurora b{position:absolute;border-radius:50%;mix-blend-mode:screen;animation:float 14s ease-in-out infinite}
.hero .aurora b:nth-child(1){width:520px;height:520px;left:55%;top:-10%;background:radial-gradient(circle,#06d2c6,transparent 60%)}
.hero .aurora b:nth-child(2){width:460px;height:460px;left:72%;top:20%;background:radial-gradient(circle,#3b6bff,transparent 60%);animation-delay:-4s}
.hero .aurora b:nth-child(3){width:380px;height:380px;left:40%;top:-20%;background:radial-gradient(circle,#7c3bff,transparent 60%);animation-delay:-8s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-30px,30px) scale(1.08)}66%{transform:translate(24px,-20px) scale(.96)}}
.hero .wrap{position:relative;z-index:1}

/* ---- parallax browser mock ---- */
.browser{transition:transform .25s ease-out;transform:perspective(1200px) rotateY(-7deg) rotateX(3deg)}
.hero-grid:hover .browser{transform:perspective(1200px) rotateY(-3deg) rotateX(1deg)}
.browser .body .k{animation:popIn .6s .2s both}
@keyframes popIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}

/* ---- logo marquee ---- */
.logos{flex-wrap:nowrap;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.logos .track{display:flex;gap:38px;animation:marq 22s linear infinite;white-space:nowrap}
.logos:hover .track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---- button shine ---- */
.btn.lg{position:relative;overflow:hidden}
.btn.lg::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,#ffffff66,transparent);transform:skewX(-18deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,72%{left:-120%}86%{left:130%}100%{left:130%}}

/* ---- ask AI pulse ---- */
.askai{animation:bob 3s ease-in-out infinite}
.askai::before{content:"";position:absolute;inset:0;border-radius:999px;box-shadow:0 0 0 0 #00c7b766;animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #00c7b766}70%{box-shadow:0 0 0 16px #00c7b700}100%{box-shadow:0 0 0 0 #00c7b700}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ---- sidebar active sliding indicator ---- */
.nav{position:relative}
.nav .indicator{position:absolute;left:8px;width:3px;border-radius:3px;background:var(--teal);transition:top .28s cubic-bezier(.2,.7,.3,1),height .28s;box-shadow:0 0 12px #00c7b7aa;opacity:0}
.nav a{position:relative}
.nav a.on{background:linear-gradient(90deg,#00c7b71f,transparent)}

/* ---- card hover lift ---- */
.fcard,.step,.pcard,.card.lift{will-change:transform}
.card.lift:hover{transform:translateY(-2px);border-color:#2f6f69}
a:has(>.card),.projrow:hover{}
.projrow{transition:background .15s,transform .15s}
.projrow:hover{background:#1b212a}

/* ---- count-up + stat shimmer ---- */
.stat[data-count]{font-variant-numeric:tabular-nums}

/* ---- building shimmer ---- */
.pill.run{position:relative;overflow:hidden}
.pill.run::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffffff2e,transparent);transform:translateX(-100%);animation:sweep 1.4s infinite}
@keyframes sweep{to{transform:translateX(100%)}}

/* ---- skeleton ---- */
.skel{background:linear-gradient(90deg,#1a1f27,#222a34,#1a1f27);background-size:200% 100%;animation:skel 1.3s infinite;border-radius:6px;height:14px}
@keyframes skel{to{background-position:-200% 0}}

/* ---- toasts ---- */
#toasts{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;flex-direction:column;gap:10px}
.toast-n{background:#11161d;border:1px solid var(--bd2);color:var(--fg);padding:12px 14px;border-radius:10px;box-shadow:0 12px 34px #00000066;display:flex;align-items:center;gap:10px;animation:toastIn .4s cubic-bezier(.2,.7,.3,1) both;max-width:340px}
.toast-n.ok{border-color:#1d6440}.toast-n .ic{color:var(--teal)}
@keyframes toastIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(30px)}}

/* ---- confetti canvas ---- */
#confetti{position:fixed;inset:0;pointer-events:none;z-index:90}

/* ---- nav link slide ---- */
.nav a svg{transition:transform .15s}
.nav a:hover svg{transform:scale(1.12)}

/* ---- drag & drop deploy ---- */
.ddzone{border:1.6px dashed #3a434e;border-radius:12px;padding:30px;text-align:center;transition:border-color .15s,background .15s;cursor:pointer}
.ddzone.over{border-color:var(--teal);background:#00c7b70f}
.ddzone .ic{color:var(--teal);margin-bottom:8px;display:flex;justify-content:center}
.ddzone .dd-browse-folder,.ddzone .dd-browse-zip{color:var(--teal)}

/* ---- token counter pop ---- */
.tokchip{transition:transform .2s}
.tokchip.bump{transform:scale(1.18)}

@media (prefers-reduced-motion: reduce){
 *,*::before,*::after{animation:none !important;transition:none !important}
 .reveal{opacity:1;transform:none}
 .browser{transform:none}
}