/* O site de vendas (108): o desenho do bloco do rodízio de contatos (104): a fila com Otávio,
   Beatriz e Caio (os nomes do desenho dos aluguéis), o contato que desce para a pessoa da vez e o
   aviso do contato parado. Nenhum desenho é captura de tela (CA-005); o estado parado é o desenho
   completo: um contato com cada um, a vez de volta no Otávio e o aviso à vista. */

.cena-rodizio {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.7em;
  padding: 6% 6% 5%;
}

.fila,
.vagas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6em;
}

/* A pessoa da vez é a etiqueta escolhida, cheia de tinta; a vez passa de um para o outro. */
.fila span {
  justify-self: center;
  padding: 0.3em 0.8em;
  border: 1.5px solid var(--tinta);
  border-radius: 999px;
  background: var(--rua);
  font-weight: 700;
  animation: vez-na-fila 9s infinite;
}

.fila span:first-child {
  background: var(--tinta);
  color: var(--rua);
}

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

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

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

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

/* O lugar de cada pessoa, embaixo do nome: o contato da vez desce até ele. */
.vaga {
  display: grid;
  gap: 0.4em;
  align-content: start;
  overflow: hidden;
  padding: 0.45em;
  border-radius: 0.7em;
  background: rgb(27 27 24 / 8%);
}

/* O caminho do nome até o lugar dele. */
.fila span {
  position: relative;
}

.fila span::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  height: 0.7em;
  border-left: 2px dashed var(--tinta);
}

/* Os contatos que a pessoa já recebeu, embaixo do novo. */
.vaga i {
  height: 2.3em;
  border: 1.5px solid rgb(27 27 24 / 25%);
  border-radius: 0.5em;
  background: rgb(255 255 255 / 60%);
}

.chegou {
  padding: 0.4em 0.55em;
  border: 1.5px solid var(--tinta);
  border-radius: 0.5em;
  background: var(--rua);
  box-shadow: 0 4px 10px rgb(27 27 24 / 14%);
  animation: descer-na-vez 9s calc(var(--d) * 3s) infinite backwards;
}

.chegou small,
.parado small {
  color: var(--tinta-fraca);
  font-size: 0.85em;
}

@keyframes descer-na-vez {
  0%,
  2% {
    opacity: 0;
    transform: translateY(-1.5em);
  }

  8%,
  86% {
    opacity: 1;
    transform: none;
  }

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

/* ---------- O contato parado: no fim do laço, o aviso de 7 dias e o e-mail. ---------- */

.parado {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 0.5em;
  align-items: center;
  padding: 0.45em 0.6em;
  border: 1.5px solid var(--tinta);
  border-radius: 0.7em;
  background: var(--rua);
}

.parado > span {
  margin-right: auto;
}

.parado em {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.2em 0.6em;
  border: 1.5px solid var(--tinta);
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 700;
  white-space: nowrap;
  animation: chegar-o-aviso 9s infinite;
}

.parado em:first-of-type {
  background: var(--tinta);
  color: var(--rua);
}

/* O envelope, desenhado: a caixa e as duas abas da tampa. */
.envelope::before {
  content: '';
  width: 1.05em;
  height: 0.75em;
  border: 1.5px solid currentColor;
  border-radius: 0.12em;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 0.5px), transparent calc(50% + 0.5px)) left top /
      50% 70% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 0.5px), transparent calc(50% + 0.5px)) right top /
      50% 70% no-repeat;
}

@keyframes chegar-o-aviso {
  0%,
  70% {
    opacity: 0;
    transform: scale(0.85);
  }

  75%,
  96% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
  }
}