/* Enable cross-document view transitions */
@view-transition {
  navigation: auto;
}

/* Default transition for all elements */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--transition-duration);
  animation-timing-function: ease-in-out;
}

/* Slide transition for page image - only when transitioning between comic pages */
html.comic-transition::view-transition-old(page-image) {
  animation: slide-out-left var(--transition-duration) ease-in-out;
}

html.comic-transition::view-transition-new(page-image) {
  animation: slide-in-right var(--transition-duration) ease-in-out;
}

/* Reversed slide transition for backward navigation */
html.comic-transition.back-navigation::view-transition-old(page-image) {
  animation: slide-out-right var(--transition-duration) ease-in-out;
}

html.comic-transition.back-navigation::view-transition-new(page-image) {
  animation: slide-in-left var(--transition-duration) ease-in-out;
}

/* Keyframe animations */
@keyframes slide-out-left {
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

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

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

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

/* Transition mode that can be applied to UI chrome to keep them visible between pages */
::view-transition-old(no-transition),
::view-transition-new(no-transition) {
  animation: none;
  mix-blend-mode: normal;
}