/* Seção de dados (#numeros). 100 quadrados, 6 acesos.
   Estado final é o padrão. A entrada animada só existe quando o dados.js arma a seção,
   e mexe apenas em transform e opacity.

   Cores por tema, sempre a partir dos tokens. Tema claro é o padrão: lima não tem
   contraste sobre papel, então os seis quadrados são a superfície escura de destaque
   (--surface-accent) com o lima só no canto chanfrado, que é lima sobre escuro; o 6
   grande e o 6 dos degraus usam --text-accent, e a barra deles --accent-indicator.
   No escuro, o lima volta a ser o destaque em tudo. */
.dados {
  --quad-apagado: var(--chart-neutral);
  --quad-aceso: linear-gradient(135deg, var(--surface-accent-start), var(--surface-accent-end));
  --quad-canto: var(--accent);
  --destaque: var(--text-accent);
  --barra-acesa: var(--accent-indicator);
  --barra-apagada: var(--border-strong);
}
[data-theme="dark"] .dados {
  --quad-aceso: var(--accent);
  --quad-canto: transparent;
  --destaque: var(--accent);
  --barra-acesa: var(--accent);
  --barra-apagada: var(--chart-neutral);
}

.conta {
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 340px);
  justify-content: center; align-items: end; gap: var(--space-10);
  margin: var(--space-10) auto 0;
}
.conta__chave {
  display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--text-muted);
}
.conta__chave i { width: 12px; height: 12px; border-radius: 2px; background: var(--quad-apagado); }

.conta__grade { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.conta__grade i { position: relative; aspect-ratio: 1; }
.conta__grade i::before,
.conta__grade .agente::after { content: ""; position: absolute; inset: 0; }
.conta__grade i::before { background: var(--quad-apagado); border-radius: 2px; }
/* Os acesos levam o chanfro da marca, então não dependem só da cor.
   O fundo do próprio <i> aparece pelo canto cortado: é onde o lima fica no claro. */
.conta__grade .agente { background: var(--quad-canto); }
.conta__grade .agente::before { opacity: 0; }
.conta__grade .agente::after {
  background: var(--quad-aceso);
  clip-path: polygon(0 0, 100% 0, 100% 64%, 64% 100%, 0 100%);
}

.conta__leitura { display: grid; }
.conta__rotulo {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted);
  line-height: 18px; margin-bottom: var(--space-4);
}
.conta__frase {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(26px, 3.2vw, 34px); line-height: 1; color: var(--text-primary);
}
.conta__seis { display: flex; align-items: flex-end; gap: var(--space-4); }
.conta__seis b {
  font-family: var(--font-display); font-weight: 900; color: var(--destaque);
  font-size: clamp(120px, 17vw, 176px); line-height: .8;
}
.conta__seis span {
  font-size: clamp(19px, 2.2vw, 22px); line-height: 1.25; font-weight: 600;
  color: var(--text-primary); max-width: 13ch; padding-bottom: 2px;
}

/* Degraus: até onde elas chegam, na mesma régua de 100. */
.degraus {
  list-style: none; padding: 0; display: grid; gap: var(--space-5);
  max-width: 740px; margin: var(--space-14) auto 0;
}
.degraus li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-4); align-items: center; }
.degraus b {
  grid-row: span 2; width: 1.7em; text-align: right; line-height: 1; color: var(--text-primary);
  font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4vw, 40px);
}
.degraus span { font-size: 15px; line-height: 20px; color: var(--text-secondary); margin-bottom: var(--space-2); }
.degraus__barra { height: 10px; border-radius: 2px; background: var(--surface-inset); overflow: hidden; }
.degraus__barra i {
  display: block; height: 100%; background: var(--barra-apagada);
  transform-origin: left; transform: scaleX(var(--v));
}
.degraus--agente b { color: var(--destaque); }
.degraus--agente .degraus__barra i { background: var(--barra-acesa); }

.conta__fonte { max-width: 740px; margin: var(--space-4) auto 0; font-size: 13px; color: var(--text-muted); text-align: right; }

@media (max-width: 720px) {
  .conta { grid-template-columns: minmax(0, 340px); gap: var(--space-8); }
  .conta__leitura { text-align: center; }
  .conta__seis { justify-content: center; }
  .conta__fonte { text-align: center; }
}

/* ---------- Entrada (só com .dados--armado, posto pelo dados.js) ---------- */
.dados--armado .conta__grade i,
.dados--armado .conta__grade .agente::after { opacity: 0; transform: scale(.35); }
.dados--armado .conta__grade .agente::before { opacity: 1; }
.dados--armado .conta__seis { opacity: 0; transform: translateY(18px); }
.dados--armado .degraus__barra i { transform: scaleX(0); }

/* 1. Os 100 chegam cinza, numa onda na diagonal. */
.dados--armado .vista .conta__grade i {
  opacity: 1; transform: none;
  transition: opacity 320ms ease-out, transform 420ms cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--d, 0) * 30ms);
}
/* 2. Seis deles acendem em lima, um de cada vez, e o 6 aparece junto. */
.dados--armado .vista .conta__grade .agente::before {
  opacity: 0; transition: opacity 200ms; transition-delay: calc(960ms + var(--k, 0) * 110ms);
}
.dados--armado .vista .conta__grade .agente::after {
  opacity: 1; transform: none;
  transition: opacity 200ms, transform 520ms cubic-bezier(.34, 1.56, .64, 1);
  transition-delay: calc(820ms + var(--k, 0) * 110ms);
}
.dados--armado .vista .conta__seis {
  opacity: 1; transform: none;
  transition: opacity 400ms ease-out, transform 520ms cubic-bezier(.2, .8, .2, 1);
  transition-delay: 820ms;
}
/* 3. Os degraus enchem até o valor de cada um. */
.dados--armado .vista .degraus__barra i {
  transform: scaleX(var(--v));
  transition: transform 800ms cubic-bezier(.2, .8, .2, 1);
}
.dados--armado .vista li:nth-child(2) .degraus__barra i { transition-delay: 160ms; }
.dados--armado .vista li:nth-child(3) .degraus__barra i { transition-delay: 320ms; }