/* GestureMon FX — capa visual inspirada en interfaces holográficas */
.stage{perspective:900px}
.hand-fx{position:absolute;left:50%;top:50%;width:190px;height:190px;z-index:5;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.72);transition:opacity .18s ease,filter .2s ease;filter:drop-shadow(0 0 18px rgba(66,221,255,.35))}
.hand-fx.visible{opacity:1}
.hand-fx .orbit{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(66,221,255,.72);transform:translate(-50%,-50%);box-shadow:0 0 14px rgba(66,221,255,.22),inset 0 0 18px rgba(66,221,255,.08)}
.orbit-a{width:82px;height:82px;border-style:dashed!important;animation:fxSpin 4s linear infinite}
.orbit-b{width:126px;height:126px;border-color:rgba(156,88,255,.65)!important;animation:fxSpinReverse 7s linear infinite}
.orbit-c{width:174px;height:174px;border-top-color:transparent!important;border-bottom-color:transparent!important;animation:fxSpin 10s linear infinite}
.palm-core{position:absolute;left:50%;top:50%;width:44px;height:44px;border-radius:50%;transform:translate(-50%,-50%);display:grid;place-items:center;background:radial-gradient(circle,#eaffff 0 6%,#42ddff 8% 22%,#0d5eb9 44%,rgba(3,8,20,.88) 70%);border:1px solid rgba(255,255,255,.8);box-shadow:0 0 10px #42ddff,0 0 35px rgba(66,221,255,.7);animation:corePulse 1.25s ease-in-out infinite}
.palm-core span{font-size:10px;font-weight:900;color:white;letter-spacing:.08em}
.holo-card{position:absolute;width:112px;min-height:54px;padding:8px 9px;border:1px solid rgba(66,221,255,.5);border-radius:8px;background:linear-gradient(135deg,rgba(3,22,45,.78),rgba(15,51,89,.45));backdrop-filter:blur(5px);box-shadow:inset 0 0 18px rgba(66,221,255,.08),0 0 18px rgba(66,221,255,.12);transform-style:preserve-3d;overflow:hidden}
.holo-card:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0 42%,rgba(255,255,255,.16) 50%,transparent 58%);transform:translateX(-150%);animation:holoScan 2.5s ease-in-out infinite}
.holo-card small,.holo-card b{display:block}.holo-card small{font-size:7px;letter-spacing:.14em;color:#7ee9ff}.holo-card b{font-size:10px;margin-top:3px;color:#fff}.holo-card i{display:block;width:70%;height:2px;margin-top:6px;background:linear-gradient(90deg,#42ddff,transparent);box-shadow:0 0 7px #42ddff}
.holo-1{left:-70px;top:-30px;transform:rotateY(18deg) rotateZ(-4deg);animation:holoFloatA 3.2s ease-in-out infinite}
.holo-2{right:-76px;top:18px;transform:rotateY(-18deg) rotateZ(3deg);animation:holoFloatB 3.8s ease-in-out infinite}
.holo-3{left:10px;bottom:-52px;transform:rotateX(10deg) rotateZ(1deg);animation:holoFloatA 4.4s ease-in-out infinite reverse}
.fx-burst{position:absolute;left:50%;top:50%;width:12px;height:12px;transform:translate(-50%,-50%);border-radius:50%;opacity:0;border:2px solid #ffd84a}
.fx-burst.fire{animation:burst .55s ease-out}
.hand-fx.g-pinch{filter:drop-shadow(0 0 24px rgba(255,216,74,.8))}.hand-fx.g-pinch .orbit{border-color:rgba(255,216,74,.75)}
.hand-fx.g-open .holo-card{animation-duration:1.6s}.hand-fx.g-fist{transform:translate(-50%,-50%) scale(.5)!important;filter:drop-shadow(0 0 28px rgba(255,84,106,.65))}
.hand-fx.g-victory .orbit-a{animation-duration:.8s}.hand-fx.g-victory .orbit-b{animation-duration:1.1s}.hand-fx.g-victory .palm-core{box-shadow:0 0 16px #ffd84a,0 0 50px rgba(156,88,255,.8)}
#fxModePill{color:#ffd84a!important;border-color:rgba(255,216,74,.35)!important}
.camera-panel.fx-active{box-shadow:0 0 42px rgba(66,221,255,.15),inset 0 0 38px rgba(66,221,255,.04)}
.camera-panel.fx-active .scan{animation:scanMove 3.4s linear infinite;background-size:100% 16px;opacity:.34}
.playground.demo-on .float-card{animation:cardLevitate 3.3s ease-in-out infinite}.playground.demo-on .card-b{animation-delay:-1.1s}.playground.demo-on .card-c{animation-delay:-2.1s}
.ambient-ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(66,221,255,.1);transform:translate(-50%,-50%);pointer-events:none}.ring-one{width:320px;height:320px;animation:labSpin 14s linear infinite}.ring-two{width:520px;height:520px;border-style:dashed;animation:labSpinReverse 19s linear infinite}
.playground[data-scene="1"]{background:radial-gradient(circle at 35% 45%,rgba(156,88,255,.34),rgba(2,8,18,.96) 61%),linear-gradient(rgba(156,88,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(156,88,255,.04) 1px,transparent 1px);background-size:auto,34px 34px,34px 34px}
.playground[data-scene="2"]{background:radial-gradient(circle at 65% 50%,rgba(255,216,74,.2),rgba(2,8,18,.96) 60%),linear-gradient(rgba(255,216,74,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,216,74,.035) 1px,transparent 1px);background-size:auto,34px 34px,34px 34px}
.float-card.near{border-color:#42ddff;box-shadow:0 0 30px rgba(66,221,255,.38);transform:scale(1.06)}
.float-card.grabbed{animation:none!important;transform:scale(1.08) rotate(-1deg);box-shadow:0 0 38px rgba(255,216,74,.52)!important}
.lab-pointer{transition:width .08s,height .08s,filter .08s}.lab-pointer:before,.lab-pointer:after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);border:1px solid rgba(66,221,255,.55)}.lab-pointer:before{width:52px;height:52px;animation:pointerPulse 1s ease-out infinite}.lab-pointer:after{width:74px;height:74px;border-color:rgba(66,221,255,.18);animation:pointerPulse 1s ease-out infinite .35s}.lab-pointer.pinching:before,.lab-pointer.pinching:after{border-color:rgba(255,216,74,.6)}
body.turbo #particles{animation-duration:3s;filter:brightness(1.8)}body.turbo .panel{box-shadow:0 0 34px rgba(156,88,255,.14),inset 0 0 24px rgba(66,221,255,.04)}
@keyframes fxSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes fxSpinReverse{to{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes corePulse{50%{transform:translate(-50%,-50%) scale(1.12);filter:brightness(1.25)}}
@keyframes holoFloatA{50%{margin-top:-8px;transform:rotateY(12deg) rotateZ(2deg)}}@keyframes holoFloatB{50%{margin-top:7px;transform:rotateY(-12deg) rotateZ(-2deg)}}
@keyframes holoScan{50%,100%{transform:translateX(160%)}}@keyframes burst{0%{opacity:1;width:12px;height:12px}100%{opacity:0;width:190px;height:190px;border-width:1px}}
@keyframes scanMove{from{background-position:0 -60px}to{background-position:0 60px}}@keyframes cardLevitate{50%{margin-top:-7px}}
@keyframes labSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes labSpinReverse{to{transform:translate(-50%,-50%) rotate(-360deg)}}@keyframes pointerPulse{0%{opacity:.8;transform:translate(-50%,-50%) scale(.65)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
@media(max-width:720px){.hand-fx{width:130px;height:130px}.orbit-a{width:60px;height:60px}.orbit-b{width:92px;height:92px}.orbit-c{width:126px;height:126px}.holo-card{width:86px;min-height:45px;padding:6px}.holo-1{left:-50px;top:-36px}.holo-2{right:-50px;top:10px}.holo-3{left:4px;bottom:-48px}.holo-card b{font-size:8px}.holo-card small{font-size:6px}}
@media(prefers-reduced-motion:reduce){.hand-fx *,.playground.demo-on .float-card,.ambient-ring,#particles{animation:none!important}}