/* A finite, user-triggered NFC illustration, not hardware detection. */
.demo-scene{min-height:510px;perspective:1000px;isolation:isolate}
.demo-orbit{position:absolute;top:25px;left:10px;width:420px;height:420px;max-width:100%;border:1px solid #52634370;border-radius:50%;box-shadow:0 0 0 45px #6a83530a;pointer-events:none}
.tap-product{position:absolute;left:18px;top:105px;width:210px;aspect-ratio:2/3;transform:rotateX(5deg) rotateY(-12deg) rotateZ(-13deg);transform-style:preserve-3d;transition:transform 700ms cubic-bezier(.2,.7,.2,1);filter:drop-shadow(4px 8px 12px #0002)}
.tap-product-face{position:absolute;inset:0;overflow:hidden;border-radius:7px;border:0;box-shadow:none}
.tap-product img{position:absolute;max-width:none;width:132.64%;height:131.73%;left:-16.19%;top:-13.55%}
.demo-scene .phone{width:218px;height:407px;margin-left:180px;margin-top:-20px;transform:translateX(20px) rotateY(-10deg) rotateZ(12deg);border:5px solid #59645c;background:linear-gradient(155deg,#e4ebd8,#b3c59d);box-shadow:2px 3px 0 #7e897c,15px 22px 30px #0003;transition:transform 750ms cubic-bezier(.2,.7,.2,1),box-shadow 750ms ease-out;overflow:visible}
.demo-scene .phone-time{position:relative;z-index:1;font-size:43px}
.demo-scene .phone-date{position:relative;z-index:1;font-size:8px}
.phone-wallpaper{position:absolute;inset:150px 0 0;overflow:hidden;border-radius:0 0 30px 30px;text-align:left;padding:24px 20px}
.phone-wallpaper>span{font-family:var(--display);font-size:26px;letter-spacing:-1px;line-height:1.15;color:#4d6748}
.phone-wallpaper>b{position:absolute;right:-5px;bottom:-25px;font-size:200px;font-weight:400;line-height:1;color:#9cb38860;transform:rotate(-8deg)}
.nfc-waves{position:absolute;left:40%;top:126px;width:38px;height:38px;z-index:3;pointer-events:none;opacity:0;transition:opacity 180ms ease-out}
.nfc-waves i{position:absolute;inset:0;border:1px solid var(--green);border-radius:50%;opacity:0}
.nfc-waves>span{position:absolute;inset:0;display:grid;place-items:center;background:var(--green);color:#2d4324;border-radius:50%;font-size:14px;letter-spacing:-2px;padding-right:3px}
.demo-scene[data-phase="approach"] .phone,.demo-scene[data-phase="detected"] .phone{transform:translateX(-36px) translateY(-10px) rotateY(-5deg) rotateZ(3deg);box-shadow:2px 3px 0 #7e897c,8px 15px 25px #0004}
.demo-scene[data-phase="approach"] .tap-product,.demo-scene[data-phase="detected"] .tap-product{transform:translateX(12px) rotateX(3deg) rotateY(-7deg) rotateZ(-8deg)}
.demo-scene.is-reading .nfc-waves{opacity:1}
.demo-scene.is-reading .nfc-waves i{animation:nfc-ring 1100ms cubic-bezier(.15,.45,.3,1) 1 both}
.demo-scene.is-reading .nfc-waves i:nth-child(2){animation-delay:160ms}.demo-scene.is-reading .nfc-waves i:nth-child(3){animation-delay:320ms}
@keyframes nfc-ring{0%{transform:scale(.8);opacity:.85}100%{transform:scale(3.3);opacity:0}}
.demo-scene .notification{border:1px solid #ffffff90;color:#223123;top:164px;left:-25px;right:-10px;width:calc(100% + 35px);z-index:5;opacity:0;visibility:hidden;transform:translateY(14px) scale(.96);transition:opacity 350ms ease-out,transform 350ms ease-out,visibility 350ms;min-height:67px;padding:12px 10px}
.notification-copy{display:block}.notification-copy>span{display:block;font-size:8px}.demo-scene .notification-icon{display:grid;place-items:center;background:linear-gradient(145deg,#754ac4,#db4a91,#f3a957);width:34px;height:34px;padding:0;font-size:29px;color:white;flex-shrink:0}
.demo-scene[data-phase="detected"] .notification{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.demo-scene .notification:hover{box-shadow:0 8px 30px #0004}.demo-scene .notification:focus-visible{outline-color:var(--green);outline-offset:5px}
.demo-scene[data-phase="connected"] .phone{transform:translateX(-5px) rotateY(0deg) rotateZ(0deg)}
.demo-profile{position:absolute;inset:0;background:#fbfcf7;border-radius:31px;z-index:4;overflow:hidden;padding:43px 16px 16px;color:#26362a;animation:profile-in 380ms cubic-bezier(.2,.7,.2,1) both}
.demo-profile[hidden]{display:none}.demo-profile~.phone-line,.demo-scene .phone-island{z-index:6}
.profile-top{font-size:13px;font-weight:650;display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid #e1e6d8}.profile-top>span{font-size:19px}
.profile-avatar{margin:17px auto 8px;width:49px;height:49px;border-radius:50%;background:var(--green);outline:1px solid #cf71a7;outline-offset:3px;display:grid;place-items:center;font-size:31px}.demo-profile>strong{display:block;font-size:17px;font-weight:500;letter-spacing:-.5px}.profile-caption{display:block;font-size:8px;margin-top:7px;color:#6d776a}
.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:20px -5px 17px}.profile-grid>span{display:grid;place-items:center;height:65px;font-size:9px;line-height:1.5;background:#e4ead9;border-radius:3px}.profile-grid>span:nth-child(2){background:#d0dfb8}.profile-grid>span:nth-child(3){background:#c2d894}.profile-success{display:block;background:#e6f0d8;border:1px solid #cedec0;border-radius:5px;padding:10px;font-size:10px}.demo-profile>small{display:block;font-size:7px;color:#7c8476;margin-top:13px}
@keyframes profile-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.demo-steps{position:absolute;bottom:4px;left:0;right:0;list-style:none;display:flex;gap:15px;justify-content:center;padding:0;margin:0;font-size:9px;color:#a5b09e}.demo-steps li{display:flex;gap:6px;align-items:center;transition:color 200ms ease-out}.demo-steps li>span{width:23px;height:23px;border:1px solid #55694d;border-radius:50%;display:grid;place-items:center;font-size:8px}.demo-steps li[aria-current="step"]{color:var(--green)}.demo-steps li[aria-current="step"]>span{background:var(--green);color:#23371f;border-color:var(--green)}
.demo-scene .demo-caption{bottom:-30px;left:0;right:0;font-size:9px;line-height:1.6}
@media(max-width:1150px) and (min-width:801px){.demo-scene .phone{margin-left:115px;width:200px;height:395px}.tap-product{left:0;width:185px}.demo-steps{gap:9px;font-size:8px}.nfc-waves{left:33%}}
@media(max-width:800px){.demo-scene{min-height:520px}.demo-scene .phone{margin-left:100px;transform:translateX(8px) rotateY(-8deg) rotateZ(10deg);width:200px;height:395px}.tap-product{left:8px;top:115px;width:185px}.demo-scene[data-phase="approach"] .phone,.demo-scene[data-phase="detected"] .phone{transform:translateX(-20px) translateY(-8px) rotateY(-5deg) rotateZ(3deg)}.demo-scene .demo-label{left:0}.nfc-waves{left:35%;top:135px}.demo-steps{gap:12px}.demo-orbit{top:60px;width:320px;height:320px;left:5px}.demo-scene .demo-caption{bottom:-25px}}
@media(max-width:380px){.demo-scene .phone{width:185px;margin-left:100px;height:380px}.tap-product{width:168px;left:4px}.demo-scene{min-height:505px}.demo-steps{gap:9px;font-size:8px}.demo-scene .notification{left:-23px;right:-4px;width:calc(100% + 27px)}.demo-scene .notification b{font-size:9px}.notification-copy>span{font-size:7px}.profile-grid{margin-top:15px;margin-bottom:12px}.profile-grid>span{height:57px}}
@media(prefers-reduced-motion:reduce){.demo-scene .phone,.demo-scene .tap-product{transform:none!important}.nfc-waves{display:none!important}.demo-profile{animation:none}.demo-scene .notification{transition:none}.demo-scene .notification:hover{box-shadow:none}}