.tri-palco { background: var(--ds-cor-fundo); }
  /* as camadas do palco: satélite, escuro, véu do texto, pontos e rótulos (o véu fica sob os pontos: não apaga o Brasil) */
  .tri-tela { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; transition: opacity 700ms var(--ds-curva); }
  .tri-palco[data-pronto] .tri-tela { opacity: 1; }
  .tri-rotulos { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
  /* no celular e no tablet em pé o desenho fica em cima e o texto embaixo: o véu sobe do pé da tela */
  @media (max-width: 760px), (max-width: 1300px) and (orientation: portrait) {
    .tri-palco .rol-veu { background: linear-gradient(0deg, color-mix(in srgb, var(--ds-cor-fundo) 94%, transparent) 0, color-mix(in srgb, var(--ds-cor-fundo) 88%, transparent) 40%, transparent 60%),
      linear-gradient(180deg, color-mix(in srgb, var(--ds-cor-fundo) 70%, transparent) 0, transparent 140px); }
  }
  /* o ato da grade: a formação dos montes e o canto do capital no mesmo ato. O texto fica no alto do bloco (o progresso
     do ato se mede pelo alto do bloco): o título entra pela base da tela quando os pontos começam a sair do Brasil, está
     a 60% quando os montes terminam e o perfil de risco chega enquanto o canto acende; o palco sai junto com o texto */
  @media (min-width: 761px) and (orientation: landscape), (min-width: 1301px) {
    .tri-palco ~ .rol-textos .tri-ato { justify-content: flex-start; padding-top: 12vh; padding-top: 12svh; min-height: 98vh; min-height: 98svh; } }
  /* empilhado (celular e tablet em pé): o mesmo começo; o texto sobe pela metade de baixo e esmaece antes do desenho */
  @media (max-width: 760px), (max-width: 1300px) and (orientation: portrait) {
    .tri-palco ~ .rol-textos .rol-ato.tri-ato { padding-top: 12svh !important; min-height: 95svh; } }
  .tri-ato .tri-frase { margin-top: 12px; }
  /* no celular a atribuição vai em duas linhas no canto, à direita dos botões da abertura (nunca por baixo deles) */
  /* (no celular a atribuição e o logotipo do Mapbox ficam no alto do palco: mapa-mapbox.css) */
  .tri-eixos, .tri-aneis, .tri-contas { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
  .tri-anel { position: absolute; left: 0; top: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-cor-texto) 16%, transparent); }
  .tri-rotulo.conta { transition: transform 700ms var(--ds-curva), opacity 200ms var(--ds-curva), color 200ms var(--ds-curva); }
  .tri-rotulo { position: absolute; left: 0; top: 0; margin: 0; white-space: nowrap; color: var(--ds-cor-texto-2); font-size: 12px; line-height: 16px; transition: opacity 200ms var(--ds-curva), color 200ms var(--ds-curva);
    text-shadow: 1px 0 0 var(--ds-cor-fundo), -1px 0 0 var(--ds-cor-fundo), 0 1px 0 var(--ds-cor-fundo), 0 -1px 0 var(--ds-cor-fundo), 0 0 4px var(--ds-cor-fundo); }
  .tri-rotulo.eixo { color: var(--ds-cor-texto); font-size: 13px; line-height: 18px; font-weight: 500; }
  .tri-rotulo.conta { font-variant-numeric: tabular-nums; }
  .tri-rotulo { white-space: pre; }
  .tri-rotulos[data-foco] .tri-rotulo.alvo { color: var(--ds-cor-texto); font-weight: 600; }
  /* o perfil de risco: três palavras, a escolhida com o fio fino (o mesmo desenho dos perfis do alto) */
  .tri-perfil { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 24px; }
  .tri-perfil .pg-rotulo { flex-basis: 100%; margin: 0 0 4px; }
  .tri-perfil button { position: relative; padding: 8px 4px; margin: -8px -4px; border: 0; border-radius: var(--ds-raio-pequeno); background: transparent; color: var(--ds-cor-texto-2); cursor: pointer;
    font: 500 15px/20px var(--lp-fonte-texto); transition: color var(--ds-dur-rapida) var(--ds-curva), background-color var(--ds-dur-rapida) var(--ds-curva); }
  .tri-perfil button:hover { color: var(--ds-cor-texto); }
  .tri-perfil button:active { background-color: var(--ds-cor-realce); transition-duration: 0ms; }
  .tri-perfil button:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 2px; }
  .tri-perfil button[aria-pressed='true'] { color: var(--ds-cor-texto); }
  .tri-perfil button[aria-pressed='true']::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 2px; height: 1px; background: var(--ds-cor-texto); }
  /* com o script, o fio é uma peça só que desliza até a opção escolhida (transform, a curva da casa; responde no
     pointer-down e pode ser interrompido no meio); movimento reduzido: vai direto, sem deslizar */
  .tri-perfil { position: relative; }
  .tri-perfil[data-fio] button[aria-pressed='true']::after { content: none; }
  .tri-fio { position: absolute; left: 0; top: 0; width: 1px; height: 1px; background: var(--ds-cor-texto); transform-origin: 0 0; pointer-events: none; }
  .tri-perfil[data-fio-anda] .tri-fio { transition: transform 280ms var(--ds-curva); }
  @media (prefers-reduced-motion: reduce) { .tri-perfil[data-fio-anda] .tri-fio { transition: none; } }
  @media (forced-colors: active) { .tri-fio { background: CanvasText; forced-color-adjust: none; } }
  /* a frase do perfil não troca seca: a velha esmaece rápido e a nova acende */
  .tri-frase > span { transition: opacity var(--ds-dur-media) var(--ds-curva); }
  .tri-frase[data-trocando] > span { opacity: 0; transition-duration: var(--ds-dur-rapida); }
  /* os vereditos: um grande no centro, como o sistema o escreve, e os cinco nomes numa linha para trocar */
  .ver-centro { max-width: 980px; margin: 0 auto; text-align: center; }
  .ver-centro .pg-lead { margin-left: auto; margin-right: auto; }
  .ver-palco { display: flex; flex-direction: column; justify-content: center; min-height: 236px; margin-top: 64px; }
  .ver-palco > p { margin: 0; transition: opacity 240ms var(--ds-curva); }
  .ver-palco[data-trocando] > p { opacity: 0; transition-duration: 160ms; }
  .ver-nome { font-family: var(--lp-fonte-titulo); font-weight: 300; font-size: clamp(44px, 5.6vw, 80px); line-height: 1.04; letter-spacing: -0.03em; font-optical-sizing: auto; }
  .ver-frase { margin-top: 18px !important; color: var(--ds-cor-texto-2); font-size: 19px; line-height: 28px; letter-spacing: -0.01em; text-wrap: balance; }
  .ver-escolha { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin-top: 40px; }
  .ver-escolha button { position: relative; padding: 8px 4px; margin: -8px -4px; border: 0; border-radius: var(--ds-raio-pequeno); background: transparent; color: var(--ds-cor-texto-2); cursor: pointer;
    font: 500 15px/20px var(--lp-fonte-texto); transition: color var(--ds-dur-rapida) var(--ds-curva), background-color var(--ds-dur-rapida) var(--ds-curva); }
  .ver-escolha button:hover { color: var(--ds-cor-texto); }
  .ver-escolha button:active { background-color: var(--ds-cor-realce); transition-duration: 0ms; }
  .ver-escolha button:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 2px; }
  .ver-escolha button[aria-pressed='true'] { color: var(--ds-cor-texto); }
  .ver-escolha button[aria-pressed='true']::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 2px; height: 1px; background: var(--ds-cor-texto); }
  .lentes { max-width: 60ch; margin: 120px auto 0; }
  .lentes .pg-lead { margin-left: auto; margin-right: auto; }
  @media (max-width: 760px) { .ver-palco { min-height: 210px; margin-top: 48px; } .ver-escolha button { padding: 13px 4px; margin: -13px -4px; } .lentes { margin-top: 88px; } }
  @media (prefers-reduced-motion: reduce) { .ver-palco > p { transition: none; } }
  @media (max-width: 760px) { .tri-perfil button { padding: 13px 4px; margin: -13px -4px; } }
  /* no celular e no tablet em pé o desenho fica na metade de cima e todo texto começa na metade de baixo; em tela
     deitada, desenho à direita do texto (como as outras cenas) */
  @media (max-width: 760px), (max-width: 1300px) and (orientation: portrait) { .tri-palco ~ .rol-textos .rol-abertura, .tri-palco ~ .rol-textos .rol-ato { width: auto; max-width: 640px; justify-content: flex-start; padding-top: 56vh; } }
  /* e o texto que sobe esmaece antes de chegar ao desenho (nunca passa por cima dos pontos). O Brasil termina a 58% da
     altura no celular (o miolo denso, a 54%) e a 50% no tablet em pé; cada peça some enquanto o alto dela vai de 60% a
     53% da tela (medido pela tela, não pela altura da peça: os botões, mais altos, não chegam inteiros ao Sul). Vale
     também com movimento reduzido: é só opacidade presa à rolagem, nada se move (sem ela o texto parava sobre a grade) */
  @supports (animation-timeline: view()) { @media (max-width: 760px), (max-width: 1300px) and (orientation: portrait) {
    .tri-palco ~ .rol-textos .rol-ato > *, .tri-palco ~ .rol-textos .rol-abertura > * { animation: tri-sai linear both; animation-timeline: view(); animation-range: cover 40svh cover 47svh; }
    /* os perfis da abertura repousam logo abaixo do desenho (a 56%): inteiros em repouso, somem de 56% a 50% ao subir */
    .tri-palco ~ .rol-textos .rol-abertura > :first-child { animation-range: cover 44svh cover 50svh; } } }
  @property --tri-op { syntax: '<number>'; inherits: false; initial-value: 1; }
  @keyframes tri-sai { to { opacity: 0; --tri-op: 0; } }
  /* com movimento reduzido, paginas.css prende cada peça .rv inteira (opacity 1 !important: o texto não espera a
     revelação) e a animação não passa por cima de !important; aqui a opacidade dessas peças segue a mesma rolagem pela
     variável animada (o foco do teclado continua trazendo a peça inteira: ele desliga a animação e a variável volta a 1) */
  @media (prefers-reduced-motion: reduce) and (max-width: 760px), (prefers-reduced-motion: reduce) and (max-width: 1300px) and (orientation: portrait) {
    [data-anima] .tri-palco ~ .rol-textos [data-rv] > .rv { opacity: var(--tri-op) !important; } }
  @media (prefers-reduced-motion: reduce) { .tri-palco > .tri-tela, .tri-palco > .tri-rotulos { transition: opacity 180ms linear; } .tri-palco[data-trocando] > .tri-tela, .tri-palco[data-trocando] > .tri-rotulos { opacity: 0; }
    /* a câmera do satélite não muda entre os atos: ele fica parado na troca (só os pontos esmaecem; o escuro desliza) */
    .tri-palco[data-trocando] > .rol-mapa[data-pronto] { opacity: 1; } }