footer,
nav ul {
	/* Animations for the navigation bar. */
	transition: color 1s, background-color 1s, border-color 0.5s;
	transition-timing-function: ease-in-out;
}

nav ul li {
	/* For navigation items. */
	transition: inherit;
	transition-timing-function: inherit;
}

@view-transition {
	navigation: auto;
}

@keyframes move-out {
	from {
		transform: translateX(0%);
		opacity: 1;
	}

	to {
		transform: translateX(-100%);
		opacity: 0;
	}
}

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

	to {
		transform: translateX(0%);
		opacity: 1;
	}
}

/* Apply the custom animation to the old and new page states. */
::view-transition-old(root) {
	animation: 0.3s ease-in-out both move-out;
}

::view-transition-new(root) {
	animation: 0.3s ease-in-out both move-in;
}

/* Disable it for the top navigation bar. */
header nav,
footer {
	view-transition-name: match-element;
}

::view-transition-group(match-element),
::view-transition-old(match-element),
::view-transition-new(match-element) {
	animation: none;
}

@media screen and (max-width: 1024px) {

	::view-transition-old(root) {
		animation: 0.4s ease-in-out both move-out;
	}

	::view-transition-new(root) {
		animation: 0.4s ease-in-out both move-in;
	}
}