/* Montezy motion layer. Everything here is progressive: without JS, or with reduced motion, the page renders fully at rest. */

/* page fade-in */
@keyframes mz-page{from{opacity:.001}to{opacity:1}}
html.mz body{animation:mz-page .5s ease-out both}

/* scroll reveal (only applied by JS to elements below the fold) */
.mz-pre{opacity:0;transform:translateY(28px);filter:blur(4px)}
.mz-in{opacity:1;transform:none;filter:none;transition:opacity .9s cubic-bezier(.2,.7,.1,1),transform .9s cubic-bezier(.2,.7,.1,1),filter .9s ease;transition-delay:var(--d,0ms)}

/* hero headline word rise */
.mz-w{display:inline-block;opacity:0;transform:translateY(.45em) rotate(1.5deg);animation:mz-rise .9s cubic-bezier(.2,.8,.1,1) forwards;animation-delay:var(--d)}
@keyframes mz-rise{to{opacity:1;transform:none}}

/* aurora behind heroes */
.hero,.phero{isolation:isolate}
.mz-aurora{position:absolute;inset:-20% -10% auto -10%;height:140%;z-index:-1;pointer-events:none;overflow:hidden}
.mz-aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;mix-blend-mode:screen;animation:mz-drift 18s ease-in-out infinite alternate}
.mz-aurora i:nth-child(1){width:520px;height:520px;left:8%;top:18%;background:#2A5BFF}
.mz-aurora i:nth-child(2){width:420px;height:420px;right:6%;top:6%;background:#7A3CFF;animation-duration:22s;animation-delay:-6s}
.mz-aurora i:nth-child(3){width:380px;height:380px;left:42%;top:42%;background:#12B3D6;opacity:.35;animation-duration:26s;animation-delay:-12s}
@keyframes mz-drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-40px) scale(1.12)}100%{transform:translate(-50px,30px) scale(.94)}}
.mz-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%)}

/* hero product mock: float + tilt */
.mock{transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.1,1),box-shadow .6s;will-change:transform}
.mock.mz-float{animation:mz-float 7s ease-in-out infinite}
@keyframes mz-float{0%,100%{translate:0 0}50%{translate:0 -10px}}
.am.mz-new{animation:mz-slide .7s cubic-bezier(.2,.8,.1,1)}
@keyframes mz-slide{from{opacity:0;transform:translateY(-14px) scale(.98);background:var(--blue-soft)}to{opacity:1;transform:none}}

/* shine sweep on primary buttons */
.pillbtn{position:relative;overflow:hidden;isolation:isolate}
.pillbtn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s cubic-bezier(.2,.7,.1,1)}
.pillbtn:hover::after{transform:translateX(120%)}
.pillbtn:active{transform:scale(.97)}

/* header polish */
header.top{transition:background .35s ease,box-shadow .35s ease,backdrop-filter .35s}
header.top .nav{transition:height .35s cubic-bezier(.2,.7,.1,1)}
header.top.mz-compact .nav{height:64px}
.navlinks a{transition:background .25s,color .25s}

/* cards: lift + gradient ring */
.acct,.box,.sg,.rd,.step,.nitem,.ucard,.kpi{transition:transform .5s cubic-bezier(.2,.7,.1,1),box-shadow .5s,border-color .5s}
.acct:hover,.box:hover,.sg:hover,.rd:hover,.nitem:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(42,91,255,.35);border-color:#C9D3FF}
.ucard:hover{transform:translateY(-4px) scale(1.01)}
.acct{position:relative}
.acct::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,#2A5BFF,#7A3CFF,#12B3D6);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s;pointer-events:none}
.acct:hover::before{opacity:1}

/* payment cards: float, tilt, shine */
.cardstage .mc-a{animation:mz-cardA 8s ease-in-out infinite}
.cardstage .mc-b{animation:mz-cardB 9s ease-in-out infinite}
@keyframes mz-cardA{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-6deg) translateY(-12px)}}
@keyframes mz-cardB{0%,100%{transform:rotate(6deg) translateY(0)}50%{transform:rotate(4deg) translateY(-16px)}}
.mcard::before{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);transform:translateX(-60%);animation:mz-shine 6s ease-in-out infinite;pointer-events:none}
.mc-b::before{animation-delay:-3s}
@keyframes mz-shine{0%,60%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
.cardstage .mtx{animation:mz-pop 1s cubic-bezier(.2,.8,.1,1) .6s both}
@keyframes mz-pop{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:none}}

/* spotlight that follows the cursor on dark panels */
.dark-sec,.aiband,.cta,.teaser{position:relative}
.mz-spot{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(110,141,255,.18),transparent 60%);opacity:0;transition:opacity .4s;z-index:0}
.dark-sec:hover .mz-spot,.aiband:hover .mz-spot,.cta:hover .mz-spot,.teaser:hover .mz-spot{opacity:1}

/* marquee: pause on hover */
.marquee:hover .track{animation-play-state:paused}

/* FAQ smooth open */
details{transition:box-shadow .3s,border-color .3s}
details[open]{border-color:#C9D3FF;box-shadow:0 16px 40px -28px rgba(42,91,255,.4)}
details>p{overflow:hidden}

/* section heading underline accent */
.kicker2{position:relative}

/* progress bar at top */
#mz-progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#2A5BFF,#7A3CFF,#12B3D6);z-index:60;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  html.mz body{animation:none}
  .mz-pre{opacity:1;transform:none;filter:none}
  .mz-w{opacity:1;transform:none;animation:none}
  .mz-aurora i,.mock.mz-float,.cardstage .mcard,.mcard::before,.cardstage .mtx{animation:none!important}
  .pillbtn::after{display:none}
}