@view-transition {
  navigation: auto;
}

main {
  view-transition-name: em-main-content;
}

::view-transition-old(em-main-content) {
  animation: 500ms ease-out both slide-out-left;
}

::view-transition-new(em-main-content) {
  animation: 500ms ease-out both slide-in-right;
}

html:active-view-transition-type(forward) {
  &::view-transition-old(em-main-content) {
    animation: 500ms ease-out both slide-out-left;
  }
  &::view-transition-new(em-main-content) {
    animation: 500ms ease-out both slide-in-right;
  }
}

html:active-view-transition-type(backward) {
  &::view-transition-old(em-main-content) {
    animation: 500ms ease-out both slide-out-right;
  }
  &::view-transition-new(em-main-content) {
    animation: 500ms ease-out both slide-in-left;
  }
}

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

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

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

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

@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}