/* ==========================================================================
   HUD — the instrument layer drawn over surveillance imagery and video.
   Include on any page that shows domain imagery:
     <link rel="stylesheet" href="/css/hud.css">
   Markup (inside a positioned media box):
     <div class="hud" aria-hidden="true">
       <span class="hud__corner hud__corner--tl"></span> …--tr --bl --br
       <span class="hud__read hud__read--tl">LINE ONE<br>LINE TWO</span>   (--tr for top right)
       <span class="hud__reticle"></span>
       <span class="hud__box" style="--x:58%;--y:44%;--w:14%;--h:18%"><em>Label</em></span>
       <span class="hud__track" style="--x:20%;--y:22%"><em>Label</em></span>   (--alert variant)
       <span class="hud__node" style="--x:30%;--y:54%"></span>                (--alert variant)
       <span class="hud__scan"></span> <span class="hud__grid"></span> <svg class="hud__net">…</svg>
     </div>
   Boxes and the scan animate in when an ancestor gets .is-active; boxes marked
   .hud__box--late wait for .is-compared (before/after reveals).
   ========================================================================== */
.hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; color: #fff; font-family: var(--font-mono); }
.hud::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgb(0 0 0 / 0.45)); }
.hud__corner { position: absolute; width: 22px; height: 22px; border: 0 solid rgb(255 255 255 / 0.75); }
.hud__corner--tl { top: 16px; left: 16px; border-top-width: 1.5px; border-left-width: 1.5px; }
.hud__corner--tr { top: 16px; right: 16px; border-top-width: 1.5px; border-right-width: 1.5px; }
.hud__corner--bl { bottom: 16px; left: 16px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.hud__corner--br { bottom: 16px; right: 16px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.hud__read { position: absolute; top: 24px; font-size: 10.5px; line-height: 1.7; letter-spacing: 0.14em; color: rgb(255 255 255 / 0.86); text-shadow: 0 1px 3px rgb(0 0 0 / 0.7); }
.hud__read--tl { left: 30px; }
.hud__read--tr { right: 30px; text-align: right; }
.hud__sim { position: absolute; left: 30px; bottom: 22px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(255 255 255 / 0.55); }
.hud__reticle { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border: 1px solid rgb(255 255 255 / 0.45); border-radius: 50%; }
.hud__reticle::before, .hud__reticle::after { content: ""; position: absolute; background: rgb(255 255 255 / 0.6); }
.hud__reticle::before { left: 50%; top: -14px; bottom: -14px; width: 1px; }
.hud__reticle::after { top: 50%; left: -14px; right: -14px; height: 1px; }
.hud__box {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border: 1.5px solid var(--crimson-300);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25);
  opacity: 0;
  transform: scale(1.5);
  transition: opacity 400ms var(--ease-soft), transform 700ms var(--ease-spring);
}
.is-active .hud__box:not(.hud__box--late), .is-compared .hud__box--late { opacity: 1; transform: none; transition-delay: 500ms; }
.is-compared .hud__box--late:nth-of-type(n + 2) { transition-delay: 700ms; }
.hud__box em, .hud__track em {
  position: absolute;
  white-space: nowrap;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 7px;
}
.hud__box em { left: -1.5px; bottom: 100%; margin-bottom: 5px; background: var(--crimson); color: #fff; }
.hud__track {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 1.5px solid rgb(255 255 255 / 0.9);
  transform: rotate(45deg);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3);
}
.hud__track em { left: 26px; top: -4px; transform: rotate(-45deg); transform-origin: left top; background: rgb(0 0 0 / 0.55); color: #fff; border: 1px solid rgb(255 255 255 / 0.25); }
.hud__track--alert { border-color: var(--crimson-300); background: rgb(200 16 46 / 0.35); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3); }
.hud__track--alert em { background: var(--crimson); border-color: transparent; }
/* The scan line rides the right edge of a full-width box that translates across (compositor only, no layout). */
.hud__scan {
  position: absolute;
  inset: 0;
  translate: -100% 0;
  opacity: 0;
}
.hud__scan::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 2px;
  background: linear-gradient(transparent, var(--crimson-300) 20%, var(--crimson-300) 80%, transparent);
}
.is-active .hud__scan { animation: hud-scan 1.6s var(--ease-in-out) 200ms 1 both; }
@keyframes hud-scan { 0% { translate: -100% 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { translate: 0 0; opacity: 0; } }
.hud__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgb(255 255 255 / 0.2) 1px, transparent 1px), linear-gradient(to bottom, rgb(255 255 255 / 0.2) 1px, transparent 1px);
  background-size: 12.5% 20%;
  opacity: 0.5;
}
.hud__net { position: absolute; inset: 0; width: 100%; height: 100%; }
.hud__net path { fill: none; stroke: rgb(255 255 255 / 0.7); stroke-width: 1.2; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.is-active .hud__net path { animation: hud-flow 1.4s linear infinite; }
/* Off screen or in a hidden tab (the page script sets data-offscreen on the console) the
   dashes hold, and resume where they stopped. */
[data-offscreen] .hud__net path { animation-play-state: paused; }
@keyframes hud-flow { to { stroke-dashoffset: -18; } }
.hud__node { position: absolute; left: var(--x); top: var(--y); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border: 1.5px solid #fff; background: rgb(0 0 0 / 0.5); transform: rotate(45deg); }
.hud__node--alert { background: var(--crimson); border-color: var(--crimson-300); }
/* Reduced motion: boxes appear in place, the scan stays parked off-frame and the links stay still */
@media (prefers-reduced-motion: reduce) {
  .hud__box { transform: none; transition: none; }
  .is-active .hud__scan, .is-active .hud__net path { animation: none; }
}