/* ==========================================================================
   BAIC em números (continuação de "Conheça a BAIC")
   - Só no desktop: no celular (até 768px) a seção não aparece, e a estrada da
     linha do tempo termina nela mesma.
   - Sem JS/GSAP ou com movimento reduzido: seção clara e estática, com a
     introdução, os números em grade (valores finais do HTML) e o fechamento.
   - Com o js/stats.js (.is-animated + .is-dark): a seção vira uma tela fixa
     com o mesmo grafite escuro da linha do tempo. A estrada que desce da seção
     anterior faz a curva e segue na horizontal a --road-y do topo. A faixa
     (.stats__track) desliza para a esquerda, e cada número pende da estrada
     num conector tracejado. Todos os números têm o mesmo vão (--gap-x) depois
     deles; o fechamento ocupa a última tela inteira, centralizado.
   - Largura da estrada, do carro e do ponto são as mesmas da .history: a
     estrada continua sem emenda. O traçado é gerado pelo JS, que usa o x exato
     da estrada da linha do tempo; --axis aqui só posiciona a introdução e o
     primeiro número.
   ========================================================================== */
.stats {
  --road-w: 10px;
  --car-w: 34px;
  --dot: 18px;
  --bend: 64px;                         /* raio da curva (o JS lê em px) */
  --axis: 50cqw;                        /* x da estrada vertical (no meio, como na linha do tempo) */
  --road-y: clamp(96px, 21svh, 210px);  /* altura da estrada horizontal */
  --drop: clamp(48px, 10svh, 112px);    /* da estrada até o topo do número */
  --num: clamp(44px, 4.4vw, 68px);      /* tamanho dos números (maior no modo animado) */
  --gap-x: clamp(200px, 22.5vw, 360px); /* vão entre o fim de um número e o ponto do seguinte */
  --lead-in: clamp(40px, 6vw, 110px);   /* da curva até o primeiro número */

  /* cores (a versão escura, igual à .history.is-dark, fica em .stats.is-dark) */
  --s-bg: var(--bg-light);
  --s-ink: var(--color-black);
  --s-text: var(--color-graphite);
  --s-road: var(--color-gray);
  --s-trail: var(--color-graphite);
  --s-lane: rgba(255, 255, 255, 0.85);
  --s-dot-ring: var(--color-graphite);
  --s-dot-fill: var(--bg-light);
  --s-dot-halo: rgba(59, 63, 68, 0.12);
  --s-connector: rgba(59, 63, 68, 0.5);

  container-type: inline-size; /* 50cqw = metade da largura da seção (sem a barra de rolagem) */
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 11vw, 168px) var(--gutter);
  background-color: var(--s-bg);
  color: var(--s-ink);
}

.stats.is-dark {
  --s-bg: var(--bg-dark);
  --s-ink: var(--color-white);
  --s-text: var(--color-gray);
  --s-road: #43474C;
  --s-trail: var(--color-gray);
  --s-lane: var(--bg-dark);
  --s-dot-ring: var(--color-gray);
  --s-dot-fill: var(--bg-dark);
  --s-dot-halo: rgba(217, 217, 217, 0.16);
  --s-connector: rgba(217, 217, 217, 0.5);
}

/* texto só para leitores de tela */
.stats__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Textos
   -------------------------------------------------------------------------- */
.stats__intro {
  max-width: 620px;
  margin: 0 auto clamp(56px, 7vw, 96px);
  text-align: center;
}

.stats__eyebrow {
  margin: 0;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--s-text);
}

/* traço vermelho, como nas peças da marca */
.stats__eyebrow::before,
.stats__label::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 3px;
  margin-right: 12px;
  vertical-align: middle;
  background-color: var(--color-red);
}

.stats__title {
  margin: 18px 0 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  white-space: nowrap; /* "BAIC em números" (≈11em) numa linha: no máximo 530px, ~10px além da coluna em telas grandes */
}

.stats__text {
  margin: 0;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--s-text);
}

.stats__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 56px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stats__figure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
}

.stats__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--num);
  line-height: 0.92;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.stats__plus {
  margin-right: 0.04em;
  color: var(--color-red);
}

