@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono-600.woff2") format("woff2");font-weight:600;font-display:swap}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{ --accent:#4fd6ff; --glow:rgba(79,214,255,.55); --font-m:"JetBrains Mono",ui-monospace,monospace; }
html{scroll-behavior:auto}
body{background:#05060a;color:#d5e4f2;font-family:var(--font-m);overflow-x:hidden;cursor:crosshair}

#scene{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0;touch-action:pan-y}
.scroll-space{height:640vh;pointer-events:none}
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(135% 125% at 50% 42%,transparent 58%,rgba(0,0,0,.6) 100%)}
#grain{position:fixed;inset:-50%;z-index:2;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 6s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}50%{transform:translate(2%,-2%)}100%{transform:translate(0,0)}}

/* loader */
#loader{position:fixed;inset:0;z-index:60;background:#05060a;display:grid;place-items:center;transition:opacity .9s ease,visibility .9s ease}
#loader.done{opacity:0;visibility:hidden}
.loader-bar{width:min(240px,52vw);height:1px;background:rgba(120,160,200,.2);overflow:hidden}
.loader-bar i{display:block;height:100%;width:0;background:var(--accent);box-shadow:0 0 12px var(--glow);transition:width .3s ease}
.loader-status{margin-top:14px;font-size:.6rem;letter-spacing:.42em;color:#5b6b82;text-align:center}

/* ============ HUD ============ */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:0;transition:opacity .8s ease}
#hud.on{opacity:1}
.tele{position:fixed;bottom:40px;display:flex;gap:30px}
.tele.left{left:44px}
.tele.right{right:44px;text-align:right}
.tele.right .t{align-items:flex-end}
.t{display:flex;flex-direction:column;gap:4px}
.t label{font-size:.54rem;letter-spacing:.3em;color:#5f7089}
.t b{font-size:1.5rem;font-weight:500;letter-spacing:.04em;color:#eaf3fb;line-height:1}
.t span{font-size:.56rem;letter-spacing:.18em;color:#5f7089}

.compass{position:fixed;top:30px;left:50%;transform:translateX(-50%);width:min(360px,60vw);height:26px;
  overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.compass .tape{position:absolute;top:0;left:50%;height:100%;display:flex;align-items:center;will-change:transform}
.compass .tick{position:relative;width:44px;display:flex;justify-content:center;align-items:flex-start;height:100%}
.compass .tick i{width:1px;height:8px;background:rgba(150,190,220,.5)}
.compass .tick.major i{height:13px;background:rgba(180,220,240,.8)}
.compass .tick b{position:absolute;top:12px;font-size:.56rem;color:#7f93ab;font-weight:500}
.compass .needle{position:absolute;top:0;left:50%;transform:translateX(-50%);width:1px;height:20px;background:var(--accent);box-shadow:0 0 8px var(--glow)}

.status{position:fixed;top:64px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;font-size:.58rem;letter-spacing:.24em;color:#8ba0b8}
.status .dot{width:6px;height:6px;border-radius:50%;background:#ffb454;box-shadow:0 0 8px #ffb45488;transition:background .5s,box-shadow .5s}
.status .dot.air{background:var(--accent);box-shadow:0 0 8px var(--glow)}

/* ============ part annotation cards ============ */
#labels{position:fixed;inset:0;z-index:19;pointer-events:none}
#leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#leaders .lead{fill:none;stroke:var(--accent);stroke-width:1;stroke-opacity:.55;opacity:0;transition:opacity .3s ease}
#leaders .lead-dot{fill:var(--accent);opacity:0;transition:opacity .3s ease;filter:drop-shadow(0 0 5px var(--glow))}
.plabel{position:absolute;left:0;top:0;width:242px;padding:10px 14px 11px;text-align:center;
  background:linear-gradient(180deg,rgba(11,17,28,.82),rgba(7,11,19,.72));
  border:1px solid rgba(120,170,210,.20);border-top:2px solid var(--accent);border-radius:3px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 10px 30px rgba(0,0,0,.48),0 0 18px rgba(79,214,255,.06);
  opacity:0;transition:opacity .25s ease;will-change:left,top,opacity}
.plabel.on{opacity:1}
.plabel .pl-h{display:flex;align-items:center;justify-content:center;gap:8px}
.plabel .pl-idx{font-style:normal;font-size:.5rem;letter-spacing:.12em;color:var(--accent);opacity:.9;
  border:1px solid rgba(79,214,255,.4);border-radius:2px;padding:1px 4px}
.plabel b{font-size:.72rem;font-weight:600;letter-spacing:.14em;color:#eef5fc}
.plabel .pl-role{font-size:.6rem;letter-spacing:.03em;color:#c6d8ec;margin-top:6px}
.plabel .pl-spec{font-size:.53rem;letter-spacing:.02em;line-height:1.55;color:#8398b0;margin-top:5px}

/* ============ minimal UI ============ */
#ui{position:fixed;inset:0;z-index:18;pointer-events:none}
#ui a{pointer-events:auto}
.scroll-cue{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);text-align:center;font-size:.56rem;letter-spacing:.36em;color:#6a7a92;transition:opacity .6s ease}
.scroll-cue i{display:block;width:1px;height:34px;margin:11px auto 0;background:linear-gradient(var(--accent),transparent);animation:drop 1.9s ease-in-out infinite}
@keyframes drop{0%,100%{transform:scaleY(.35);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}
.track{position:fixed;right:24px;top:50%;transform:translateY(-50%);width:1px;height:150px;background:rgba(120,160,200,.16)}
.track i{display:block;width:100%;height:0;background:var(--accent);box-shadow:0 0 8px var(--glow)}
.credit{position:fixed;left:24px;bottom:14px;font-size:.52rem;letter-spacing:.2em;color:#46536a;transition:color .3s}
.credit:hover{color:var(--accent)}
#sound{position:fixed;left:24px;bottom:38px;pointer-events:auto;cursor:pointer;background:none;border:none;
  display:flex;align-items:flex-end;gap:3px;color:#6a7a92;font-family:var(--font-m);font-size:.56rem;letter-spacing:.26em;transition:color .3s}
#sound:hover{color:var(--accent)}
#sound i{display:block;width:2px;height:5px;background:currentColor;opacity:.55;border-radius:1px}
#sound span{margin:0 0 -1px 7px}
#sound.on{color:var(--accent)}
#sound.on i{animation:eq 1.1s ease-in-out infinite}
#sound.on i.s1{animation-delay:.22s}
#sound.on i.s2{animation-delay:.44s}
@keyframes eq{0%,100%{height:4px;opacity:.5}50%{height:13px;opacity:1}}

/* ============ UAV switcher ============ */
#uav{position:fixed;inset:0;z-index:22;pointer-events:none;opacity:0;transition:opacity .8s ease}
#uav.on{opacity:1}
#uav:not(.on) .uav-arrow{pointer-events:none}
.uav-arrow{position:fixed;top:50%;transform:translateY(-50%);pointer-events:auto;cursor:pointer;
  background:rgba(10,16,26,.35);border:1px solid rgba(120,160,200,.3);color:#dbe8f5;
  width:60px;height:60px;border-radius:50%;font-size:1.3rem;line-height:1;backdrop-filter:blur(6px);
  display:grid;place-items:center;transition:.3s;font-family:var(--font-m)}
.uav-arrow:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 26px var(--glow);transform:translateY(-50%) scale(1.08)}
.uav-arrow:active{transform:translateY(-50%) scale(.95)}
.uav-arrow.l{left:40px}.uav-arrow.r{right:40px}
.uav-name{position:fixed;bottom:74px;left:50%;transform:translateX(-50%);font-size:.72rem;letter-spacing:.34em;color:#a8bdd6;white-space:nowrap}
.uav-name span{color:var(--accent);opacity:.7}
.uav-sub{position:fixed;bottom:56px;left:50%;transform:translateX(-50%);font-size:.5rem;letter-spacing:.3em;color:#5f7089}

@media(max-width:720px){.track{display:none}.tele{gap:18px}.tele.left{left:20px}.tele.right{right:20px}.t b{font-size:1.2rem}
  .uav-arrow.l{left:14px}.uav-arrow.r{right:14px}}

/* ============ DroneOps integration ============ */
/* boot: pre-flight status visible on stand while the rest of the HUD stays dark */
#hud.boot{opacity:1}
#hud.boot .tele,#hud.boot .compass{opacity:0;transition:opacity .4s ease}

/* ops record rows on the part cards */
.plabel .pl-ops{font-size:.53rem;letter-spacing:.06em;color:var(--accent);opacity:.88;margin-top:7px}
.plabel .pl-brand{font-size:.46rem;letter-spacing:.22em;color:#5f7089;margin-top:7px;padding-top:6px;
  border-top:1px solid rgba(120,170,210,.14)}

/* the app "airframe": plate becomes the store CTA */
.uav-name.app{color:#eef5fc;text-shadow:0 0 18px var(--glow)}
.uav-sub.app{color:var(--accent);pointer-events:auto;cursor:pointer;transition:text-shadow .3s}
.uav-sub.app:hover{text-shadow:0 0 14px var(--glow)}

/* ============ v2 ============ */
/* crawlable soul: visually hidden, present for engines & readers */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* WX line (weather-synced sky readout) */
#hud .wx{position:fixed;top:86px;left:50%;transform:translateX(-50%);font-size:.5rem;letter-spacing:.26em;
  color:#5f7089;opacity:0;transition:opacity 1.2s ease}
#hud .wx.on{opacity:.9}

/* EO/IR sensor view */
#irbtn{position:fixed;right:24px;bottom:14px;pointer-events:auto;cursor:pointer;background:none;
  border:1px solid rgba(120,160,200,.3);border-radius:2px;padding:5px 10px;color:#6a7a92;
  font-family:var(--font-m);font-size:.54rem;letter-spacing:.24em;transition:color .3s,border-color .3s,box-shadow .3s;z-index:23}
#irbtn:hover{color:var(--accent);border-color:var(--accent)}
#irbtn.on{color:#d8ffe8;border-color:#9fe8c0;box-shadow:0 0 16px rgba(160,255,200,.25)}
#ir{position:fixed;inset:0;z-index:21;pointer-events:none;opacity:0;transition:opacity .5s ease;
  font-family:var(--font-m);color:#d9efe2;text-shadow:0 0 6px rgba(180,255,210,.4)}
#ir .c{position:absolute;width:38px;height:38px;border:1.5px solid rgba(215,245,225,.75)}
#ir .c.tl{top:9vh;left:8vw;border-right:none;border-bottom:none}
#ir .c.tr{top:9vh;right:8vw;border-left:none;border-bottom:none}
#ir .c.bl{bottom:9vh;left:8vw;border-right:none;border-top:none}
#ir .c.br{bottom:9vh;right:8vw;border-left:none;border-top:none}
#ir .cross{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
#ir .cross i{position:absolute;background:rgba(215,245,225,.85)}
#ir .cross i:first-child{width:46px;height:1px;left:-23px;top:0}
#ir .cross i:last-child{width:1px;height:46px;left:0;top:-23px}
#ir .ir-tag{position:absolute;font-size:.55rem;letter-spacing:.22em;line-height:1.7}
#ir .tl2{top:9vh;left:calc(8vw + 50px)}
#ir .tr2{top:9vh;right:calc(8vw + 50px);text-align:right}
#ir .bl2{bottom:9vh;left:calc(8vw + 50px)}
#ir .br2{bottom:9vh;right:calc(8vw + 50px);text-align:right}
#ir .rec{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff5b5b;margin-right:7px;
  animation:recblink 1.2s steps(2) infinite;vertical-align:1px}
@keyframes recblink{0%{opacity:1}50%{opacity:.15}100%{opacity:1}}

/* live traffic tags */
#actags{position:fixed;inset:0;z-index:17;pointer-events:none}
.actag{position:absolute;font-family:var(--font-m);font-size:.5rem;letter-spacing:.18em;color:#9fb6cf;
  opacity:0;transition:opacity .6s ease;white-space:nowrap;text-shadow:0 0 8px rgba(0,0,0,.8)}
.actag i{display:inline-block;width:4px;height:4px;border-radius:50%;background:#cfe4ff;margin-right:6px;
  box-shadow:0 0 8px rgba(180,220,255,.8);vertical-align:1px}

/* reduced-motion */
#rmCard{display:none}
body.rm .scroll-space{height:100vh}
body.rm .scroll-cue{display:none}
body.rm #rmCard{display:block;position:fixed;left:50%;bottom:9vh;transform:translateX(-50%);z-index:24;
  max-width:min(560px,86vw);padding:16px 20px;background:linear-gradient(180deg,rgba(11,17,28,.86),rgba(7,11,19,.8));
  border:1px solid rgba(120,170,210,.22);border-top:2px solid var(--accent);border-radius:3px;
  font-size:.62rem;letter-spacing:.06em;line-height:1.7;color:#c6d8ec}
body.rm #rmCard b{display:block;letter-spacing:.24em;margin-bottom:8px;color:#eef5fc}

@media(max-width:720px){#irbtn{right:14px}}


/* store badges at the app airframe */
#storeBadges{position:fixed;bottom:92px;left:50%;transform:translateX(-50%);display:flex;gap:18px;
  align-items:center;opacity:0;pointer-events:none;transition:opacity .6s ease}
#storeBadges.on{opacity:1}
#storeBadges a,#storeBadges span{pointer-events:auto;display:block;position:relative;border-radius:10px}
#storeBadges img{height:52px;display:block;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));
  transition:transform .22s cubic-bezier(.2,.9,.3,1.3),filter .22s ease}
#storeBadges a:hover img{transform:translateY(-4px);filter:drop-shadow(0 10px 24px rgba(79,214,255,.4))}
#storeBadges a:active img{transform:translateY(1px) scale(.955);filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)) brightness(1.25);
  transition-duration:.08s}
#storeBadges a::after{content:"";position:absolute;inset:-3px;border-radius:12px;border:1.5px solid var(--accent);
  opacity:0;transform:scale(.9);pointer-events:none}
#storeBadges a:active::after{animation:btn-ring .45s ease-out}
@keyframes btn-ring{0%{opacity:.9;transform:scale(.92)}100%{opacity:0;transform:scale(1.22)}}
#storeBadges span img{opacity:1}
#storeBadges span:hover img{transform:translateY(-2px);opacity:1}
@media(max-width:720px){#storeBadges img{height:42px}#storeBadges{gap:10px;bottom:100px}}

/* ============ phone browsers (portrait) ============ */
/* Desktop/landscape untouched; these only resolve the narrow-screen
   collisions: sound button vs V/S unit, UAV plate + store badges vs the
   HUD telemetry row, and the two-line status wrapping into the WX line. */
@media(max-width:640px){
  #sound{bottom:112px;left:20px}
  .status{top:56px;font-size:.5rem;letter-spacing:.18em;white-space:nowrap}
  #hud .wx{top:76px;font-size:.46rem}
  .uav-name{bottom:150px}
  .uav-sub{bottom:132px}
  #storeBadges{bottom:176px;gap:10px}
  #storeBadges img{height:42px}
}