/* ---------------------- cubo 3D entre páginas ----------------------------
   View Transitions entre documentos (Chrome, Edge, Safari 18.2+). A página
   atual é uma face do cubo; ao navegar, o cubo gira e mostra a próxima.
   Navegadores sem suporte seguem com a navegação normal do site.
   A direção do giro vem do js/transition.js (tipos "back" e "next"). */
@view-transition { navigation: auto; }
:root:active-view-transition { background: #EBE9E5; }
::view-transition-group(root) { animation-duration: 1.15s; }
::view-transition-image-pair(root) {
  perspective: 1700px;
  animation: hl-cube-zoom 1.15s cubic-bezier(.65, 0, .35, 1) both;
}
::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
  /* o CSS do Next deixa a página nova em opacity:0 (fade): aqui ela gira inteira */
  opacity: 1;
  backface-visibility: hidden;
  animation-duration: 1.15s;
  animation-timing-function: cubic-bezier(.65, 0, .35, 1);
  animation-fill-mode: both;
}
/* O lado do giro vem do js/transition.js (tipos left, right, up e down):
   o nome diz para onde a página atual sai e de onde a nova entra. */
/* left (padrão): a página nova vem da direita */
::view-transition-old(root) { transform-origin: 100% 50%; animation-name: hl-cube-old-left; }
::view-transition-new(root) { transform-origin: 0% 50%; animation-name: hl-cube-new-right; }
/* right: a página nova vem da esquerda */
html:active-view-transition-type(right)::view-transition-old(root) { transform-origin: 0% 50%; animation-name: hl-cube-old-right; }
html:active-view-transition-type(right)::view-transition-new(root) { transform-origin: 100% 50%; animation-name: hl-cube-new-left; }
/* up: a página nova vem de baixo */
html:active-view-transition-type(up)::view-transition-old(root) { transform-origin: 50% 100%; animation-name: hl-cube-old-up; }
html:active-view-transition-type(up)::view-transition-new(root) { transform-origin: 50% 0%; animation-name: hl-cube-new-up; }
/* down: a página nova vem de cima */
html:active-view-transition-type(down)::view-transition-old(root) { transform-origin: 50% 0%; animation-name: hl-cube-old-down; }
html:active-view-transition-type(down)::view-transition-new(root) { transform-origin: 50% 100%; animation-name: hl-cube-new-down; }

@keyframes hl-cube-zoom { 50% { transform: scale(.8); } }
@keyframes hl-cube-old-left  { to   { transform: translateX(-100%) rotateY(-90deg); filter: brightness(.55); } }
@keyframes hl-cube-new-right { from { transform: translateX(100%) rotateY(90deg); filter: brightness(.55); } }
@keyframes hl-cube-old-right { to   { transform: translateX(100%) rotateY(90deg); filter: brightness(.55); } }
@keyframes hl-cube-new-left  { from { transform: translateX(-100%) rotateY(-90deg); filter: brightness(.55); } }
@keyframes hl-cube-old-up    { to   { transform: translateY(-100%) rotateX(90deg); filter: brightness(.55); } }
@keyframes hl-cube-new-up    { from { transform: translateY(100%) rotateX(-90deg); filter: brightness(.55); } }
@keyframes hl-cube-old-down  { to   { transform: translateY(100%) rotateX(-90deg); filter: brightness(.55); } }
@keyframes hl-cube-new-down  { from { transform: translateY(-100%) rotateX(90deg); filter: brightness(.55); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}