.stats__unit {
  margin-top: clamp(12px, 1.2vw, 18px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(15px, 1.35vw, 22px);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stats__label {
  margin: 14px 0 0;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.4;
  color: var(--s-text);
}

.stats__label::before {
  width: 20px;
}

.stats__closing {
  margin-top: clamp(72px, 9vw, 128px);
  text-align: center;
}

.stats__slogan {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.005em;
}

.stats__slogan-line {
  display: block;
}

/* sublinhado vermelho do "Uma só confiança." */
.stats__slogan-line:last-child::after {
  content: "";
  display: block;
  width: 2.2em;
  height: 0.08em;
  margin-top: 0.3em;
  background-color: var(--color-red);
}

.stats__closing .stats__slogan-line:last-child::after {
  margin-left: auto;
  margin-right: auto;
}

/* estrada, carro, pontos e a seta de rolar só existem no modo animado */
.stats__road,
.stats__car,
.stats__marker,
.stats__scroll {
  display: none;
}

/* --------------------------------------------------------------------------
   Modo animado: tela fixa, faixa horizontal e estrada no topo
   -------------------------------------------------------------------------- */
.stats.is-animated {
  --num: clamp(64px, 7.6vw, 136px);

  height: 100vh;
  height: 100svh;
  padding: 0;
}

.stats.is-animated .stats__track {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: max-content;
  height: 100%;
  padding-left: calc(var(--axis) + var(--bend) + var(--lead-in));
  will-change: transform;
}

.stats.is-animated .stats__road {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  pointer-events: none;
}

.stats__asphalt,
.stats__trail,
.stats__lane,
.stats__reach {
  fill: none;
}

.stats__asphalt {
  stroke: var(--s-road);
  stroke-width: var(--road-w);
}

.stats__trail {
  stroke: var(--s-trail);
  stroke-width: var(--road-w);
}

/* faixa tracejada: mesmo desenho da linha do tempo (12px de traço, 14px de espaço) */
.stats__lane {
  stroke: var(--s-lane);
  stroke-width: 2px;
  stroke-dasharray: 12 14;
}

/* máscara do rastro: o JS desenha este traço até o meio do carro */
.stats__reach {
  stroke: #fff;
  stroke-width: calc(var(--road-w) + 2px);
}

.stats.is-animated .stats__car {
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: var(--car-w);
  /* a sombra fica no invólucro (sem rotação), então continua "para baixo" depois da curva */
  filter: drop-shadow(0 8px 10px rgba(29, 29, 27, 0.25));
  will-change: transform;
  pointer-events: none;
}

.stats__car img {
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* introdução: centralizada na altura da tela e, na largura, entre a borda
   esquerda e a reta da estrada (centro em --axis / 2) */
.stats.is-animated .stats__intro {
  position: absolute;
  top: 50%;
  left: calc(var(--axis) / 2);
  width: calc(var(--axis) - clamp(48px, 6vw, 112px) * 2);
  max-width: 520px;
  margin: 0;
  text-align: left;
  transform: translate(-50%, -50%);
}

.stats.is-animated .stats__list {
  display: flex;
  gap: 0;
}

/* cada número ocupa a largura do próprio valor final e tem o mesmo vão depois dele */
.stats.is-animated .stats__item,
.stats.is-animated .stats__closing {
  position: relative;
  flex: none;
  margin: 0;
  padding-top: calc(var(--road-y) + var(--drop));
  text-align: left;
}

.stats.is-animated .stats__item {
  margin-right: var(--gap-x);
}

/* reserva a largura do valor final (data-final, posto pelo JS): a contagem não empurra os vizinhos */
.stats.is-animated .stats__number {
  display: inline-grid;
}

.stats.is-animated .stats__number::before {
  content: attr(data-final);
  grid-row: 2; /* a linha 1 fica com o número que conta, que dá a linha de base */
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

/* o fechamento ocupa a última tela inteira: no fim da faixa só ele aparece, centralizado */
.stats.is-animated .stats__finale {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  align-self: stretch; /* altura toda da tela: a seta usa o espaço entre o slogan e a borda de baixo */
  width: 100cqw;
}

.stats.is-animated .stats__slogan {
  white-space: nowrap;
}

.stats.is-animated .stats__closing .stats__slogan-line:last-child::after {
  margin-left: 0;
}

/* seta vermelha centralizada na última tela, no meio do caminho entre o fim do
   slogan e a borda de baixo (margin: auto divide o espaço que sobra por igual).
   O JS a revela junto com o slogan; o balanço fica no <svg>, para não brigar
   com o transform da revelação. */
.stats.is-animated .stats__scroll {
  display: block;
  width: 52px;
  margin: auto 0;
  padding: 8px 0; /* folga para o balanço não ser cortado pela máscara da revelação */
  color: var(--color-red);
}

.stats__scroll svg {
  animation: stats-scroll-bounce 1.6s ease-in-out infinite;
}

@keyframes stats-scroll-bounce {
  0%,
  100% {
    transform: translateY(-6px);
  }

  50% {
    transform: translateY(6px);
  }
}

/* ponto na estrada + conector tracejado descendo até o número */
.stats.is-animated .stats__marker {
  display: block;
  position: absolute;
  z-index: 1;
  top: var(--road-y); /* o topo do marcador é a linha central da estrada (o JS mede aqui) */
  left: 0;
  width: 0;
  height: 0;
}

.stats__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--dot);
  height: var(--dot);
  margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2);
  border: 4px solid var(--s-dot-ring);
  border-radius: 50%;
  background-color: var(--s-dot-fill);
  box-shadow: 0 0 0 8px var(--s-dot-halo);
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* o carro já passou por aqui */
.stats__stop.is-reached .stats__dot,
.stats__closing .stats__dot {
  border-color: var(--color-red);
  box-shadow: 0 0 0 8px rgba(200, 16, 46, 0.18);
}

.stats__connector {
  position: absolute;
  top: calc(var(--dot) / 2 + 8px);
  left: -0.75px;
  height: calc(var(--drop) - var(--dot) / 2 - 24px);
  border-left: 1.5px dashed var(--s-connector);
  transform-origin: center top; /* nasce no ponto e cresce para baixo */
}

/* --------------------------------------------------------------------------
   Telas menores
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .stats__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* celular: a seção não existe (o js/stats.js também só liga acima de 768px) */
@media (max-width: 768px) {
  .stats {
    display: none;
  }
}