/* Contador em odômetro: cada casa é uma coluna de algarismos que rola até
   parar no dígito certo, disparado quando a dobra entra na tela.

   O texto original fica no HTML e só é trocado pelo mecanismo depois que o
   JavaScript roda, então sem JS o número aparece normalmente.

   Tudo aqui é escrito a partir de `[data-counter] .ctr`, e não com classes
   soltas. O mecanismo é montado com <span> dentro de um elemento que já vive
   num contêiner com regras próprias — e um `.home-proof-metrics span` da vida
   alcançava esses spans, trocando display e font-size por baixo dos panos. Foi
   assim que "500+" virou um risco de 12px em vez de um número de 42px. Com a
   cadeia de três classes, a estrutura do contador ganha essas disputas. */

[data-counter] .ctr{
  display:inline-flex;
  align-items:baseline;
  /* só para o prefixo poder virar linha própria onde o card é estreito */
  flex-wrap:wrap;
  row-gap:0;
  line-height:inherit;
  vertical-align:baseline;
}

/* A tipografia dos spans internos volta a ser a do alvo, e margem e recuo
   voltam a zero. Só longhands para a fonte: o line-height das casas é
   definido adiante e um atalho `font` o apagaria.

   A margem importa tanto quanto o resto: um `.home-proof-metrics span` com
   margem no rótulo empurrava a coluna 16px para baixo dentro da janela da
   casa, e o algarismo saía cortado pela metade. */
[data-counter] .ctr,
[data-counter] .ctr span{
  margin:0;
  padding:0;
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
  font-style:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  color:inherit;
}

/* a maquinaria alinha as casas e nunca quebra: algarismos de um mesmo número
   não podem cair em linhas diferentes */
[data-counter] .ctr .ctr-maq{
  display:inline-flex;
  align-items:baseline;
  flex-wrap:nowrap;
}

[data-counter] .ctr .ctr-place{
  display:inline-block;
  overflow:hidden;
  line-height:1;
  width:auto;
}

[data-counter] .ctr .ctr-col{
  display:flex;
  flex-direction:column;
  will-change:transform;
  transform:translateY(var(--ctr-from,0px));
}

[data-counter] .ctr.is-running .ctr-col{
  transform:translateY(var(--ctr-to,0px));
  transition:transform var(--ctr-dur,1.15s) cubic-bezier(.16,1,.3,1) var(--ctr-delay,0s);
}

[data-counter] .ctr .ctr-col>span{
  display:block;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

/* prefixo e sufixo (+, %, vírgula, " dias") não rolam */
[data-counter] .ctr .ctr-fixed{
  display:inline-block;
  width:auto;
  white-space:pre;
}

/* o valor que o leitor de tela anuncia, invisível na tela */
[data-counter] .ctr .ctr-lido{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

@media(prefers-reduced-motion:reduce){
  [data-counter] .ctr .ctr-col{
    transition:none!important;
    transform:translateY(var(--ctr-to,0px))!important;
  }
}