/* KRITOR page transition.
   This uses the native same-document View Transition API.
   The navigation controller fetches the next page and swaps its DOM
   inside document.startViewTransition(). */

@keyframes kritor-out-left {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@keyframes kritor-in-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes kritor-out-right {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@keyframes kritor-in-left {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

html[data-kritor-transition="forward"]::view-transition-old(root) {
  animation: 700ms cubic-bezier(.16, 1, .3, 1) both kritor-out-left;
}

html[data-kritor-transition="forward"]::view-transition-new(root) {
  animation: 700ms cubic-bezier(.16, 1, .3, 1) both kritor-in-right;
}

html[data-kritor-transition="backward"]::view-transition-old(root) {
  animation: 700ms cubic-bezier(.16, 1, .3, 1) both kritor-out-right;
}

html[data-kritor-transition="backward"]::view-transition-new(root) {
  animation: 700ms cubic-bezier(.16, 1, .3, 1) both kritor-in-left;
}

::view-transition-group(root) {
  animation-duration: 700ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}