/* Contagem regressiva (templates/componentes/_contagem.html, js/componentes/contagem.js).
   Grande: cada parte numa casa, como um painel de aeroporto, com os dois-pontos piscando.
   Compacta (.contagem--compacta): numa linha só, "20d 23h 40m 12s".
   Quem usa ajusta pelas variáveis: --contagem-tamanho, --contagem-cor, --contagem-fundo,
   --contagem-borda e --contagem-rotulo (o palco escuro da entrada usa as do fundo invertido). */

.contagem {
  --contagem-tamanho: 2rem;
  --contagem-cor: var(--cor-texto);
  --contagem-fundo: var(--cor-superficie-suave);
  --contagem-borda: var(--cor-borda);
  --contagem-rotulo: var(--cor-texto-suave);

  display: inline-flex;
  align-items: flex-start;
  gap: calc(var(--contagem-tamanho) * 0.18);
  font-variant-numeric: tabular-nums;
}

.contagem__parte {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.contagem__valor {
  display: block;
  min-width: 2.35ch;
  padding: 0.16em 0.2em 0.12em;
  overflow: hidden;
  font-family: var(--fonte-mono);
  font-size: var(--contagem-tamanho);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--contagem-cor);
  background:
    linear-gradient(to bottom, transparent calc(50% - 0.5px), color-mix(in srgb, var(--contagem-borda) 70%, transparent) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    var(--contagem-fundo);
  border: 1px solid var(--contagem-borda);
  border-radius: var(--raio-2);
}

/* Quando o número muda, ele entra de cima, como uma placa virando. */
.contagem__valor--virou {
  animation: contagem-virar var(--duracao-3) var(--curva-saida);
}

.contagem__nome {
  font-family: var(--fonte-mono);
  font-size: var(--texto-2xs);
  letter-spacing: var(--tracado-rotulo);
  text-transform: uppercase;
  color: var(--contagem-rotulo);
}

.contagem__sigla {
  display: none;
}

.contagem__separador {
  padding-top: 0.12em;
  font-family: var(--fonte-mono);
  font-size: var(--contagem-tamanho);
  font-weight: 500;
  line-height: 1;
  color: var(--contagem-rotulo);
  animation: contagem-piscar 1s steps(1) infinite;
}

.contagem__chegou {
  display: none;
  font-family: var(--fonte-titulo);
  font-size: calc(var(--contagem-tamanho) * 0.8);
  font-weight: 700;
  letter-spacing: var(--tracado-titulo);
  color: var(--contagem-cor);
}

.contagem[data-chegou] .contagem__parte,
.contagem[data-chegou] .contagem__separador {
  display: none;
}

.contagem[data-chegou] .contagem__chegou {
  display: inline;
}

/* ---------------------------------------------------------------- compacta */
.contagem--compacta {
  --contagem-tamanho: 1em;

  align-items: baseline;
  gap: 0.45em;
}

.contagem--compacta .contagem__parte {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}

.contagem--compacta .contagem__valor {
  min-width: 0;
  padding: 0;
  font-size: inherit;
  letter-spacing: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.contagem--compacta .contagem__nome,
.contagem--compacta .contagem__separador {
  display: none;
}

.contagem--compacta .contagem__sigla {
  display: inline;
  font-family: var(--fonte-mono);
  color: var(--contagem-rotulo);
}

.contagem--compacta .contagem__chegou {
  font-size: inherit;
}

@keyframes contagem-virar {
  from {
    opacity: 0.2;
    transform: translateY(-40%);
  }
}

@keyframes contagem-piscar {
  50% {
    opacity: 0.25;
  }
}