/* ===== TestReady motion + 3D layer (transform/opacity only) ===== */

/* motion switch in nav */
.motion-pill{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:600;color:rgba(255,255,255,.85);padding:.4rem .7rem;border-radius:999px;border:1px solid rgba(255,255,255,.25)}
.motion-pill i{width:26px;height:15px;border-radius:999px;background:var(--green);position:relative;transition:.2s}
.motion-pill i:after{content:"";position:absolute;top:2px;left:13px;width:11px;height:11px;border-radius:50%;background:#fff;transition:.2s}
.motion-pill.off i{background:#8a94a8}.motion-pill.off i:after{left:2px}
.nav.solid .motion-pill{color:var(--ink2);border-color:var(--line)}
@media (max-width:960px){.motion-pill{margin-left:auto}.motion-pill span{display:none}.nav__burger{margin-left:.4rem}}
.rmtoast{position:fixed;right:16px;bottom:16px;z-index:80;max-width:330px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:1rem;box-shadow:var(--sh-2);display:flex;flex-wrap:wrap;gap:.5rem}
.rmtoast[hidden]{display:none}
.rmtoast p{width:100%;font-size:.88rem;color:var(--ink2)}
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--red),var(--orange),var(--violet),var(--blue));pointer-events:none}
.no-motion .progress{display:none}

