/* O site de vendas (095): os desenhos dos blocos da gestão: os aluguéis e as comissões, os modelos de site e a equipe. 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). */

/* ---------- Os aluguéis e as comissões. ---------- */

.cena-alugueis {
  display: grid;
  align-content: center;
  gap: 1.4em;
  padding: 7% 8%;
}

.linhas {
  border-top: 1.5px solid var(--tinta);
}

.linhas > span {
  display: flex;
  gap: 0.75em;
  align-items: center;
  justify-content: space-between;
  padding: 0.6em 0;
  border-bottom: 1.5px solid var(--tinta);
}

.linhas em {
  padding: 0.25em 0.65em;
  border: 1.5px solid var(--tinta);
  border-radius: 999px;
  background: var(--rua);
  font-size: 0.9em;
  font-weight: 700;
  white-space: nowrap;
}

.linhas em.pago {
  background: var(--praca);
}

.comissoes {
  display: grid;
  gap: 0.45em;
}

/* A barra de cada corretor: o nome escrito por cima do quanto ele fez. */
.comissoes span {
  padding: 0.35em 0.65em;
  border: 1.5px solid var(--tinta);
  border-radius: 0.45em;
  background: linear-gradient(90deg, var(--agua) 0 var(--t), var(--rua) var(--t) 100%) no-repeat left / 100% 100%;
  font-weight: 700;
  animation: medir 9s var(--saida) infinite;
}

@keyframes medir {
  0% {
    background-size: 0% 100%;
  }

  30%,
  94% {
    background-size: 100% 100%;
  }

  100% {
    background-size: 0% 100%;
  }
}

/* ---------- Os modelos de site: quatro, e a escolha passa de um para o outro. ---------- */

.cena-modelos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1em;
  align-content: center;
  padding: 8% 9%;
}

.modelo {
  display: grid;
  grid-template-rows: 46% 1fr;
  gap: 0.4em;
  aspect-ratio: 4 / 3;
  padding: 0.5em;
  border: 1.5px solid var(--tinta);
  border-radius: 0.6em;
  background: var(--rua);
  animation: vez-do-modelo 10s infinite;
}

.modelo.com-mapa {
  grid-template: 1fr / 38% 1fr;
}

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

.modelo:nth-child(3) {
  box-shadow: 0 0 0 4px var(--tinta);
  animation-delay: 5s;
}

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

@keyframes vez-do-modelo {
  0%,
  24% {
    box-shadow: 0 0 0 4px var(--tinta);
  }

  25%,
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

.modelo .capa {
  border-radius: 0.3em;
  background: rgb(27 27 24 / 30%);
}

.modelo .capa.meio {
  background: linear-gradient(90deg, rgb(27 27 24 / 30%) 0 46%, var(--terra) 46% 100%);
}

.modelo .cartoes {
  background: repeating-linear-gradient(90deg, rgb(27 27 24 / 14%) 0 30%, transparent 30% 35%);
}

.modelo .lista {
  background: repeating-linear-gradient(0deg, rgb(27 27 24 / 14%) 0 22%, transparent 22% 28%);
}

/* O mapa do modelo: o chão e três pontos. */
.modelo .mapa {
  border-radius: 0.3em;
  background:
    radial-gradient(circle at 30% 40%, var(--tinta) 0 0.25em, transparent 0.27em),
    radial-gradient(circle at 62% 28%, var(--tinta) 0 0.25em, transparent 0.27em),
    radial-gradient(circle at 54% 70%, var(--tinta) 0 0.25em, transparent 0.27em), var(--terra);
}

/* ---------- A equipe: cada pessoa, e as chaves do que ela pode. ---------- */

.cena-equipe {
  display: grid;
  align-content: center;
  padding: 7% 8%;
}

.pessoa,
.legenda {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, 4.4em);
  gap: 0 0.5em;
  align-items: center;
}

.pessoa {
  padding: 0.65em 0;
  border-bottom: 1.5px solid var(--tinta);
}

.pessoa b,
.pessoa small {
  grid-column: 1;
}

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

.legenda {
  order: -1;
  padding-bottom: 0.5em;
  border-bottom: 1.5px solid var(--tinta);
  font-size: 0.85em;
  font-weight: 700;
}

.legenda span {
  justify-self: center;
}

.legenda span:first-child {
  grid-column: 2;
}

/* A chave: desligada, clara, com o pino à esquerda; ligada, cheia de tinta, com o pino à direita. */
.pessoa i {
  position: relative;
  grid-row: 1 / span 2;
  justify-self: center;
  width: 2.6em;
  height: 1.4em;
  border: 1.5px solid var(--tinta);
  border-radius: 999px;
  background: var(--rua);
}

.pessoa i:nth-of-type(1) {
  grid-column: 2;
}

.pessoa i:nth-of-type(2) {
  grid-column: 3;
}

.pessoa i:nth-of-type(3) {
  grid-column: 4;
}

.pessoa i::after {
  content: '';
  position: absolute;
  left: 0.15em;
  top: 50%;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  background: var(--tinta);
  translate: 0 -50%;
}

.pessoa i.ligada,
.pessoa i.liga {
  background: var(--tinta);
}

.pessoa i.ligada::after,
.pessoa i.liga::after {
  left: auto;
  right: 0.15em;
  background: var(--rua);
}

/* Uma das chaves liga e desliga: é o administrador liberando os números para a corretora. */
.pessoa i.liga {
  animation: liberar 6s infinite;
}

.pessoa i.liga::after {
  animation: pino-que-liga 6s infinite;
}

@keyframes liberar {
  0%,
  40% {
    background: var(--rua);
  }

  50%,
  100% {
    background: var(--tinta);
  }
}

@keyframes pino-que-liga {
  0%,
  40% {
    right: calc(100% - 1.05em);
    background: var(--tinta);
  }

  50%,
  100% {
    right: 0.15em;
    background: var(--rua);
  }
}