/* =============================================================================
   Cloudyn — A TRANSIÇÃO ENTRE PÁGINAS É UM SLIDE
   Trocar de página do site não pode parecer recarregar. Com a View Transition
   entre documentos, o navegador guarda a foto da página que sai e a da que
   entra e anima as duas ao mesmo tempo: a antiga desliza para a esquerda, a
   nova entra pela direita. Sem cortina no meio, sem branco, sem nada se
   remontando na frente de quem olha — as duas telas andam juntas, como passar
   um slide para o lado.

   Voltar inverte o sentido, como o slide anterior.

   Quem não tiver View Transition cai no painel de assets/js/page-transition.js.
   ============================================================================= */
@view-transition { navigation: auto; }

/* o padrão do navegador é um crossfade; aqui as duas fotos são MOVIDAS, e só.
   `both` segura o primeiro e o último quadro: sem isso a foto pisca no lugar
   de origem antes de começar a andar. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  animation-fill-mode: both;
  mix-blend-mode: normal;
}

::view-transition-old(root) { animation-name: cloudyn-slide-out-left; }
::view-transition-new(root) { animation-name: cloudyn-slide-in-right; }

/* voltar: o mesmo movimento, ao contrário */
:root:active-view-transition-type(back)::view-transition-old(root) { animation-name: cloudyn-slide-out-right; }
:root:active-view-transition-type(back)::view-transition-new(root) { animation-name: cloudyn-slide-in-left; }

/* Dentro da página, o destino acima entra pelo topo; o de baixo, pela base. */
:root.section-sliding {
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
}
:root.section-sliding::view-transition-group(root) { animation: none; }
:root.section-sliding::view-transition-old(root),
:root.section-sliding::view-transition-new(root) { animation-duration: 0.58s; }
:root.section-sliding::view-transition-old(root) { animation-name: cloudyn-slide-out-up; }
:root.section-sliding::view-transition-new(root) { animation-name: cloudyn-slide-in-up; }
:root.section-sliding.section-slide-back::view-transition-old(root) { animation-name: cloudyn-slide-out-down; }
:root.section-sliding.section-slide-back::view-transition-new(root) { animation-name: cloudyn-slide-in-down; }
/* O menu já está fechado quando a captura da página que sai é feita. */
.section-sliding .wheel:not(.is-open) { opacity: 0; visibility: hidden; transition: none; }
.home:focus, .stage:focus, .plans:focus, .fim:focus { outline: none; }

@keyframes cloudyn-slide-out-left   { from { transform: translateX(0);      } to { transform: translateX(-100%); } }
@keyframes cloudyn-slide-in-right  { from { transform: translateX(100%);   } to { transform: translateX(0);     } }
@keyframes cloudyn-slide-out-right    { from { transform: translateX(0);      } to { transform: translateX(100%);  } }
@keyframes cloudyn-slide-in-left { from { transform: translateX(-100%);  } to { transform: translateX(0);     } }
@keyframes cloudyn-slide-out-up { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes cloudyn-slide-in-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes cloudyn-slide-out-down { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes cloudyn-slide-in-down { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* quem pediu menos movimento troca de página sem viagem nenhuma */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  :root.section-sliding::view-transition-old(root),
  :root.section-sliding::view-transition-new(root) { animation-duration: 0.01s; }
}