/* Grupo Dls/ - tipografia
   Dois tratamentos de display, os dois tirados dos key visuals. */

/* ---------- 1. Justificado em caixa alta ----------
   A assinatura tipográfica da identidade nova: caixa alta, peso leve,
   justificado, vãos largos entre palavras. Está nos KVs 1, 4 e 5.
   O caixa alta é feito por CSS de propósito - no DOM o texto continua
   em caixa mista, por leitor de tela e por SEO. */
.t-justified {
  font-weight: 300;
  font-size: var(--fs-display-xl);
  line-height: var(--lh-justified);
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: justify;
  text-align-last: justify;
  hyphens: none;
}

/* ---------- 2. Caixa baixa apertada ----------
   Títulos de leitura: cards, blocos, chamadas curtas. */
.t-display {
  font-weight: 300;
  font-size: var(--fs-display-l);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}

.t-h2 {
  font-weight: 300;
  font-size: var(--fs-display-m);
  line-height: 1.06;
  letter-spacing: var(--tr-display);
  max-width: 22ch;
}

.t-title {
  font-weight: 500;
  font-size: var(--fs-title);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.t-numeral {
  font-weight: 100;
  font-size: var(--fs-numeral);
  line-height: var(--lh-numeral);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.t-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: var(--measure);
}

.t-body-l {
  font-size: var(--fs-body-l);
  line-height: 1.5;
  max-width: 56ch;
}

.t-small {
  font-size: var(--fs-small);
  line-height: 1.5;
}

.t-muted {
  color: var(--fg-muted);
}

/* Rótulo em caixa alta. Rationado: no máximo um a cada três seções.
   Ver a contagem no cabeçalho do index.html. */
.t-label {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ---------- revelação por máscara ----------
   Cada palavra vira um bloco inline com corte próprio. Inline-block
   preserva a justificação, então o tratamento 1 e a animação convivem.

   O respiro existe nos DOIS lados, e o de cima não é simetria estética.
   Com line-height 1.02 a caixa da linha é mais baixa que a área de
   conteúdo da fonte, então a área útil transborda para fora do corte.
   Altura de caixa alta cabe; acento em caixa alta não: o "Á" de "HÁ"
   no H1 do hero passava 1,74px acima da máscara a 76px e era decepado.
   Português acentua em caixa alta o tempo todo (Á, Ã, Ê, Õ) - qualquer
   manchete pode cair nisso, então a correção é na primitiva.

   O respiro é compensado por margem negativa nos dois lados: a caixa
   cresce para o corte, não para o fluxo, e a entrelinha não muda. */
.reveal-line {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-top: 0.14em;
  margin-top: -0.14em;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.reveal-line > span {
  display: inline-block;
  will-change: transform;
}

/* Estado inicial só existe quando o JS assume. Sem JS, o texto
   já está no lugar e legível.

   120% e não 110%: o deslocamento é medido sobre a altura da palavra,
   mas o corte agora é 0,28em mais alto por causa dos dois respiros.
   A 110% o acento do "HÁ" ficava 4,6px dentro da máscara, aparecendo
   como um risco antes da revelação começar. */
.js .reveal-line > span {
  transform: translateY(120%);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal-line > span {
    transform: none;
  }
}