/* ---------- hero ---------- */
.fx .hero .bgvid video{will-change:transform;transform:scale(1.12)}
.fx .hero__copy{will-change:transform,opacity}
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.wd>span{display:inline-block}
.words-in .wd>span{animation:wordUp 1s cubic-bezier(.2,.9,.25,1) both}
@keyframes wordUp{from{transform:translateY(110%) rotate(4deg);opacity:0}to{transform:none;opacity:1}}
.grad{background-size:200% 100%;animation:shimmer 6s linear infinite}
.fx .grad .wd>span{background:linear-gradient(90deg,#5fb0ff,#a48bff,#ff9ec4,#5fb0ff);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wordUp 1s cubic-bezier(.2,.9,.25,1) both,shimmer 7s linear infinite}
@keyframes shimmer{to{background-position:-300% 0}}
.rise{animation:rise .9s cubic-bezier(.2,.9,.25,1) both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* 3D scene */
.scene3d{perspective:1300px;transform-style:preserve-3d}
.fx .hero__device .phone{animation:none;transform-style:preserve-3d;will-change:transform}
.scene-in .phone{animation:phoneIn 1.6s cubic-bezier(.2,.9,.25,1) both .2s!important}
@keyframes phoneIn{from{opacity:0;transform:translateY(160px) rotateX(35deg) rotateZ(-10deg)}to{opacity:1}}
.phone__screen{transform:translateZ(1px)}
.phone__glare{position:absolute;inset:-20% -60%;z-index:6;pointer-events:none;border-radius:50px;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);mix-blend-mode:screen;transform:rotate(25deg)}
.phone:before{content:"";position:absolute;right:-3px;top:140px;width:4px;height:64px;border-radius:3px;background:#e26a12;box-shadow:0 -80px 0 #e26a12}
.phone:after{content:"";position:absolute;left:-3px;top:120px;width:4px;height:34px;border-radius:3px;background:#e26a12;box-shadow:0 50px 0 #e26a12,0 100px 0 #e26a12}
.vtile{position:absolute;margin:0;border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.18);will-change:transform;background:#0d1b36}
.vtile video,.vtile img{width:100%;height:100%;object-fit:cover}
.vtile figcaption{position:absolute;left:10px;bottom:8px;font-size:.66rem;font-weight:600;color:#fff;background:rgba(0,0,0,.4);padding:.2rem .5rem;border-radius:999px;backdrop-filter:blur(6px)}
.vtile--a{width:270px;height:170px;left:-16%;top:4%}
.vtile--b{width:220px;height:290px;right:-18%;top:30%}
.vtile--c{width:240px;height:150px;left:-12%;bottom:2%}
.fx .hero__float{animation:floatZ 6s ease-in-out infinite}
.fx .f2{animation-delay:-3s}
@keyframes floatZ{0%,100%{transform:translateZ(140px)}50%{transform:translateZ(140px) translateY(-10px)}}
.scene-in .vtile{animation:tileIn 1.4s cubic-bezier(.2,.9,.25,1) both}
.scene-in .vtile--a{animation-delay:.5s}.scene-in .vtile--b{animation-delay:.65s}.scene-in .vtile--c{animation-delay:.8s}
@keyframes tileIn{from{opacity:0;clip-path:inset(50% 50% 50% 50% round 20px)}to{opacity:1;clip-path:inset(0 0 0 0 round 20px)}}
.ring{position:absolute;left:50%;top:50%;width:520px;height:520px;margin:-260px 0 0 -260px;pointer-events:none;transform:rotateX(70deg);transform-style:preserve-3d}
.ring i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(95,176,255,.35);animation:ringPulse 4.5s ease-out infinite}
.ring i:nth-child(2){animation-delay:1.5s}.ring i:nth-child(3){animation-delay:3s}
@keyframes ringPulse{from{transform:scale(.35);opacity:.9}to{transform:scale(1.15);opacity:0}}
.no-motion .vtile,.no-motion .ring{display:none}
.hero__float{z-index:5}

/* ---------- 3D video wall ---------- */
.wall{position:relative;height:720px;overflow:hidden;background:#07112a;color:#fff;display:flex;align-items:center}
.wall__stage{position:absolute;inset:-20% -10%;perspective:1600px;display:flex;align-items:center;justify-content:center}
.wall__grid{--sh:0px;display:grid;grid-template-columns:repeat(5,260px);gap:18px;transform:rotateX(28deg) rotateZ(-12deg) rotateY(-10deg) translateY(var(--sh));transform-style:preserve-3d}
.wall__col{display:flex;flex-direction:column;gap:18px;animation:colUp 38s linear infinite}
.wall__col--rev{animation-name:colDown;animation-duration:44s}
.wall__col:nth-child(3){animation-duration:30s}
@keyframes colUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes colDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.wall figure{position:relative;margin:0;height:200px;border-radius:18px;overflow:hidden;background:#13274d;box-shadow:0 30px 50px -25px rgba(0,0,0,.8)}
.wall figure:nth-child(even){height:260px}
.wall figure video,.wall figure img{width:100%;height:100%;object-fit:cover;opacity:.85}
.wall figcaption{position:absolute;left:12px;bottom:10px;font-size:.7rem;font-weight:600;background:rgba(0,0,0,.45);padding:.2rem .55rem;border-radius:999px}
.wall__shade{position:absolute;inset:0;background:radial-gradient(ellipse at 28% 50%,rgba(18,40,86,.85) 0%,rgba(18,40,86,.5) 36%,rgba(18,40,86,0) 70%),linear-gradient(180deg,#16305f 0%,transparent 14%,transparent 86%,#16305f 100%);pointer-events:none}
.wall{background:#16305f}
.wall figure video,.wall figure img{opacity:1!important;filter:brightness(1.08) saturate(1.1)}
.wall__copy{position:relative;z-index:2}
.wall__copy h2{color:#fff;font-size:clamp(2.2rem,4.6vw,3.8rem);max-width:12ch}
.wall__copy p{color:rgba(255,255,255,.75);max-width:30rem;margin:1rem 0 2rem;font-size:1.05rem}
.wall__stats{display:flex;gap:2.4rem}
.wall__stats b{display:block;font-family:var(--f-h);font-size:2.2rem;font-weight:800;line-height:1}
.wall__stats span{font-size:.8rem;color:rgba(255,255,255,.65)}
.no-motion .wall__col{animation:none}
@media (max-width:640px){.wall{height:640px}.wall__grid{grid-template-columns:repeat(5,170px)}.wall figure{height:140px}.wall figure:nth-child(even){height:180px}.wall__stats{gap:1.2rem}.wall__stats b{font-size:1.6rem}}

/* ---------- 3D card tilt + glare ---------- */
.tilt3d{transition:transform .5s cubic-bezier(.2,.9,.25,1),box-shadow .4s;transform-style:preserve-3d;will-change:transform}
.tilt3d:hover{transition:transform .12s linear,box-shadow .4s;box-shadow:0 30px 60px -28px rgba(13,27,54,.45)}
.glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;mix-blend-mode:soft-light;transition:background .2s}
.stepc,.rv,.counts>div,.dashprev{position:relative}
.stepc .mini{transform:translateZ(30px)}
.rule h3,.rule p{transform:translateZ(40px)}
.rule:before{transform:translate(calc((var(--mx,.5) - .5) * -18px),calc((var(--my,.5) - .5) * -18px)) scale(1.08)}

/* ---------- entrance choreography ---------- */
.fx .flip{opacity:0;transform:perspective(1000px) rotateX(-24deg) translateY(40px);transform-origin:50% 0;transition:opacity .9s cubic-bezier(.2,.9,.25,1) var(--d,0ms),transform 1.1s cubic-bezier(.2,.9,.25,1) var(--d,0ms)}
.fx .flip.flip-in{opacity:1;transform:none}
.fx .flip.flip-in.tilt3d:hover{transition:transform .12s linear}
.fx .mask{clip-path:inset(12% 12% 12% 12% round 28px);transition:clip-path 1.4s cubic-bezier(.2,.9,.25,1)}
.fx .mask img{transform:scale(1.25);transition:transform 1.8s cubic-bezier(.2,.9,.25,1)}
.fx .mask.flip-in{clip-path:inset(0 0 0 0 round 28px)}
.fx .mask.flip-in img{transform:scale(1)}
.fx .reveal.flip{transform:perspective(1000px) rotateX(-24deg) translateY(40px)}

/* ---------- film 3D ---------- */
.fx .film{perspective:1600px}
.fx .film__main,.fx .film__chat{will-change:transform;transform-origin:50% 60%}
.film__main:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.2)}
.fx .avail{will-change:transform}

/* ---------- tabs: sliding indicator + 3D swap ---------- */
.tabs__bar{position:relative}
.tabs__ind{position:absolute;top:.35rem;left:0;height:calc(100% - .7rem);border-radius:10px;background:#fff;box-shadow:var(--sh-1);transition:transform .5s cubic-bezier(.2,.9,.25,1),width .5s cubic-bezier(.2,.9,.25,1);z-index:0;width:0}
.tabs__bar button{position:relative;z-index:1}
.has-ind button[aria-selected=true]{background:transparent;box-shadow:none}
.swap3d.is-on{animation:swap3d .7s cubic-bezier(.2,.9,.25,1)}
@keyframes swap3d{from{opacity:0;transform:perspective(1200px) rotateX(-14deg) translateY(20px)}to{opacity:1;transform:none}}
.bigcount b{transition:transform .3s}
.bigcount div{transform-style:preserve-3d}

/* ---------- buttons ---------- */
.shine{position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.9,.25,1),background .2s,box-shadow .2s}
.shine:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .7s}
.shine:hover:after{left:120%}

/* ---------- monitor spark ---------- */
.mon__list li.spark{position:relative;animation:rowin .6s cubic-bezier(.22,1,.36,1),sparkRow 1.8s ease-out}
@keyframes sparkRow{0%{box-shadow:inset 4px 0 0 var(--green),0 0 0 0 rgba(18,165,100,.5)}100%{box-shadow:inset 4px 0 0 var(--green),0 0 0 14px rgba(18,165,100,0)}}
.mon__list li.match{box-shadow:inset 4px 0 0 var(--green)}

/* ---------- CTA: 3D flipping L → P plate ---------- */
.plate3d{position:relative;width:72px;height:72px;transform-style:preserve-3d;animation:plateFlip 6s cubic-bezier(.6,0,.2,1) infinite}
.plate3d__f,.plate3d__b{position:absolute;inset:0;backface-visibility:hidden;display:grid;place-items:center}
.plate3d__b{transform:rotateY(180deg)}
.plate3d .lp{transform:none}
.lp--p{border-color:#12a564}.lp--p b{color:#12a564}
@keyframes plateFlip{0%,35%{transform:rotateY(0) rotateX(8deg)}50%,85%{transform:rotateY(180deg) rotateX(8deg)}100%{transform:rotateY(360deg) rotateX(8deg)}}
.no-motion .plate3d{animation:none}
.fx .cta .bgvid video{animation:kenburns 24s ease-in-out infinite alternate}
.fx .sec--dark .bgvid video{animation:kenburns 30s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.18) translate(-2%,-2%)}}

@media (max-width:960px){
  .vtile--a{width:150px;height:100px;left:0;top:4%}
  .vtile--b{width:120px;height:160px;right:0;top:40%}
  .vtile--c{display:none}
  .ring{width:360px;height:360px;margin:-180px 0 0 -180px}
}
@media (hover:none){.tilt3d{transform:none!important}}