/* 04 · atletas — 12.555 pontos de luz, um por atleta, correndo pela avenida vista de cima.
   Três estados (classe na seção, posta pelo JS):
     (nenhuma)  composição estática em HTML — sem WebGL, movimento reduzido ou sem JS
     .at--pin   cena fixada; os números em HTML entram por fase até o WebGL ficar pronto
     .at--gl    WebGL pronto: os pontos desenham os números; o HTML fica transparente por cima
   Tudo sob #atletas. */
#atletas .at-stage { background: var(--ink); height: auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }

/* chão de reserva: o asfalto molhado, bem escuro, com a faixa amarela */
#atletas .at-ground { position: absolute; inset: 0; z-index: 0; background: radial-gradient(90% 70% at 62% 58%, #1d1422 0%, #110a16 55%, var(--ink) 100%); }
#atletas .at-ground img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.32) contrast(1.12) saturate(.8); }
#atletas .at-ground::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, rgba(14, 7, 19, 0) 40%, rgba(14, 7, 19, .78) 100%); }

#atletas .at-gl { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; transition: opacity .7s var(--ease-out); }
#atletas .at-veil { z-index: 2; background: linear-gradient(180deg, rgba(14, 7, 19, .84) 0%, rgba(14, 7, 19, .5) 18%, rgba(14, 7, 19, 0) 36%), linear-gradient(100deg, rgba(14, 7, 19, .55) 0%, rgba(14, 7, 19, 0) 42%); }

/* cabeçalho: câmera, tarja, frase de apoio */
#atletas .at-wrap { position: relative; z-index: 3; height: auto; padding-top: calc(var(--hud-h) + 26px); }
#atletas .at-cam { margin-bottom: clamp(18px, 3vh, 30px); }
#atletas .at-head { display: grid; justify-items: start; gap: clamp(12px, 1.8vh, 18px); }
#atletas .at-note { font-size: calc((clamp(18px, .8vw + 10px, 24px)) * var(--ts, 1)); line-height: 1.35; color: var(--offwhite); max-width: 34ch; text-wrap: balance; }

/* o quadro dos números: fora da grade (sangra na largura, medido pela altura) */
#atletas .at-board {
  --hero: min(34svh, 26cqi);
  --gn: min(20svh, 12.5cqi);
  position: relative; z-index: 3; container-type: inline-size;
  padding: clamp(28px, 6vh, 64px) var(--gutter) clamp(40px, 8vh, 80px);
  display: grid; justify-items: center; align-content: center; gap: clamp(36px, 7vh, 72px);
  flex: 1;
}
#atletas .at-title { display: grid; justify-items: center; text-align: center; margin: 0; }
/* algarismos proporcionais: o canvas 2D (de onde saem os pontos) não tem tabular-nums; número fixo não precisa */
#atletas .at-big, #atletas .at-g__n { font-variant-numeric: proportional-nums; }
#atletas .at-big { display: block; font-size: calc((var(--hero)) * var(--ts, 1)); color: var(--offwhite); line-height: 1; letter-spacing: -.01em; text-shadow: 0 10px 60px rgba(14, 7, 19, .5); }
#atletas .at-sub { display: block; margin-top: .1em; font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: calc((max(26px, calc(var(--hero) * .19))) * var(--ts, 1)); line-height: 1.12; letter-spacing: .005em; color: var(--offwhite); }
#atletas .at-origin { display: grid; justify-items: center; gap: clamp(14px, 2.4vh, 24px); }
#atletas .at-origin__k { font-size: calc((clamp(16px, .6vw + 11px, 23px)) * var(--ts, 1)); letter-spacing: .12em; color: var(--honey); }
#atletas .at-groups { --at-ln: 1; display: flex; width: max-content; max-width: 100%; border-top-color: rgba(245, 238, 224, calc(.3 * var(--at-ln))); }
#atletas .at-groups > .stat { padding-top: clamp(14px, 2.2vh, 26px); padding-right: clamp(22px, 2.6vw, 48px); }
#atletas .at-groups > .stat + .stat { padding-left: clamp(22px, 2.6vw, 48px); border-left-color: rgba(245, 238, 224, calc(.18 * var(--at-ln))); }
#atletas .at-groups > .stat:last-child { padding-right: 0; }
#atletas .at-g__n { font-size: calc((var(--gn)) * var(--ts, 1)); line-height: 1; white-space: nowrap; color: var(--offwhite); }
#atletas .stat--honey .at-g__n { color: var(--honey); }
#atletas .at-g__l { font-size: calc((clamp(16px, .7vw + 10px, 24px)) * var(--ts, 1)); color: var(--offwhite); letter-spacing: .08em; }
#atletas .stat--honey .at-g__l { color: var(--honey); }

