/* ==========================================================================
   RazenLab · camada HUD
   Interface de holograma no estilo de um laboratório de tecnologia avançada:
   linhas ciano que brilham, cantoneiras, grade técnica, leituras de dados.
   A identidade continua a mesma: o azul e o laranja da marca, a logo e a
   camada de filamento como motivo. Carregado depois do CSS de cada página.
   ========================================================================== */
:root{
  --hud:#5CE1FF;                          /* o ciano do holograma */
  --hud-dim:rgba(92,225,255,.55);
  --hud-line:rgba(92,225,255,.22);
  --hud-faint:rgba(92,225,255,.08);
  --hud-glow:0 0 14px rgba(92,225,255,.45);
  --hud-glow-blue:0 0 22px rgba(30,155,255,.55);
  --hud-hot:#F28A14;
  --hud-font:"Chakra Petch","Segoe UI",system-ui,sans-serif;
}

/* fundo: grade de projeto e um brilho frio no alto */
body{background-color:#020A1F}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 520px at 70% -10%,rgba(30,155,255,.16),transparent 65%),
    radial-gradient(700px 480px at 0% 110%,rgba(92,225,255,.07),transparent 60%),
    linear-gradient(rgba(92,225,255,.045) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,rgba(92,225,255,.045) 1px,transparent 1px) 0 0/48px 48px,
    #020A1F}

/* rótulo técnico: o "texto de sistema" do HUD */
.hud-label{font:500 12px/1.2 var(--hud-font);letter-spacing:.18em;text-transform:uppercase;color:var(--hud);display:inline-flex;align-items:center;gap:8px}
.hud-label::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;flex:0 0 auto}
.hud-label.hot{color:var(--hud-hot)}
.hud-label.plain::before{display:none}
.hud-num{font-family:var(--hud-font);font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* cantoneiras: os quatro cantos de um quadro de holograma */
.hud-frame{position:relative;
  background-image:
    linear-gradient(var(--hud),var(--hud)),linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),linear-gradient(var(--hud),var(--hud));
  background-repeat:no-repeat;
  background-size:18px 2px,2px 18px,18px 2px,2px 18px,18px 2px,2px 18px,18px 2px,2px 18px;
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;
  box-shadow:inset 0 0 0 1px var(--hud-line)}

/* linha de varredura que passa pelo quadro */
.hud-scan{position:relative;overflow:clip}
.hud-scan::after{content:"";position:absolute;left:0;right:0;top:0;height:30%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(92,225,255,.10) 70%,rgba(92,225,255,.35) 98%,transparent);opacity:0}
@keyframes hud-sweep{0%{transform:translateY(-100%);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(340%);opacity:0}}
@media (prefers-reduced-motion:no-preference){.hud-scan::after{animation:hud-sweep 5.5s cubic-bezier(.45,0,.55,1) infinite}}

/* anel de reator: anéis concêntricos que giram devagar */
.hud-ring{position:absolute;pointer-events:none;aspect-ratio:1}
.hud-ring svg{width:100%;height:100%;overflow:visible}
.hud-spin{transform-box:fill-box;transform-origin:center}
@keyframes hud-rot{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:no-preference){
  .hud-spin{animation:hud-rot var(--t,40s) linear infinite}
  .hud-spin.rev{animation-direction:reverse}
}

/* luz que pulsa (sistema ativo) */
@keyframes hud-pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:no-preference){.hud-blink{animation:hud-pulse 1.8s ease-in-out infinite}}

/* texto que brilha de leve */
.hud-glow-text{text-shadow:0 0 18px rgba(92,225,255,.35)}