.bgt-tap-module{--bgt-duration:3600ms;position:relative;width:100%;height:100vh;min-height:100vh;overflow:hidden;display:grid;place-items:end center;isolation:isolate;background:transparent;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.bgt-tap-stage{position:relative;width:min(94vw,1100px);height:clamp(600px,88vh,900px);min-height:540px;perspective:1500px;transform-style:preserve-3d;padding:0;margin:0}
.bgt-phone{position:absolute;left:50%;bottom:-12%;width:clamp(300px,34%,390px);max-height:112%;transform:translateX(-50%) translateZ(0);filter:drop-shadow(0 28px 32px rgba(0,0,0,.28));z-index:2;transform-style:preserve-3d;margin:0;padding:0}
.bgt-phone img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.bgt-phone-home,.bgt-phone-connect{position:absolute;inset:auto 0 0 0;width:100%;transition:none}.bgt-phone-home{position:relative;opacity:1}.bgt-phone-connect{opacity:0}
/* The card asset includes the hand. JS sizes it from the phone and aims the card's right edge at the phone's top NFC area. */
.bgt-card{position:absolute;left:0;top:0;width:var(--bgt-card-width,620px);z-index:4;transform-origin:72% 49%;transform:translate3d(var(--bgt-start-x,0px),var(--bgt-start-y,0px),150px) rotate(var(--bgt-start-r,-4deg)) scale(.96);filter:drop-shadow(0 20px 24px rgba(0,0,0,.24));will-change:transform;pointer-events:none}
.bgt-card img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.bgt-tap-glow{position:absolute;left:50%;top:9%;width:72px;height:72px;border-radius:50%;z-index:3;opacity:0;transform:translate(-50%,-50%) scale(.3);background:radial-gradient(circle,rgba(65,176,255,.75) 0,rgba(20,112,255,.3) 35%,rgba(20,112,255,0) 72%);pointer-events:none}.bgt-tap-ring{position:absolute;inset:0;border:2px solid rgba(40,145,255,.8);border-radius:50%;opacity:0}
.bgt-tap-module.is-playing .bgt-card{animation:bgtCardHandTap var(--bgt-duration) cubic-bezier(.22,.72,.22,1) both}.bgt-tap-module.is-playing .bgt-phone{animation:bgtPhoneReact var(--bgt-duration) ease both}.bgt-tap-module.is-playing .bgt-phone-home{animation:bgtHomeOut var(--bgt-duration) ease both}.bgt-tap-module.is-playing .bgt-phone-connect{animation:bgtConnectIn var(--bgt-duration) ease both}.bgt-tap-module.is-playing .bgt-tap-glow{animation:bgtGlow var(--bgt-duration) ease both}.bgt-tap-module.is-playing .bgt-tap-ring{animation:bgtRing var(--bgt-duration) ease both}
/* Left -> right approach, tiny contact compression, then recoil. */
@keyframes bgtCardHandTap{0%{transform:translate3d(var(--bgt-start-x),var(--bgt-start-y),130px) rotate(-5deg) scale(.94)}24%{transform:translate3d(var(--bgt-approach-x),var(--bgt-approach-y),180px) rotate(-2.5deg) scale(.985)}46%{transform:translate3d(var(--bgt-pre-x),var(--bgt-pre-y),205px) rotate(-1deg) scale(1)}55%{transform:translate3d(var(--bgt-tap-x),var(--bgt-tap-y),165px) rotate(.5deg) scale(.992)}61%{transform:translate3d(var(--bgt-recoil-x),var(--bgt-recoil-y),195px) rotate(-1.4deg) scale(1)}72%{transform:translate3d(var(--bgt-away-x),var(--bgt-away-y),175px) rotate(-3deg) scale(.98)}100%{transform:translate3d(var(--bgt-end-x),var(--bgt-end-y),120px) rotate(-5deg) scale(.94)}}
@keyframes bgtPhoneReact{0%,52%{transform:translateX(-50%) translateZ(0) scale(1)}57%{transform:translateX(-50%) translateZ(28px) scale(1.018)}67%,100%{transform:translateX(-50%) translateZ(0) scale(1)}}
@keyframes bgtHomeOut{0%,55%{opacity:1;filter:none}55.01%,100%{opacity:0;filter:none}}@keyframes bgtConnectIn{0%,55%{opacity:0;filter:none}55.01%,100%{opacity:1;filter:none}}
@keyframes bgtGlow{0%,51%{opacity:0;transform:translate(-50%,-50%) scale(.3)}56%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}69%,100%{opacity:0;transform:translate(-50%,-50%) scale(2.35)}}@keyframes bgtRing{0%,53%{opacity:0;transform:scale(.2)}57%{opacity:1}70%,100%{opacity:0;transform:scale(2)}}
.bgt-tap-module[data-state="connected"] .bgt-phone-home{opacity:0}.bgt-tap-module[data-state="connected"] .bgt-phone-connect{opacity:1}.bgt-tap-module[data-state="connected"] .bgt-card{transform:translate3d(var(--bgt-end-x),var(--bgt-end-y),120px) rotate(-5deg) scale(.94)}
@media(min-width:641px) and (max-width:900px){.bgt-tap-module{height:100vh;min-height:100vh}.bgt-tap-stage{width:min(96vw,850px);height:clamp(600px,90vh,840px)}.bgt-phone{width:clamp(290px,42%,350px);bottom:-10%}}
@media(min-width:1200px){.bgt-tap-stage{width:min(88vw,1180px);height:clamp(660px,90vh,940px)}.bgt-phone{width:clamp(340px,34%,410px);bottom:-13%}}
@media(max-width:640px){.bgt-tap-module{height:100vh;min-height:100vh}.bgt-tap-stage{width:100%;height:92vh;min-height:570px;padding:0;margin:0}.bgt-phone{width:min(70vw,330px);bottom:-9%;margin:0;padding:0}.bgt-tap-glow{top:12%;width:62px;height:62px}}
@media(prefers-reduced-motion:reduce){.bgt-tap-module *{animation:none!important;transition:none!important}.bgt-tap-module.is-playing .bgt-phone-home{opacity:0}.bgt-tap-module.is-playing .bgt-phone-connect{opacity:1}}