@view-transition {
  navigation: auto;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.navigation__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
}

.navigation__link {
  color: brown;
  text-decoration: none;
}

.navigation__link.inactive {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

main {
  view-transition-name: main;
}
::view-transition-old(main) {
  animation: slide-out 0.5s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}
::view-transition-new(main) {
  animation: slide-in 0.5s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}
@keyframes slide-out {
  0% {
    transform: translateX(0%);
  }
  100% {
    opacity: 0;
    transform: translateX(calc(50% * var(--direction, 1)));
  }
}
@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateX(calc(-50% * var(--direction, 1)));
  }
  100% {
    transform: translateX(0%);
  }
}