/* ===========================================================================
   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 */

  /* Tamanho do radar como variavel, e nao direto na regra dele.

     As orbitas derivam o proprio diametro deste valor. Se o radar tivesse a
     largura escrita nele, cada breakpoint teria que ser repetido nas orbitas
     -- e um dia um dos dois lugares mudaria sozinho. */
  --radar-tam: min(46vw, 620px);
}
.mapa.compacto { --radar-tam: min(70%, 460px); }

/* ---- 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: var(--radar-tam);
  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%; }

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

/* ----------------------------------------------------------------- orbitas -- */

/* A fila andando.

   Os pontos cinza sao os negocios da cidade, parados onde estao. O que gira em
   volta do nucleo sao os leads que o motor ja separou -- e a fila da promessa
   do texto, desenhada.

   So existe onde a cena pede (`cena.orbitas`). O painel de entrada continua
   com os aneis estaticos de sempre.
   ---------------------------------------------------------------------------- */

/* Com orbitas a mascara redonda muda de dono.

   No radar ela apagava tudo depois de 72% do raio, inclusive os leads da
   orbita externa -- justamente onde eles precisam aparecer. Quem precisava
   dela era so a varredura, para o setor conico nao virar fatia de pizza com
   borda reta. Os aneis nao precisam: cada um some sozinho no proprio degrade. */
.radar.orbitando { mask-image: none; }
.radar.orbitando .feixe { mask-image: radial-gradient(circle, #000 38%, transparent 72%); }

/* Centraliza por margem negativa, e nao por `inset: 0; margin: auto`.

   O margin auto so centraliza enquanto a caixa cabe dentro da mae: quando ela
   e MAIOR -- caso da orbita externa, que passa da borda do radar -- as margens
   automaticas viram zero e a caixa encosta no canto de cima. Meia largura de
   margem negativa nao tem esse limite. E `transform` esta ocupado pelo giro,
   entao a saida usual (translate -50%) tambem nao serve. */
.orbita {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: calc(var(--d) / -2);
  margin-top: calc(var(--d) / -2);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  animation: orbitar var(--vel) linear infinite;
}
@keyframes orbitar { to { transform: rotate(360deg); } }

/* A borda em degrade: clara num trecho, transparente no resto.

   E ela que torna o giro visivel. Um circulo de cor uniforme girando e
   indistinguivel de um parado -- o arco claro e o unico jeito de a rotacao
   virar imagem. As duas mascaras recortam so a moldura de 1px: uma cobre a
   caixa inteira, a outra so o miolo, e o `exclude` deixa passar a diferenca. */
.orbita::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 1px;
  background: linear-gradient(
    180deg,
    rgba(240, 165, 46, 0) 0%,
    rgba(240, 165, 46, .42) 43%,
    rgba(240, 165, 46, 0) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* O posto: sai do centro, gira ate o angulo, anda o raio, e desgira -- assim o
   que estiver dentro chega no lugar certo sem herdar a inclinacao. */
.posto {
  position: absolute;
  left: 50%;
  top: 50%;
  transform:
    translate(-50%, -50%)
    rotate(var(--ang))
    translate(var(--r))
    rotate(calc(-1 * var(--ang)));
}

/* Lead na orbita: o mesmo ouro com halo dos pontos do mapa, um pouco maior --
   quem esta na fila ja passou pelo corte.

   Chama-se `pepita`, e nao `lead`, porque `.lead` ja e o paragrafo de abertura
   da pagina de venda -- e ele carrega `margin-top: 24px`. Com o nome repetido a
   margem caia em cima do ponto e deslocava a orbita inteira 24px para baixo. */
.posto.pepita {
  width: var(--tam, 7px);
  height: var(--tam, 7px);
  border-radius: 50%;
  background: var(--ouro);
  box-shadow: 0 0 0 3px rgba(240,165,46,.12), 0 0 16px 3px rgba(240,165,46,.42);
}

/* Cancela o tombo da orbita: mesma duracao, sentido contrario. Sem isto o selo
   viaja de cabeca para baixo em metade da volta. */
.face { display: block; animation: orbitar var(--vel) linear infinite; }

/* O nucleo: o motor no centro, de onde a varredura sai e para onde a fila
   aponta. As orbitas convergem para ele -- sem nada ali o centro fica com um
   buraco e o desenho perde o assunto. */
.nucleo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, var(--rocha-2) 55%, transparent 78%);
  box-shadow: 0 0 34px 10px rgba(240, 165, 46, .10);
}
.nucleo img { display: block; opacity: .92; }

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

/* Cartao montado numa orbita: o mesmo selo, mas permanente.

   O espalhado pelo mapa aparece e some porque marca um instante -- "este
   acabou de ser qualificado". O da orbita marca um estado: ele ja esta na
   fila, e fica. Piscar seria dizer que sai dela. */
.cartao.fixo {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: none;
  opacity: 1;
}

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

/* Tablet: menos pontos, sem ligacoes, radar menor. */
@media (max-width: 1099px) {
  .pt:nth-child(even) { display: none; }
  .ligacoes { display: none; }
  /* O tamanho vai na variavel, e nao na largura do radar: as orbitas derivam o
     diametro delas dai. Escrito direto no `.radar`, o radar encolhia aqui e a
     fila continuava no tamanho de desktop -- os dois descolavam, e em telas
     mais estreitas a orbita externa chegava a ficar DENTRO do radar. */
  .mapa { --radar-tam: min(58vw, 460px); }
  .radar { left: 78%; }
  .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; }
  /* A fila para onde foi desenhada. Os leads continuam nos postos e o arco
     claro continua na borda -- a cena perde o movimento, nao o assunto. */
  .orbita, .face { animation: none; }
  /* O `transform: none` do cartao acima tiraria o selo da orbita do lugar:
     ele depende do translate para ficar centrado no ponto. */
  .cartao.fixo { transform: translate(-50%, -50%); }
}