/* motion3d.css v2 — smooth 3D system (Nov 3, v2). Pairs with motion3d.js. Only transform/opacity animate; every hidden/3D state
   applies only after motion3d.js adds .mo3d to <html>, so content stays visible if JS fails. */

/* ---------- performance: no full-page blur, light layers ---------- */
.nav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.mo-on .mo.in{will-change:auto}
@keyframes moShine{0%{transform:translateX(0) skewX(-20deg)}100%{transform:translateX(420%) skewX(-20deg)}}
@keyframes m3ShineLoop{0%{transform:translateX(0) skewX(-20deg)}28%,100%{transform:translateX(420%) skewX(-20deg)}}
.cta-row .btn-primary::after,.cta-row .btn-gold::after{animation:m3ShineLoop 4.2s 1.2s ease-in-out infinite both}

/* ---------- hero phone (Appvora .ph3d / Web to App .p-front) ---------- */
@keyframes m3Phone{0%,100%{transform:translate3d(0,0,0) rotateX(7deg) rotateY(-16deg) rotateZ(-2deg)}50%{transform:translate3d(0,-14px,0) rotateX(2deg) rotateY(-4deg) rotateZ(1deg)}}
@keyframes m3PhoneC{0%,100%{transform:translateX(-50%) translate3d(0,0,0) rotateX(6deg) rotateY(-12deg)}50%{transform:translateX(-50%) translate3d(0,-14px,0) rotateX(1deg) rotateY(10deg)}}
@keyframes m3Sheen{0%,55%{transform:translateX(-120%) skewX(-18deg)}80%,100%{transform:translateX(240%) skewX(-18deg)}}
.ph3d-wrap{position:absolute;width:47%;right:5%;top:3%;z-index:3;perspective:1100px}
.ph3d{position:relative;aspect-ratio:420/860;border-radius:36px;padding:9px;background:linear-gradient(155deg,#2b2b33,#0c0c10 60%,#26262e);box-shadow:0 46px 70px -28px rgba(90,30,0,.62),0 0 0 2px rgba(255,255,255,.14) inset;transform-style:preserve-3d;transform:rotateY(-12deg) rotateX(6deg)}
.ph3d:before{content:"";position:absolute;top:15px;left:50%;width:30%;height:16px;margin-left:-15%;border-radius:12px;background:#0b0b0e;z-index:3;transform:translateZ(2px)}
.ph3d-scr{position:relative;width:100%;height:100%;border-radius:28px;overflow:hidden;background:#fff;transform:translateZ(1px);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.ph3d-scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:0}
.ph3d-scr img+img{opacity:0}
.ph3d-scr:after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);transform:translateX(-120%) skewX(-18deg);pointer-events:none;z-index:2}
.ph3d-scr.css-slide img{opacity:0}
.ph3d-scr.css-slide img:first-child{opacity:1}
.ph3d-dots{position:absolute;left:0;right:0;bottom:-26px;display:flex;justify-content:center;gap:9px}
.ph3d-dots i{width:8px;height:8px;border-radius:9px;background:#fff;opacity:.45;box-shadow:0 2px 6px rgba(120,40,0,.35)}
.ph3d-dots i:first-child{opacity:1}
.chip .ph-st i.live.test{background:#F59E0B}
.chip.chv-on{padding-top:8px;padding-bottom:8px}
.chv-stack{display:grid}
.chv{grid-area:1/1;display:flex;align-items:center;gap:10px;opacity:0}
.chv:first-child{opacity:1}
.chv img{width:40px;height:40px;border-radius:10px;flex:none}
.chv b{display:block}
.mo3d .ph3d{animation:m3Phone 7.5s ease-in-out infinite}
.mo3d .p-front{animation:m3PhoneC 8s ease-in-out infinite;transform-style:preserve-3d}
.mo3d .ph3d-scr:after{animation:m3Sheen 5.2s ease-in-out infinite}
.mo3d .p-front .ph3d-scr{border-radius:26px}

/* real thickness: 6 stacked edge layers + a branded back plate */
.ph-thick{transform-style:preserve-3d;rotate:y var(--spin,0deg)}
.ph-thick.spring{transition:rotate 1.1s cubic-bezier(.22,.9,.24,1.08)}
.ph-edge{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#4a4a55,#15151b 30%,#0d0d12 70%,#3a3a44);transform:translateZ(var(--z));pointer-events:none}
.ph-back{position:absolute;inset:0;border-radius:inherit;display:grid;place-items:center;background:linear-gradient(150deg,#FFB04A,#FF6A00 55%,#D94800);transform:translateZ(-13px) rotateY(180deg);-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:none;box-shadow:inset 0 0 0 3px rgba(255,255,255,.22)}
.ph-back img{width:42%;height:auto;border-radius:22%}
.ph-back:before{content:"";position:absolute;top:7%;left:9%;width:26%;aspect-ratio:1;border-radius:28%;background:linear-gradient(150deg,#2a2a30,#0b0b0e);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.hero-art{cursor:grab}

/* hero group: real 3D depth, tips away as you scroll (CSS scroll-driven, runs off the main thread) */
@keyframes m3HeroIn{from{opacity:0;scale:.94}to{opacity:1;scale:1}}
@keyframes m3HeroOut{from{rotate:none;translate:none}to{rotate:1 -.5 0 24deg;translate:0 80px}}
html.mo3d .hero .hero-in{perspective:1400px}
html.mo3d .hero .hero-art{transform-style:preserve-3d}
html.mo3d .hero-art .chip,html.mo3d .hero-art .float-chip{transform:translateZ(60px)}
html.mo3d .hero-art .hero-mark{transform:translateZ(40px)}
html.mo3d.sda .hero .hero-art:not(.reveal){animation:m3HeroIn 1s .25s cubic-bezier(.2,.75,.2,1) both,m3HeroOut linear both;animation-timeline:auto,scroll(root);animation-range:normal,0px 90vh}
html.mo3d.sda .hero .hero-art.reveal{animation:m3HeroOut linear both;animation-timeline:scroll(root);animation-range:0px 90vh}

/* ---------- split-text headlines ---------- */
@keyframes m3Word{from{opacity:0;transform:translate3d(0,.55em,0) rotateX(-85deg)}to{opacity:1;transform:none}}
html.mo3d .st-split .sw{display:inline-block;perspective:700px}
html.mo3d .st-split .swi{display:inline-block;transform-origin:50% 100%}
html.mo3d h2.st-split .swi{opacity:0}
html.mo3d .st-split.in .swi{animation:m3Word .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*65ms + .05s)}
html.mo3d .hero h1.st-split .swi{animation-delay:calc(var(--i,0)*70ms + .15s)}
.mo-on.mo3d .hero-copy>h1{animation:none}

/* ---------- 3D cards ---------- */
@keyframes m3CardIn{from{opacity:0;transform:perspective(1000px) translate3d(0,70px,0) rotateX(38deg) rotateY(calc(var(--dir,1)*-12deg)) scale(.9)}to{opacity:1;transform:perspective(1000px) translate3d(0,0,0) rotateX(0) rotateY(0) scale(1)}}
html.mo3d .t3d{transition:transform .6s cubic-bezier(.2,.75,.2,1),box-shadow .35s ease,opacity .8s ease,translate .8s cubic-bezier(.2,.75,.2,1)}
html.mo3d .t3d.tilting{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out,box-shadow .3s ease;box-shadow:0 34px 60px -26px rgba(110,40,0,.5)}
/* modern browsers: the rise-in is scrubbed by scroll itself */
html.mo3d.sda .t3d.mo{opacity:1;translate:none}
html.mo3d.sda .t3d{animation:m3CardIn linear backwards;animation-timeline:view();animation-range:entry 0% cover 32%}
/* older browsers: one-shot 3D rise when the card is revealed */
html.mo3d:not(.sda) .t3d.mo:not(.in){transform:perspective(1000px) translate3d(0,46px,0) rotateX(32deg) rotateY(calc(var(--dir,1)*-10deg)) scale(.92);opacity:0}
html.mo3d:not(.sda) .t3d.mo{transition:opacity .8s ease,transform 1s cubic-bezier(.2,.75,.2,1),box-shadow .35s ease}
.g3d{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;transition:opacity .4s ease;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.5),rgba(255,255,255,.07) 38%,rgba(255,255,255,0) 62%)}
.t3d.tilting>.g3d{opacity:1}

/* ---------- hero background: gradient mesh + soft particles ---------- */
@keyframes m3Mesh{0%{transform:translate3d(-3%,0,0) rotate(0deg) scale(1)}100%{transform:translate3d(4%,-4%,0) rotate(28deg) scale(1.18)}}
@keyframes m3Part{0%{transform:translate3d(0,0,0) scale(.6);opacity:0}12%{opacity:.85}100%{transform:translate3d(var(--px,20px),-105vh,0) scale(1.1);opacity:0}}
.mesh3d{position:absolute;left:-25%;top:-25%;width:150%;height:150%;pointer-events:none;z-index:0;background:radial-gradient(32% 26% at 22% 30%,var(--mesh1,rgba(255,138,31,.30)),transparent 70%),radial-gradient(28% 24% at 78% 22%,var(--mesh2,rgba(255,196,90,.32)),transparent 70%),radial-gradient(36% 30% at 62% 78%,var(--mesh3,rgba(255,94,0,.20)),transparent 70%);animation:m3Mesh 24s ease-in-out infinite alternate;animation-play-state:paused}
.fx3d{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx3d i{position:absolute;bottom:-12px;width:var(--ps,6px);height:var(--ps,6px);border-radius:50%;background:radial-gradient(circle,var(--pc,rgba(255,255,255,.95)) 0,var(--pc2,rgba(255,170,60,.5)) 45%,transparent 70%);opacity:0;animation:m3Part var(--pd,12s) linear var(--pdl,0s) infinite;animation-play-state:paused}
.mesh3d.run,.fx3d.run i{animation-play-state:running}
.hero>.wrap{position:relative;z-index:1}

/* ---------- scroll story (pinned, phone turns as you scroll) ---------- */
.story3d{position:relative;background:radial-gradient(120% 60% at 50% 40%,#16285a 0%,#0b1838 55%,#070f26 100%);color:#fff;overflow:clip}
.st-track{height:290vh;view-timeline-name:--st;view-timeline-axis:block}
.st-stick{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-rows:auto 1fr auto auto;justify-items:center;padding:78px 20px 26px;overflow:hidden}
.st-glow{position:absolute;left:50%;top:50%;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,26,.55),rgba(255,106,0,.18) 40%,transparent 68%);pointer-events:none}
.st-head{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.st-kick{font-weight:900;font-size:clamp(26px,6.4vw,46px);letter-spacing:-.02em;line-height:1.1;background:linear-gradient(95deg,#fff 0%,#FFD29A 50%,#FF8A1F 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.st-hint{font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.st-hint:after{content:"";display:block;width:2px;height:22px;margin:6px auto 0;background:linear-gradient(#fff,transparent);border-radius:2px}
.st-stage{position:relative;display:grid;place-items:center;width:100%;min-height:0;perspective:1300px}
.st-phone{position:relative;height:min(58vh,560px);aspect-ratio:420/860;border-radius:38px;padding:9px;background:linear-gradient(155deg,#2b2b33,#0c0c10 60%,#26262e);box-shadow:0 0 0 2px rgba(255,255,255,.14) inset;transform-style:preserve-3d;transform:rotateX(4deg) rotateY(-12deg)}
.st-phone:before{content:"";position:absolute;top:16px;left:50%;width:30%;height:16px;margin-left:-15%;border-radius:12px;background:#0b0b0e;z-index:3;transform:translateZ(2px)}
.st-scr{position:relative;width:100%;height:100%;border-radius:30px;overflow:hidden;background:#fff;transform:translateZ(1px);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.st-s{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.st-s.st-s2,.st-s.st-s3{opacity:0}
.st-caps{position:relative;display:grid;width:min(100%,420px);margin-top:18px}
.st-cap{grid-area:1/1;display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.08);border-radius:18px;padding:12px 16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.st-cap.st-c2,.st-cap.st-c3{opacity:0}
.st-cap img{width:52px;height:52px;border-radius:14px;flex:none}
.st-cap b{display:block;font-size:17px;font-weight:800}
.st-cap span{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,.85)}
.st-cap i.live{width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.2)}
.st-cap i.live.test{background:#F59E0B;box-shadow:0 0 0 4px rgba(245,158,11,.2)}
.st-bar{position:relative;width:min(70%,320px);height:4px;border-radius:4px;background:rgba(255,255,255,.15);margin-top:16px;overflow:hidden}
.st-bar i{position:absolute;inset:0;background:linear-gradient(90deg,#FFB347,#FF6A00);transform-origin:0 50%;transform:scaleX(0)}
@keyframes m3StPhone{0%{transform:rotateX(16deg) rotateY(-40deg) scale(.8)}16%{transform:rotateX(4deg) rotateY(-14deg) scale(1)}28%{transform:rotateX(4deg) rotateY(14deg) scale(1)}40%{transform:rotateX(8deg) rotateY(180deg) scale(.94)}52%{transform:rotateX(4deg) rotateY(346deg) scale(1)}62%{transform:rotateX(4deg) rotateY(374deg) scale(1)}72%{transform:rotateX(8deg) rotateY(540deg) scale(.94)}84%{transform:rotateX(4deg) rotateY(706deg) scale(1)}100%{transform:rotateX(10deg) rotateY(734deg) scale(.92)}}
@keyframes m3St1{0%,39.9%{opacity:1}40%,100%{opacity:0}}
@keyframes m3St2{0%,39.9%{opacity:0}40%,71.9%{opacity:1}72%,100%{opacity:0}}
@keyframes m3St3{0%,71.9%{opacity:0}72%,100%{opacity:1}}
@keyframes m3Cap1{0%{opacity:0;transform:translate3d(0,24px,0)}6%,30%{opacity:1;transform:none}38%,100%{opacity:0;transform:translate3d(0,-24px,0)}}
@keyframes m3Cap2{0%,40%{opacity:0;transform:translate3d(0,24px,0)}48%,64%{opacity:1;transform:none}71%,100%{opacity:0;transform:translate3d(0,-24px,0)}}
@keyframes m3Cap3{0%,73%{opacity:0;transform:translate3d(0,24px,0)}81%,100%{opacity:1;transform:none}}
@keyframes m3Bar{to{transform:scaleX(1)}}
html.mo3d .st-phone{animation-name:m3StPhone}html.mo3d .st-s.st-s1{animation-name:m3St1}html.mo3d .st-s.st-s2{animation-name:m3St2}html.mo3d .st-s.st-s3{animation-name:m3St3}
html.mo3d .st-cap.st-c1{animation-name:m3Cap1}html.mo3d .st-cap.st-c2{animation-name:m3Cap2}html.mo3d .st-cap.st-c3{animation-name:m3Cap3}html.mo3d .st-bar i{animation-name:m3Bar}
html.mo3d.sda .st-anim{animation-duration:auto;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--st;animation-range:contain 0% contain 100%}
html.mo3d:not(.sda) .st-anim{animation-duration:1s;animation-timing-function:linear;animation-fill-mode:both;animation-play-state:paused;animation-delay:calc(var(--p,0)*-1s)}
@media (min-width:900px){.st-stick{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;column-gap:40px;align-items:center;padding:90px 6vw 40px}.st-head{grid-column:1/-1}.st-stage{grid-row:2}.st-caps{grid-row:2;grid-column:2;justify-self:start;margin:0}.st-bar{grid-column:1/-1}.st-cap b{font-size:22px}}

/* ---------- desktop: magnetic buttons + cursor glow ---------- */
.btn.mag{transition:translate .35s cubic-bezier(.2,.8,.2,1),transform .2s,box-shadow .2s,background .2s}
.cur-glow{position:fixed;left:0;top:0;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:45;background:radial-gradient(circle,rgba(255,150,50,.16),rgba(255,150,50,0) 65%);opacity:0;transition:opacity .4s ease}
.cur-glow.on{opacity:1}

/* ---------- small screens: lighter ---------- */
@media (max-width:640px){.ph3d-wrap{width:50%;right:3%;top:2%}.ph3d{border-radius:30px;padding:7px}.ph3d-scr{border-radius:24px}.ph3d:before{top:12px;height:12px}.ph-edge:nth-child(2n){display:none}.st-track{height:260vh}.st-glow{width:420px;height:420px;margin:-210px 0 0 -210px}}
@media (prefers-reduced-motion:reduce){.fx3d,.mesh3d,.st-hint{display:none}.ph3d,.p-front,.ph3d-scr:after{animation:none!important}.ph3d-scr img{animation:none!important}.st-track{height:auto}.st-stick{position:relative;height:auto}}
@media print{.fx3d,.mesh3d,.cur-glow,.story3d{display:none}html.mo3d .t3d{animation:none!important;transform:none!important;opacity:1!important}html.mo3d .swi{opacity:1!important;animation:none!important}}
.hero-art .chip,.hero-art .float-chip{z-index:6}

/* box-shadow pulses repaint every frame on the main thread; same look with a compositor-only ring */
.appc-chip.live i,.eyebrow .pulse{animation:none!important;position:relative}
.appc-chip.live i::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 3px rgba(22,163,74,.45);animation:m3Ring 2s ease-out infinite}
.eyebrow .pulse::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 3px rgba(47,210,138,.55);animation:m3Ring 2s ease-out infinite}
@keyframes m3Ring{0%{transform:scale(1);opacity:1}100%{transform:scale(2.4);opacity:0}}