.page-enter {
	opacity: 0;
	transform: translateY(4px);
	animation: fadeSlideIn 260ms ease forwards;
}

.page-exit {
	opacity: 1;
	transform: translateY(0);
	animation: fadeOut 180ms ease forwards;
}

html.viewport-transition body > header,
html.viewport-transition body > main > section,
html.viewport-transition body > footer {
	animation: viewportReflow 220ms ease-in-out both;
}

@keyframes fadeSlideIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeOut {
	to {
		opacity: 0;
		transform: translateY(2px);
	}
}

@keyframes viewportReflow {
	0%, 100% {
		opacity: 1;
	}

	35% {
		opacity: 0.72;
	}
}

@media (prefers-reduced-motion: reduce) {
	html.viewport-transition body > header,
	html.viewport-transition body > main > section,
	html.viewport-transition body > footer {
		animation: none;
	}
}