/* ===========================================================================
   Mapa de oportunidades — visual compartilhado.

   A cena e a tese do produto: centenas de negocios apagados, o sistema
   varrendo, e uns poucos acendendo em ouro.

   Vive num arquivo proprio porque aparece em mais de uma tela (pagina de
   venda, entrada, cadastro). Duplicar o CSS garantiria que uma correcao
   futura entrasse numa e esquecesse a outra.

   Espera estas variaveis definidas pela pagina que usa:
   --rocha  --rocha-2  --veio  --areia-3  --ouro
   =========================================================================== */

.mapa {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;              /* isola layout e pintura do resto da pagina */
}

/* ---- o veu: escurece o lado do texto para ele nunca disputar com o fundo -- */
.mapa .veu {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(
    to right,
    var(--rocha) 30%,
    color-mix(in srgb, var(--rocha) 80%, transparent) 50%,
    transparent 80%
  );
}

/* Na tela de entrada o texto fica a ESQUERDA e embaixo, e o mapa ocupa um
   painel estreito -- o veu precisa vir do outro lado e de cima. */
.mapa.compacto .veu {
  background:
    linear-gradient(to left, transparent 40%, color-mix(in srgb, var(--rocha) 78%, transparent) 78%, var(--rocha) 100%),
    linear-gradient(to top, var(--rocha) 4%, transparent 46%);
}

/* ------------------------------------------------------------------ radar -- */

.radar {
  position: absolute;
  left: 72%;
  top: 46%;
  width: min(46vw, 620px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* Some nas bordas para nao virar um circulo desenhado no fundo. */
  mask-image: radial-gradient(circle, #000 38%, transparent 72%);
}
.mapa.compacto .radar { left: 66%; top: 40%; width: min(70%, 460px); }

/* Aneis concentricos, quase invisiveis: dao a escala do varrimento. */
.radar .anel {
  position: absolute;
  inset: 0;
  margin: auto;
  border: 1px solid var(--veio);
  border-radius: 50%;
  opacity: .5;
}
.radar .anel:nth-child(1) { width: 34%; height: 34%; }
.radar .anel:nth-child(2) { width: 62%; height: 62%; }
.radar .anel:nth-child(3) { width: 90%; height: 90%; }

/* A varredura. Um setor de gradiente conico girando devagar. */
.radar .feixe {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(240, 165, 46, .16) 0deg,
    rgba(240, 165, 46, .05) 22deg,
    transparent 52deg,
    transparent 360deg
  );
  animation: varrer 11s linear infinite;
}
@keyframes varrer { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ pontos -- */

.pt {
  position: absolute;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--areia-3);
  opacity: .22;
  animation: respirar 6s ease-in-out infinite;
  animation-delay: var(--atraso, 0s);
}
@keyframes respirar {
  0%, 100% { opacity: .16; }
  50%      { opacity: .34; }
}

/* Lead qualificado: ouro com halo. */
.pt.ouro {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--ouro);
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(240,165,46,.13), 0 0 14px 2px rgba(240,165,46,.35);
  animation: pulsar 5.5s ease-in-out infinite;
  animation-delay: var(--atraso, 0s);
}
@keyframes pulsar {
  0%, 100% { box-shadow: 0 0 0 3px rgba(240,165,46,.10), 0 0 12px 1px rgba(240,165,46,.26); }
  50%      { box-shadow: 0 0 0 6px rgba(240,165,46,.05), 0 0 20px 4px rgba(240,165,46,.46); }
}

/* Ponto que o sistema qualifica no meio da varredura: cinza vira ouro e volta.
   O ciclo longo e o delay espalhado fazem parecer descoberta, nao piscada. */
.pt.virando {
  animation: qualificar 22s ease-in-out infinite;
  animation-delay: var(--atraso, 0s);
}
@keyframes qualificar {
  0%, 42%  { background: var(--areia-3); opacity: .2; width: 4px; height: 4px; margin: -2px 0 0 -2px; box-shadow: none; }
  52%, 88% { background: var(--ouro); opacity: 1; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
             box-shadow: 0 0 0 4px rgba(240,165,46,.12), 0 0 16px 3px rgba(240,165,46,.4); }
  100%     { background: var(--areia-3); opacity: .2; width: 4px; height: 4px; margin: -2px 0 0 -2px; box-shadow: none; }
}

/* ---------------------------------------------------------------- ligacoes -- */

.ligacoes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ligacoes line {
  stroke: var(--ouro);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;   /* o viewBox estica, a linha nao engorda */
  opacity: 0;
  animation: ligar 18s ease-in-out infinite;
  animation-delay: var(--atraso, 0s);
}
@keyframes ligar {
  0%, 30%  { opacity: 0; }
  45%, 72% { opacity: .3; }
  100%     { opacity: 0; }
}

/* ------------------------------------------------------------- convertidos -- */

.cartao {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid var(--veio);
  border-radius: 6px;
  background: color-mix(in srgb, var(--rocha-2) 88%, transparent);
  backdrop-filter: blur(3px);
  font: 500 10px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--areia-2);
  white-space: nowrap;
  opacity: 0;
  animation: surgir 16s ease-in-out infinite;
  animation-delay: var(--atraso, 0s);
}
.cartao b {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ouro);
  color: #16120a;
  font-size: 9px;
  line-height: 1;
}
@keyframes surgir {
  0%, 18%   { opacity: 0; transform: translateY(6px); }
  30%, 62%  { opacity: 1; transform: none; }
  76%, 100% { opacity: 0; transform: translateY(-5px); }
}

/* ------------------------------------------------------------ responsivo -- */

/* Tablet: menos pontos, sem ligacoes, radar menor. */
@media (max-width: 1099px) {
  .pt:nth-child(even) { display: none; }
  .ligacoes { display: none; }
  .radar { left: 78%; width: min(58vw, 460px); }
  .cartao:nth-of-type(3) { display: none; }
}

/* Celular: so alguns pontos dourados no fundo. O resto atrapalharia a leitura
   do titulo, que passa a ocupar a largura toda. */
@media (max-width: 767px) {
  .radar, .cartao { display: none; }
  .pt { display: none; }
  .pt.ouro { display: block; opacity: .5; }
  .mapa .veu,
  .mapa.compacto .veu {
    background: linear-gradient(to bottom,
      var(--rocha) 12%,
      color-mix(in srgb, var(--rocha) 72%, transparent) 55%,
      var(--rocha) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .radar .feixe { animation: none; opacity: .5; }
  .pt, .pt.ouro, .pt.virando { animation: none; }
  /* Sem movimento, o ponto "virando" congela no estado ja qualificado --
     mostrar o resultado e melhor que mostrar um cinza que nunca acende. */
  .pt.virando {
    background: var(--ouro);
    opacity: 1;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    box-shadow: 0 0 0 4px rgba(240,165,46,.12);
  }
  .ligacoes line { animation: none; opacity: .22; }
  .cartao { animation: none; opacity: 1; transform: none; }
}