/* composição estática: o número-herói menor para caber tudo numa tela. Com o texto 10% maior as folgas
   encolhem e a frase dos pontos de luz sai (aqui não há pontos: é o asfalto parado) — 1280×720 e 1440×900
   continuam numa tela só, sem nada atrás do HUD nas paradas */
#atletas:not(.at--pin) .at-board { --hero: min(24svh, 22cqi); --gn: min(14svh, 11cqi);
  padding-block: clamp(12px, 2vh, 28px) clamp(20px, 3.5vh, 44px); gap: clamp(20px, 4vh, 48px); }
#atletas:not(.at--pin) .at-cam { margin-bottom: clamp(10px, 1.6vh, 18px); }
#atletas:not(.at--pin) .at-note { display: none; }
#atletas:not(.at--pin) .at-ground img { filter: brightness(.24) contrast(1.1) saturate(.75); }
#atletas:not(.at--pin) .at-g__n, #atletas:not(.at--pin) .at-g__l, #atletas:not(.at--pin) .at-sub { text-shadow: 0 0 2px rgba(14, 7, 19, .6), 0 2px 12px rgba(14, 7, 19, .6), 0 6px 34px rgba(14, 7, 19, .55); }
#atletas .odo > span { white-space: pre; } /* o odômetro põe cada caractere num span: o espaço de "26 + DF" não pode colapsar */

/* ---------- cena fixada ---------- */
#atletas.at--pin .at-stage { height: 100vh; height: 100svh; display: block; }
#atletas.at--pin .at-wrap { position: absolute; inset: 0 0 auto; margin-inline: auto; }
#atletas.at--pin .at-board { position: absolute; inset: calc(var(--hud-h) + clamp(120px, 20vh, 190px)) 0 0; padding-top: 0; place-items: center; gap: 0; }
#atletas.at--pin .at-title, #atletas.at--pin .at-origin { grid-area: 1 / 1; }
#atletas.at--pin .at-origin { align-self: center; }

/* WebGL pronto: os pontos são os números; o HTML continua lá (leitor de tela, seleção) */
#atletas.at--gl .at-gl { opacity: 1; }
#atletas.at--gl .at-ground { visibility: hidden; }
#atletas.at--gl .at-big, #atletas.at--gl .at-g__n { color: transparent; text-shadow: none; }
/* bloom de graça: a letra transparente fica exatamente sobre os pontos e a sombra dela brilha em registro */
#atletas.at--gl .at-big { text-shadow: 0 0 22px rgba(245, 238, 224, .22), 0 0 70px rgba(245, 238, 224, .12), 0 0 140px rgba(244, 178, 35, .1); }
#atletas.at--gl .at-g__n { text-shadow: 0 0 18px rgba(245, 238, 224, .18), 0 0 60px rgba(245, 238, 224, .08); }
#atletas.at--gl .stat--honey .at-g__n { text-shadow: 0 0 18px rgba(244, 178, 35, .3), 0 0 60px rgba(244, 178, 35, .16); }

@media (max-aspect-ratio: 1/1) {
  #atletas .at-board { --hero: min(26svh, 30cqi); --gn: min(15svh, 13.5cqi); }
  #atletas.at--pin .at-board { inset: calc(var(--hud-h) + clamp(140px, 16vh, 220px)) 0 0; }
}