/* ════════════════════════════════════════════════════════════════
   SANBERNARDA.COM · SPACESHIP COCKPIT HUD  (escopo: html.cc-ship)
   Identidade visual de tela digital de espaçonave — só na home.
   Tudo fixo, pointer-events:none, nas bordas livres. Não interfere
   no conteúdo nem na legibilidade.
   ════════════════════════════════════════════════════════════════ */
:root {
  --ship-cyan: #B19CFF;
  --ship-acc:  #E84500;
  --ship-dim:  rgba(177,156,255,.55);
}

.cc-ship .ship {
  position: fixed; pointer-events: none; z-index: 66;
  font-family: var(--font-mono),'Courier New',monospace;
  color: var(--ship-cyan);
  text-transform: uppercase; letter-spacing: .12em;
}

/* ── 1. FITA DE RUMO (compass tape) no topo ── */
.cc-ship .ship-heading {
  top: 74px; left: 0; right: 0; height: 26px;
  border-top: 1px solid rgba(177,156,255,.22);
  border-bottom: 1px solid rgba(177,156,255,.22);
  opacity: .6;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.cc-ship .ship-heading__tape {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(177,156,255,.5) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, rgba(177,156,255,.85) 0 2px, transparent 2px 100px);
  background-position: 0 0;
}
.cc-ship .ship-heading__caret {
  position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 8px solid var(--ship-acc);
}
.cc-ship .ship-heading__read {
  position: absolute; top: 28px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 600; color: var(--ship-acc);
  background: rgba(18,6,26,.7); padding: 1px 7px; border: 1px solid rgba(232,69,0,.4);
}

/* ── 2. CLUSTER DE TELEMETRIA (sup-direita) ── */
.cc-ship .ship-telem {
  top: 88px; right: 18px; text-align: right; font-size: 10.5px; line-height: 1.7;
  opacity: .82;
}
.cc-ship .ship-telem .stl { display: block; color: var(--ship-dim); }
.cc-ship .ship-telem .stl b { color: var(--ship-cyan); font-weight: 600; }
.cc-ship .ship-telem .stl.warn b { color: var(--ship-acc); }
.cc-ship .ship-telem__hd {
  color: var(--ship-acc); font-size: 9px; letter-spacing: .2em;
  border-bottom: 1px solid rgba(232,69,0,.4); padding-bottom: 3px; margin-bottom: 5px;
}

/* ── 3. LINHA DE SCAN (varre top→bottom) ── */
.cc-ship .ship-scanline {
  left: 0; right: 0; top: 0; height: 2px; z-index: 65;
  background: linear-gradient(90deg, transparent, rgba(177,156,255,.7) 30%, rgba(177,156,255,.9) 50%, rgba(177,156,255,.7) 70%, transparent);
  box-shadow: 0 0 16px rgba(177,156,255,.6);
  animation: shipScan 9s cubic-bezier(.7,0,.3,1) infinite !important;
  opacity: .5;
}
@keyframes shipScan {
  0% { transform: translateY(0); opacity: 0; }
  6% { opacity: .55; }
  50% { transform: translateY(100vh); opacity: .55; }
  56%,100% { transform: translateY(100vh); opacity: 0; }
}

@media (max-width: 720px){ .cc-ship .ship-telem { display: none; } }

/* ── 4. RETÍCULO central (targeting) — sutil ── */
.cc-ship .ship-reticle {
  top: 50%; left: 50%; width: 220px; height: 220px;
  transform: translate(-50%, -54%); opacity: .14; z-index: 64;
  mix-blend-mode: screen;
}
.cc-ship .ship-reticle span { position: absolute; border: 1px solid var(--ship-cyan); }
.cc-ship .ship-reticle .r-ring { inset: 30%; border-radius: 50%; }
.cc-ship .ship-reticle .r-tl { top: 0; left: 0; width: 22px; height: 22px; border-right: 0; border-bottom: 0; }
.cc-ship .ship-reticle .r-tr { top: 0; right: 0; width: 22px; height: 22px; border-left: 0; border-bottom: 0; }
.cc-ship .ship-reticle .r-bl { bottom: 0; left: 0; width: 22px; height: 22px; border-right: 0; border-top: 0; }
.cc-ship .ship-reticle .r-br { bottom: 0; right: 0; width: 22px; height: 22px; border-left: 0; border-top: 0; }
.cc-ship .ship-reticle .r-hx { top: 50%; left: 38%; right: 38%; height: 1px; border: 0; background: var(--ship-cyan); }
.cc-ship .ship-reticle .r-vx { left: 50%; top: 38%; bottom: 38%; width: 1px; border: 0; background: var(--ship-cyan); }