/* ============================================================
   Quantum+ · Scan → BIM showcase section
   Loads AFTER style.css. 100% additive — every class is sx-*
   prefixed and every keyframe sx*-named, so nothing here can
   touch the Quantum hero or any existing component.
   Reuses design-system vars from style.css (--ac, --mono, …).
   ============================================================ */
.sx-section .sec-head{margin-bottom:40px}
.sx-scene{position:relative;width:100%;max-width:960px;margin:0 auto;--sxd:8s;aspect-ratio:600/460;border-radius:18px;overflow:hidden;
  background:radial-gradient(circle at 50% 118%,rgba(56,189,248,.12),transparent 58%),linear-gradient(180deg,#070c16,#05080f);
  border:1px solid rgba(56,189,248,.24);box-shadow:0 40px 90px -36px rgba(56,189,248,.55),inset 0 0 40px -22px rgba(56,189,248,.6)}
.sx-scene svg{position:absolute;inset:0;width:100%;height:100%}
.sx-twin{clip-path:inset(0 100% 0 0);animation:sxReveal var(--sxd,7s) cubic-bezier(.65,0,.35,1) infinite}
.sx-scan{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;z-index:6;
  background:linear-gradient(180deg,transparent,var(--ac2,#7dd3fc),var(--ac,#38bdf8),transparent);box-shadow:0 0 30px 7px var(--ac,#38bdf8);
  animation:sxSweep var(--sxd,7s) cubic-bezier(.65,0,.35,1) infinite}
.sx-plane{position:absolute;top:0;bottom:0;left:0;width:14%;z-index:5;margin-left:-14%;
  background:linear-gradient(90deg,transparent,rgba(56,189,248,.16));animation:sxSweepP var(--sxd,7s) cubic-bezier(.65,0,.35,1) infinite}
.sx-drone{position:absolute;top:8%;left:8%;z-index:7;animation:sxFly var(--sxd,7s) cubic-bezier(.65,0,.35,1) infinite}
.sx-drone svg{position:static;width:64px;height:54px}
.sx-drone::after{content:'';position:absolute;left:50%;top:40px;width:90px;height:250px;margin-left:-45px;background:linear-gradient(180deg,rgba(56,189,248,.42),rgba(56,189,248,.06) 70%,transparent);clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);pointer-events:none;mix-blend-mode:screen}
.sx-lbl{position:absolute;font-family:var(--mono,monospace);z-index:8;letter-spacing:.04em}
.sx-lbl.tl{top:12px;left:14px;font-size:10.5px;color:var(--ac2,#7dd3fc)}
.sx-lbl.tl .sx-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80;margin-right:6px;animation:sxPing 1.5s infinite}
.sx-lbl.tr{top:12px;right:14px;font-size:10.5px;color:#fff;text-align:right}
.sx-lbl.tr b{color:var(--ac2,#7dd3fc)}
.sx-lbl.bl{bottom:14px;left:78px;font-size:10px;color:var(--tx3,#64748b)}
.sx-lbl.br{bottom:12px;right:14px;font-size:10px;color:var(--ac,#38bdf8);border:1px solid rgba(56,189,248,.3);padding:5px 9px;border-radius:6px;background:rgba(4,8,14,.6)}
.sx-tag{position:absolute;z-index:8;font-family:var(--mono,monospace);font-size:9.5px;color:#fff;background:rgba(4,8,14,.72);border:1px solid rgba(56,189,248,.45);border-radius:5px;padding:2px 6px;white-space:nowrap;opacity:0;animation:sxTag var(--sxd,7s) cubic-bezier(.65,0,.35,1) infinite}
.sx-tag.m1{top:30%;left:31%}.sx-tag.m2{top:50%;left:60%;animation-delay:.4s}
.sx-radar{position:absolute;bottom:32px;left:14px;width:52px;height:52px;border-radius:50%;border:1px solid rgba(56,189,248,.4);z-index:8;overflow:hidden;background:radial-gradient(circle,rgba(56,189,248,.08),transparent)}
.sx-radar::before{content:'';position:absolute;inset:0;background:conic-gradient(from 0deg,rgba(56,189,248,.5),transparent 28%);animation:sxSpin 3.4s linear infinite}
.sx-radar::after{content:'';position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:var(--ac,#38bdf8);transform:translate(-50%,-50%);box-shadow:0 0 8px var(--ac,#38bdf8)}
.sx-pt{animation:sxTw 2.6s ease-in-out infinite}

@keyframes sxReveal{0%{clip-path:inset(0 100% 0 0);opacity:1}6%{clip-path:inset(0 100% 0 0)}48%{clip-path:inset(0 0 0 0);opacity:1}72%{clip-path:inset(0 0 0 0);opacity:1}82%{clip-path:inset(0 0 0 0);opacity:0}83%{clip-path:inset(0 100% 0 0);opacity:0}100%{clip-path:inset(0 100% 0 0);opacity:0}}
@keyframes sxSweep{0%{left:0;opacity:0}5%{opacity:1}48%{left:100%;opacity:1}72%{left:100%;opacity:.5}80%{left:100%;opacity:0}100%{left:0;opacity:0}}
@keyframes sxSweepP{0%{left:0;opacity:0}5%{opacity:1}48%{left:100%;opacity:1}72%{left:100%;opacity:.4}80%{opacity:0}100%{left:0;opacity:0}}
@keyframes sxFly{0%{left:6%}48%{left:80%}72%{left:80%}100%{left:6%}}
@keyframes sxTag{0%,20%{opacity:0}40%,70%{opacity:1}85%,100%{opacity:0}}
@keyframes sxPing{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes sxSpin{to{transform:rotate(360deg)}}
@keyframes sxTw{0%,100%{opacity:.25}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.sx-twin{clip-path:none;animation:none}.sx-scan,.sx-plane,.sx-drone,.sx-tag{animation:none}.sx-scan{opacity:0}}