// .page-into {
//   opacity: 0;
//   transform: translateX(-100%) scale(0.6);
//   animation: pageInto 0.8s ease-out 1 both;
// }

// .page-out {
//   opacity: 1;
//   transform: translateX(0) scale(1);
//   animation: pageOut 0.8s ease-in 1 both;
// }

// @keyframes pageInto {
//   60% {
//     opacity: 1;
//     transform: translateX(0) scale(0.6);
//   }
//   100% {
//     opacity: 1;
//     transform: translateX(0) scale(1);
//   }
// }

// @keyframes pageOut {
//   40% {
//     opacity: 1;
//     transform: translateX(0) scale(0.6);
//   }
//   100% {
//     opacity: 0;
//     transform: translateX(-100%) scale(0.6);
//   }
// }

// -----------------------------------------------------------

// .page-into {
//   opacity: 0;
//   transform: translateY(-100px);
//   animation: pageInto 0.2s ease-out 1 both;
// }

// .page-out {
//   opacity: 1;
//   transform: translateY(0);
//   animation: pageOut 0.2s ease-in 1 both;
// }

// @keyframes pageInto {
//   to {
//     opacity: 1;
//     transform: translateY(0);
//   }
// }

// @keyframes pageOut {
//   to {
//     opacity: 0;
//     transform: translateY(100px);
//   }
// }

// -----------------------------------------------------------

// .page-into {
//   opacity: 0;
//   transform: scale(0.9);
//   transform-origin: top center;
//   animation: pageInto 0.3s ease 1 both;
// }

// .page-out {
//   opacity: 1;
//   transform: scale(1);
//   transform-origin: top center;
//   animation: pageOut 0.3s ease 1 both;
// }

// @keyframes pageInto {
//   to {
//     opacity: 1;
//     transform: scale(1);
//   }
// }

// @keyframes pageOut {
//   to {
//     opacity: 0;
//     transform: scale(1.2);
//   }
// }

// -----------------------------------------------------------

.page-into {
  opacity: 0;
  transform: scale(1.5);
  transform-origin: top center;
  animation: pageInto 0.3s ease 1 both;
}

.page-out {
  opacity: 1;
  transform: scale(1);
  transform-origin: top center;
  animation: pageOut 0.3s ease 1 both;
}

@keyframes pageInto {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pageOut {
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}