/* ===========================================================
   Contador rolante — porte vanilla do Counter do React Bits.
   Cada casa e uma coluna com os 10 digitos empilhados; o numero
   certo e trazido pra janela por translateY, pelo caminho mais
   curto (por isso o desvio de mais de 5 casas volta pelo outro lado).
   =========================================================== */

.contador {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}

.contador__janela {
  display: flex;
  overflow: hidden;
  line-height: 1;
  direction: ltr;
}

.contador__casa {
  position: relative;
  width: 1ch;
  height: var(--h, 1em);
  font-variant-numeric: tabular-nums;
}

.contador__casa > span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

/* separador de milhar: fica parado enquanto as casas rolam */
.contador__sep {
  display: flex;
  align-items: center;
  height: var(--h, 1em);
}

/* veu: apaga o topo e a base da janela pros digitos entrarem e
   sairem por tras da cor da secao, nao cortados na reta */
.contador__veu {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.contador__veu::before,
.contador__veu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 26%;
}
/* Le o token da paleta: trocar --bg-3 no :root do styles.css muda o
   veu junto. Chumbado, virava duas barras escuras sobre os numeros. */
.contador__veu::before {
  top: 0;
  background: linear-gradient(to bottom, var(--contador-fundo, var(--bg-3)), transparent);
}
.contador__veu::after {
  bottom: 0;
  background: linear-gradient(to top, var(--contador-fundo, var(--bg-3)), transparent);
}

/* Texto que so o leitor de tela ve: o numero por extenso. */
.contador__lido {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}