/* ════════════════════════════════════════════════════════════════
   CREATIVE CORE · 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: #19E0FF;
  --ship-acc:  #FF3D14;
  --ship-dim:  rgba(25,224,255,.55);
}

.cc-ship .ship {
  position: fixed; pointer-events: none; z-index: 66;
  font-family: 'DM 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(25,224,255,.22);
  border-bottom: 1px solid rgba(25,224,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(25,224,255,.5) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, rgba(25,224,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(5,7,15,.7); padding: 1px 7px; border: 1px solid rgba(255,61,20,.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(255,61,20,.4); padding-bottom: 3px; margin-bottom: 5px;
}

/* ── 3. RADAR com varredura (direita, abaixo da telemetria) ── */
.cc-ship .ship-radar {
  top: 188px; right: 18px; width: 96px; height: 96px; border-radius: 50%;
  border: 1px solid rgba(25,224,255,.35);
  background:
    radial-gradient(circle, transparent 0 30%, rgba(25,224,255,.05) 31% 32%, transparent 33%),
    radial-gradient(circle, transparent 0 62%, rgba(25,224,255,.05) 63% 64%, transparent 65%);
  opacity: .8; overflow: hidden;
}
.cc-ship .ship-radar::before { /* cruz */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(rgba(25,224,255,.18) 0 1px, transparent 1px) 50% 50% / 100% 100% no-repeat,
    linear-gradient(90deg, rgba(25,224,255,.18) 0 1px, transparent 1px) 50% 50% / 100% 100% no-repeat;
  background-position: center; 
}
.cc-ship .ship-radar__sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(25,224,255,.45), transparent 38%);
  animation: shipSweep 3.4s linear infinite !important;
}
.cc-ship .ship-radar__blip {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--ship-acc); box-shadow: 0 0 6px var(--ship-acc);
  animation: shipBlip 3.4s ease-in-out infinite !important;
}
.cc-ship .ship-radar__label {
  position: absolute; bottom: -16px; left: 0; right: 0; text-align: center;
  font-size: 8px; color: var(--ship-dim); letter-spacing: .18em;
}
@keyframes shipSweep { to { transform: rotate(360deg); } }
@keyframes shipBlip { 0%,100%{opacity:0;} 8%,16%{opacity:1;} 40%{opacity:0;} }

/* ── 4. 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(25,224,255,.7) 30%, rgba(25,224,255,.9) 50%, rgba(25,224,255,.7) 70%, transparent);
  box-shadow: 0 0 16px rgba(25,224,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; }
}

/* ── 5. BARRA DE STATUS (rodapé central) ── */
.cc-ship .ship-status {
  bottom: 14px; left: 50%; transform: translateX(-50%);
  font-size: 10px; letter-spacing: .16em; color: var(--ship-dim);
  background: rgba(5,7,15,.6); padding: 4px 14px;
  border: 1px solid rgba(25,224,255,.22); white-space: nowrap;
  display: flex; align-items: center; gap: 10px;
}
.cc-ship .ship-status b { color: var(--ship-cyan); font-weight: 600; }
.cc-ship .ship-status .sdot {
  width: 7px; height: 7px; border-radius: 50%; background: #36e07e;
  box-shadow: 0 0 8px #36e07e; animation: shipBlink 1.6s steps(2) infinite !important;
}
@keyframes shipBlink { 0%,60%{opacity:1;} 61%,100%{opacity:.3;} }
@media (max-width: 720px){ .cc-ship .ship-status, .cc-ship .ship-radar, .cc-ship .ship-telem { display: none; } }

/* ── 6. 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); }

@media (prefers-reduced-motion: reduce) {
  /* identidade pedida explicitamente — mantém varreduras suaves */
  .cc-ship .ship-radar__sweep { animation-duration: 4.5s !important; }
}