/* ==========================================================================
   AQUISIÇÃO DE ALVO — componente próprio, usado pelo placar e pela pausa.

   Mora em arquivo separado porque tem JavaScript próprio (recon.js): a
   folha acompanha o componente, e nenhuma das duas telas precisa carregar
   a outra. Carregue-a DEPOIS da folha da cena — os pontos de cada tela
   ficam na folha dela, com especificidade de cena, e ganham mesmo assim.
   ========================================================================== */

/* ==========================================================================
   AQUISIÇÃO DE ALVO — portado do HeroRecon da home nova da AKL.
   A cadência está em recon.js; aqui fica só a aparência de cada fase.

   Ciclo de 6400ms: varre (1500) → trava (550) → segura (3730) → solta.
   Varrendo, a mira abre e apaga; ao travar, ela fecha e acende, e um anel
   colapsa de fora para dentro. É esse contraste que dá a leitura de
   travamento — não o movimento em si.

   A cor é --attention do sistema, que resolve para Tracer Gold 500: alvo
   adquirido é aviso, e aviso é ouro.
   ========================================================================== */
.recon {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.recon-aim {
  position: absolute;
  left: 0; top: 0;
  width: 5.625cqw; height: 5.625cqw;        /* 108px */
  will-change: transform;
}
.recon-aim::before,
.recon-aim::after {
  content: "";
  position: absolute;
  border: .052cqw solid var(--gold);
  border-radius: 50%;
}
.recon-aim::before {
  inset: 26%;
  opacity: .95;
  transition: transform .35s, opacity .25s;
}
.recon-aim::after {
  inset: 0;
  opacity: .32;
  border-style: dashed;
  will-change: transform;
  animation: orbitSpin 26s linear infinite;
}
.recon-cross {
  position: absolute;
  inset: 0;
  opacity: .85;
  transition: transform .35s, opacity .25s;
  background-image: linear-gradient(var(--gold) 0 0), linear-gradient(var(--gold) 0 0);
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: 100% .062cqw, .062cqw 100%;
}
.recon-flash {
  position: absolute;
  inset: 26%;
  border: .052cqw solid var(--gold);
  border-radius: 50%;
  opacity: 0;
}

/* Varrendo e soltando: mira aberta e apagada. Travada: fechada e acesa. */
[data-recon-phase="scan"] .recon-aim::before,
[data-recon-phase="release"] .recon-aim::before { opacity: .45; transform: scale(1.3); }
[data-recon-phase="scan"] .recon-cross,
[data-recon-phase="release"] .recon-cross { opacity: .35; transform: scale(.75); }
[data-recon-phase="lock"] .recon-flash { animation: reconLock .55s ease-out 1 both; }
@keyframes reconLock {
  from { opacity: .9; transform: scale(2.2); }
  to   { opacity: 0;  transform: scale(1); }
}

/* --- Leitura -------------------------------------------------------------
   Canto inferior esquerdo da região central, na mesma margem da marca.
   Varrendo, os dígitos rolam e a elevação recolhe; ao travar, a coordenada
   congela e a elevação aparece — é o que dá sentido ao ciclo.           */
.recon-read {
  position: absolute;
  left: 5.5cqw;
  bottom: 9.2cqw;
  display: grid;
  gap: .1cqw;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
  font-size: .573cqw;
  letter-spacing: .07cqw;
  line-height: 1.7;
  text-transform: uppercase;
  color: #8a929f;
  font-variant-numeric: tabular-nums;
}
.recon-read b { font-weight: 400; color: #d2d5da; }
.recon-status { color: #6d7684; margin-bottom: .2cqw; }
.recon-elev {
  overflow: hidden;
  max-height: 1.7cqw;
  opacity: 1;
  color: var(--gold);
  transition: max-height .4s, opacity .3s;
}
.recon-elev b { color: var(--gold); }
[data-recon-phase="scan"] .recon-elev,
[data-recon-phase="lock"] .recon-elev,
[data-recon-phase="release"] .recon-elev { max-height: 0; opacity: 0; }

/* Fonte fora de cena no OBS: não gira à toa. */
[data-recon-running="false"] .recon-aim::after,
[data-recon-running="false"] .recon-flash { animation-play-state: paused; }