/* O site de vendas (095): os desenhos dos blocos do mapa: os preços, a busca por perto e o endereço protegido. São desenhos do conceito de cada recurso,
   feitos das peças da legenda do mapa; nenhum é captura de tela (CA-004). O estado parado de
   cada um é o desenho completo: é o que fica para quem pediu menos movimento (telas.css). */

/* ---------- O mapinha: o chão, as ruas, o rio e a praça. ---------- */

.mapinha {
  background-color: var(--terra);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 14%, var(--rua) 14% 15.6%),
    repeating-linear-gradient(90deg, transparent 0 18%, var(--rua) 18% 19.2%);
}

.rio,
.praca,
.avenida,
.poi,
.etq,
.circulo,
.alfinete,
.modo {
  position: absolute;
}

.rio {
  right: -14%;
  top: -22%;
  width: 46%;
  height: 52%;
  border-radius: 50%;
  background: var(--agua);
}

.praca {
  left: 7%;
  top: 56%;
  width: 15%;
  height: 17%;
  border-radius: 0.5em;
  background: var(--praca);
}

.avenida {
  left: -10%;
  top: 60%;
  width: 120%;
  height: 4.5%;
  background: var(--rua);
  transform: rotate(-13deg);
}

.avenida.outra {
  top: 44%;
  height: 3.5%;
  transform: rotate(58deg);
}

/* Os pontos de interesse, nas cores da legenda. */
.poi {
  left: var(--x);
  top: var(--y);
  width: 1.1em;
  height: 1.1em;
  border: 0.18em solid var(--rua);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgb(27 27 24 / 30%);
}

.poi.escola {
  background: var(--escola);
}

.poi.mercado {
  background: var(--mercado);
}

.poi.hospital {
  background: var(--hospital);
}

/* A etiqueta de preço: a mesma peça do mapa de verdade. */
.etq {
  left: var(--x);
  top: var(--y);
  z-index: 2;
  padding: 0.35em 0.75em;
  border: 1.5px solid var(--tinta);
  border-radius: 999px;
  background: var(--rua);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgb(27 27 24 / 18%);
}

.etq.escolhida {
  background: var(--tinta);
  color: var(--rua);
}

/* ---------- Os preços: as etiquetas aparecem uma a uma, e ficam. ---------- */

.cena-precos .etq {
  animation: surgir 10s calc(var(--d) * 0.4s) infinite both;
}

@keyframes surgir {
  0% {
    opacity: 0;
    transform: translateY(0.5em) scale(0.8);
  }

  5%,
  90% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
    transform: none;
  }
}

/* ---------- Por perto: o círculo cresce de 500 metros a 5 km em volta do ponto. ---------- */

.raios,
.modos {
  position: absolute;
  left: 4%;
  top: 5%;
  z-index: 3;
  display: flex;
  gap: 0.4em;
}

.raios span,
.modos span {
  padding: 0.35em 0.7em;
  border: 1.5px solid var(--tinta);
  border-radius: 999px;
  background: var(--rua);
  font-weight: 700;
  white-space: nowrap;
}

/* Parado, o desenho fica no terceiro raio. */
.raios span:nth-child(3),
.modos span:first-child {
  background: var(--tinta);
  color: var(--rua);
}

.raios span {
  animation: vez-de-quatro 10s infinite;
}

.raios span:nth-child(2) {
  animation-delay: 2.5s;
}

.raios span:nth-child(3) {
  animation-delay: 5s;
}

.raios span:nth-child(4) {
  animation-delay: 7.5s;
}

@keyframes vez-de-quatro {
  0%,
  24% {
    background: var(--tinta);
    color: var(--rua);
  }

  25%,
  100% {
    background: var(--rua);
    color: var(--tinta);
  }
}

.circulo {
  left: 50%;
  top: 54%;
  width: 66%;
  aspect-ratio: 1;
  border: 2px solid var(--hospital);
  border-radius: 50%;
  background: rgb(163 34 34 / 10%);
  transform: translate(-50%, -50%) scale(0.78);
  animation: crescer 10s var(--saida) infinite;
}

@keyframes crescer {
  0%,
  22% {
    transform: translate(-50%, -50%) scale(0.32);
  }

  25%,
  47% {
    transform: translate(-50%, -50%) scale(0.54);
  }

  50%,
  72% {
    transform: translate(-50%, -50%) scale(0.78);
  }

  75%,
  97% {
    transform: translate(-50%, -50%) scale(1.06);
  }

  100% {
    transform: translate(-50%, -50%) scale(0.32);
  }
}

.alfinete {
  left: 50%;
  top: 54%;
  z-index: 3;
  width: 1.3em;
  height: 1.3em;
  border: 0.25em solid var(--rua);
  border-radius: 50%;
  background: var(--hospital);
  box-shadow: 0 2px 6px rgb(27 27 24 / 35%);
  transform: translate(-50%, -50%);
}

/* O que fica fora do círculo recua, e volta quando o círculo chega até ele. */
.etq.fora {
  opacity: 0.4;
  animation: entrar-no-circulo 10s infinite;
}

@keyframes entrar-no-circulo {
  0%,
  74% {
    opacity: 0.4;
  }

  78%,
  97% {
    opacity: 1;
  }

  100% {
    opacity: 0.4;
  }
}

/* ---------- O endereço: o mesmo imóvel, de três jeitos, um de cada vez. ---------- */

.modos span {
  animation: vez-de-tres 9s infinite;
}

.modos span:nth-child(2) {
  animation-delay: 3s;
}

.modos span:nth-child(3) {
  animation-delay: 6s;
}

@keyframes vez-de-tres {
  0%,
  32% {
    background: var(--tinta);
    color: var(--rua);
  }

  33%,
  100% {
    background: var(--rua);
    color: var(--tinta);
  }
}

.modo {
  left: 50%;
  top: 58%;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: um-de-tres 9s infinite;
}

.modo.area {
  width: 34%;
  aspect-ratio: 1;
  border: 2px dashed var(--tinta);
  border-radius: 50%;
  background: rgb(27 27 24 / 12%);
  opacity: 1;
}

.modo.bairro {
  display: grid;
  place-items: center;
  width: 64%;
  height: 46%;
  border: 2px dashed var(--tinta);
  border-radius: 1.5em;
  background: rgb(255 255 255 / 55%);
  font: 700 1.75em/1 var(--placa);
  text-transform: uppercase;
  animation-delay: 3s;
}

.modo.exato {
  width: 1.6em;
  height: 1.6em;
  border: 0.3em solid var(--rua);
  border-radius: 50%;
  background: var(--tinta);
  box-shadow:
    0 0 0 0.5em rgb(27 27 24 / 16%),
    0 2px 6px rgb(27 27 24 / 35%);
  animation-delay: 6s;
}

@keyframes um-de-tres {
  0% {
    opacity: 0;
  }

  3%,
  30% {
    opacity: 1;
  }

  33%,
  100% {
    opacity: 0;
  }
}