/*
 * Troca de página (trilha T3): View Transitions entre documentos.
 *
 * O que acontece ao clicar num link interno:
 *  - o cabeçalho fica parado (é um grupo próprio; se for idêntico nas duas páginas, nada nele se mexe);
 *  - o conteúdo cruza só por opacidade: a página antiga sai em --ds-dur-media e a nova entra em --ds-dur-painel, as duas
 *    em --ds-curva. A saída mais curta tira o título antigo de baixo do novo dois quadros antes (medido em vídeo); o
 *    fundo não afunda abaixo do valor final, porque é o mesmo escuro nas duas páginas. O preço: o que é igual e está no
 *    mesmo lugar nas duas páginas, dentro do conteúdo, perde uns 20% de brilho por uns 100 ms. Para cruzar simétrico,
 *    basta tirar "::view-transition-old(root)" da regra de --ds-dur-media, lá embaixo;
 *  - entre as abas de Soluções (Mineradoras, Investidores, Due diligence), com o texto ao lado da cena, o seletor fica
 *    no lugar e só troca a cor das palavras (grupo próprio, tempos iguais: ele não perde brilho no meio), e o fio sob a
 *    aba atual desliza da aba antiga para a nova. O fio é o ::after do link atual (paginas.css); o Chrome aceita nome
 *    de troca em pseudo-elemento, então não é preciso marcação nova. Onde não aceita, o fio cruza junto com o resto.
 *
 * Os nomes só valem DURANTE a troca (:active-view-transition, que vale nas duas pontas: medido no Chrome 154, a página
 * antiga já casa o seletor no momento da captura). Fora da troca o cabeçalho não ganha nome nenhum: um nome de troca
 * faz do elemento uma raiz de fundo, e o vidro do menu do celular (backdrop-filter, dentro do cabeçalho) deixaria de
 * desfocar a página atrás dele.
 *
 * Tempos e curvas: só os da casa (tokens.css). O que desliza vai em --ds-curva-painel. Movimento só com transform e
 * opacity: o navegador anima a largura do grupo do fio por padrão; transicoes.js troca isso por translate e scaleX
 * (transform-origin no canto, aqui embaixo).
 *
 * Movimento reduzido: não há troca animada nenhuma (a regra @view-transition só vale sem a preferência); a navegação
 * é a comum. Firefox ignora a regra e os seletores que não conhece: navegação comum, sem erro.
 */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* o cabeçalho, parado na troca */
html:active-view-transition header.topo { view-transition-name: topo; }

/* o seletor de Soluções e o fio da aba atual. transicoes.js põe data-troca-comum no seletor quando a troca não é de uma
   aba para outra, ou quando a página antiga está rolada: aí os dois cruzam junto com o conteúdo, sem atravessar a tela.
   Só com a janela deitada e acima de 760 px (o texto ao lado da cena): com a cena em cima (até 760 px; em pé, até 1100 px
   em paginas.css e até 1300 px em Investidores), o seletor de Investidores fica em outra altura (medido: 104 a 230 px nas
   outras duas e 482 a 896 px nela) e desceria pela tela. Medido igual nas três, deitada: 800x700, 1100x800, 1280x720,
   1366x1024 e 1440x900 */
@media (min-width: 761px) and (orientation: landscape) {
  html:active-view-transition .perfis:not([data-troca-comum]) { view-transition-name: perfis; }
  html:active-view-transition .perfis:not([data-troca-comum]) a[aria-current='page']::after { view-transition-name: perfis-fio; }
}

/* tempos da casa em toda a troca */
::view-transition-group(*),
::view-transition-image-pair(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: var(--ds-dur-painel);
  animation-timing-function: var(--ds-curva);
}

/* a página antiga, e o que sai sem par na página nova (o cabeçalho indo para Entrar, por exemplo), saem em --ds-dur-media */
::view-transition-old(root),
::view-transition-old(*):only-child {
  animation-duration: var(--ds-dur-media);
}

/* o fio desliza: curva do que desliza; a origem no canto esquerdo deixa o scaleX de transicoes.js crescer da ponta */
::view-transition-group(perfis-fio) {
  animation-timing-function: var(--ds-curva-painel);
  transform-origin: 0 0;
}