/* Troca de tela com a API de transições do navegador (js/lib/vt.js).
   O cabeçalho e a barra de abas ficam parados; só o conteúdo anima. */
.appbar { view-transition-name: barra; }
.tabbar { view-transition-name: abas; }
::view-transition-group(barra), ::view-transition-group(abas) { animation-duration: 0s; }
::view-transition-old(barra), ::view-transition-old(abas) { display: none; }
::view-transition-new(barra), ::view-transition-new(abas) { animation: none; }

::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .3s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); animation-fill-mode: both; mix-blend-mode: normal;
}
@keyframes vt-some { to { opacity: 0; } }
@keyframes vt-aparece { from { opacity: 0; } }
@keyframes vt-sobe { from { opacity: 0; transform: translateY(12px); } }
@keyframes vt-sai-esq { to { opacity: 0; transform: translateX(-16%); } }
@keyframes vt-sai-dir { to { opacity: 0; transform: translateX(16%); } }
@keyframes vt-entra-dir { from { opacity: 0; transform: translateX(16%); } }
@keyframes vt-entra-esq { from { opacity: 0; transform: translateX(-16%); } }

/* Abrir um tema: o cartão vira o topo do tema e o resto aparece subindo. */
html[data-vt="abrir"]::view-transition-old(root) { animation-name: vt-some; animation-duration: .18s; }
html[data-vt="abrir"]::view-transition-new(root) { animation-name: vt-sobe; }
/* Voltar pela setinha: o topo do tema vira o cartão de novo. */
html[data-vt="voltar"]::view-transition-old(root) { animation-name: vt-some; animation-duration: .18s; }
html[data-vt="voltar"]::view-transition-new(root) { animation-name: vt-aparece; }
/* Trocar de aba: a tela desliza para o lado da aba escolhida. */
html[data-vt="aba-dir"]::view-transition-old(root) { animation-name: vt-sai-esq; }
html[data-vt="aba-dir"]::view-transition-new(root) { animation-name: vt-entra-dir; }
html[data-vt="aba-esq"]::view-transition-old(root) { animation-name: vt-sai-dir; }
html[data-vt="aba-esq"]::view-transition-new(root) { animation-name: vt-entra-esq; }
html[data-vt="simples"]::view-transition-old(root) { animation-name: vt-some; animation-duration: .15s; }
html[data-vt="simples"]::view-transition-new(root) { animation-name: vt-aparece; animation-duration: .2s; }

/* O elemento que viaja entre as telas (cartão <-> topo do tema). */
::view-transition-group(compartilhado) { animation-duration: .4s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(compartilhado), ::view-transition-new(compartilhado) { mix-blend-mode: normal; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}