/* TBM fx layer: pointer-driven polish. All motion off under reduced-motion. */
#fx-prog{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#06b6d4,#a855f7,#fde047);z-index:9999;pointer-events:none}
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(520px circle at var(--mx,70%) var(--my,40%),rgba(6,182,212,.16),transparent 60%);transition:opacity .4s}
.stage{transition:transform .25s ease-out;transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg))}
.sbot img{transition:translate .3s ease-out;translate:var(--px,0) var(--py,0)}
.pcard{transform-style:preserve-3d;transition:transform .2s ease-out,box-shadow .2s;position:relative}
.pcard.fx-t{transform:perspective(800px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(-4px);box-shadow:0 18px 40px -18px rgba(6,32,43,.35)}
.pcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .2s;background:radial-gradient(300px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.35),transparent 55%)}
.pcard.fx-t::after{opacity:1}
.pcard.fx-t .art img{transform:translateZ(30px) scale(1.04);transition:transform .2s}
.btn{transition:transform .18s ease-out}
.fx-spark{position:fixed;width:8px;height:8px;border-radius:50%;pointer-events:none;z-index:9999;animation:fxs .7s ease-out forwards}
@keyframes fxs{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.fx-in{opacity:0;transform:translateY(24px)}
.fx-in.fx-on{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:var(--fd,0s)}
@media (prefers-reduced-motion:reduce){#fx-prog,.hero::before{display:none}.stage,.sbot img,.pcard,.pcard.fx-t,.btn{transform:none!important;translate:none!important;transition:none!important}.fx-in{opacity:1;transform:none}}