@view-transition {
  navigation: auto;
}

/* ::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 2s;
  animation-timing-function: ease-in-out ;
} */

 
 
/* FADE
SUAVIZA A ENTRADA E A SAÍDA COM OPACIDADE. */
/* ::view-transition-old(root) {
  animation: fadeOut 0.8s ease forwards;
}
::view-transition-new(root) {
  animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
 */

 
/* SLIDE
MOVE O CONTEÚDO HORIZONTAL OU VERTICALMENTE. */
 
/*  ::view-transition-old(root) {
  animation: slideOutLeft 4s linear forwards;
}
::view-transition-new(root) {
  animation: slideInRight 4s linear forwards;
}

@keyframes slideOutLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
} */

 
 
/*  ESCALA
AMPLIA OU REDUZ O CONTEÚDO. */

/*  ::view-transition-old(root) {
  animation: scaleDown 0.6s ease forwards;
}
::view-transition-new(root) {
  animation: scaleUp 0.6s ease forwards;
}

@keyframes scaleDown {
  from { transform: scale(1); opacity: 1; }
  to   { transform: scale(0.8); opacity: 0; }
}
@keyframes scaleUp {
  from { transform: scale(1.2); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
} */

 
 
/* ROTAÇÃO
GIRA O CONTEÚDO DURANTE A TRANSIÇÃO. */

/* Página antiga saindo */
::view-transition-old(root) {
  animation: rotateOut 0.7s linear forwards;
}
/* Página nova entrando */
::view-transition-new(root) {
  animation: rotateIn 0.7s linear forwards;
}

@keyframes rotateOut {
  from { transform: rotate(0deg); opacity: 1; }
  to   { transform: rotate(90deg); opacity: 0; } /* Roda para a direita e some */
}

@keyframes rotateIn {
  from { transform: rotate(-90deg); opacity: 0; } /* Começa inclinado na esquerda e invisível */
  to   { transform: rotate(0deg); opacity: 1; }  /* Alinha no centro e fica visível */
}