/* O site de vendas (095): os desenhos dos blocos da carteira: a importação e os portais. 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). */

/* ---------- A importação: o arquivo, a barra que se enche e os imóveis que entram. ---------- */

.cena-importar {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 1.1em;
  align-content: start;
  padding: 8% 8% 6%;
}

.arquivo {
  width: fit-content;
  padding: 0.5em 0.9em;
  border: 1.5px dashed var(--tinta);
  border-radius: 0.6em;
  background: var(--rua);
  font-weight: 700;
}

.barra {
  height: 1em;
  overflow: hidden;
  border: 1.5px solid var(--tinta);
  border-radius: 999px;
  background: var(--rua);
}

.barra i {
  height: 100%;
  background: var(--tinta);
  transform-origin: left;
  animation: encher 9s var(--saida) infinite;
}

@keyframes encher {
  0% {
    transform: scaleX(0);
  }

  40%,
  95% {
    transform: scaleX(1);
  }

  100% {
    transform: scaleX(0);
  }
}

.entraram {
  font-size: 1.15em;
  animation: depois 9s infinite;
}

.fileira {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7em;
  align-content: start;
}

/* Cada imóvel que entra é uma ficha: a foto em cima, uma linha de texto embaixo. */
.fileira i {
  aspect-ratio: 4 / 3;
  border: 1.5px solid var(--tinta);
  border-radius: 0.5em;
  background: linear-gradient(var(--praca) 0 62%, var(--rua) 62% 100%);
  animation: depois 9s infinite;
}

.fileira i:nth-child(even) {
  background: linear-gradient(var(--agua) 0 62%, var(--rua) 62% 100%);
}

.fileira i:nth-child(n + 3) {
  animation-name: depois-um-pouco;
}

.fileira i:nth-child(n + 6) {
  animation-name: por-ultimo;
}

@keyframes depois {
  0%,
  38% {
    opacity: 0;
    transform: translateY(0.4em);
  }

  44%,
  95% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
  }
}

@keyframes depois-um-pouco {
  0%,
  46% {
    opacity: 0;
    transform: translateY(0.4em);
  }

  52%,
  95% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
  }
}

@keyframes por-ultimo {
  0%,
  54% {
    opacity: 0;
    transform: translateY(0.4em);
  }

  60%,
  95% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
  }
}

/* ---------- Os portais: um cadastro, três destinos. ---------- */

.cena-portais {
  display: grid;
  grid-template-columns: 34% minmax(0, 1fr) 36%;
  align-items: center;
  padding: 8%;
}

.imovel {
  padding: 0.7em;
  border: 1.5px solid var(--tinta);
  border-radius: 0.8em;
  background: var(--rua);
}

.imovel i {
  aspect-ratio: 4 / 3;
  margin-bottom: 0.5em;
}

.imovel small {
  color: var(--tinta-fraca);
}

.fios {
  display: grid;
  gap: 2.6em;
  padding: 0 0.4em;
}

.fios i {
  height: 2.5px;
  background: var(--tinta);
  transform-origin: left;
  animation: ligar 9s var(--saida) infinite both;
}

.fios i:nth-child(1) {
  rotate: -16deg;
}

.fios i:nth-child(3) {
  rotate: 16deg;
}

.destinos {
  display: grid;
  gap: 1.1em;
}

.destinos span {
  padding: 0.6em 0.8em;
  border: 1.5px solid var(--tinta);
  border-radius: 999px;
  background: var(--tinta);
  color: var(--rua);
  font-weight: 700;
  text-align: center;
  animation: chegou 9s infinite both;
}

.fios i:nth-child(2),
.destinos span:nth-child(2) {
  animation-delay: 0.9s;
}

.fios i:nth-child(3),
.destinos span:nth-child(3) {
  animation-delay: 1.8s;
}

@keyframes ligar {
  0% {
    scale: 0 1;
  }

  14%,
  88% {
    scale: 1 1;
  }

  100% {
    scale: 0 1;
  }
}

@keyframes chegou {
  0%,
  12% {
    background: var(--rua);
    color: var(--tinta);
  }

  16%,
  88% {
    background: var(--tinta);
    color: var(--rua);
  }

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