:root {
	--view-transition-duration: 0.4s;
	--view-transition-half-duration: calc(var(--view-transition-duration) / 2);
	
	@media (prefers-reduced-motion: reduce) {
		--view-transition-duration: 0s;
	}
}

@view-transition {
	navigation: auto;
}

/** Navigation transitions */

header li.current a {
	&:before { view-transition-name: navigation-top-underline }
	&:after { view-transition-name: navigation-bottom-underline }
}

@keyframes draw-line {
	from { scale: 0 100% }
	to { scale: 100% 100% }
}

::view-transition-old(navigation-top-underline),
::view-transition-old(navigation-bottom-underline){
	display: none;
}

::view-transition-group(navigation-top-underline),
::view-transition-group(navigation-bottom-underline) {
	animation-duration: 0s;
}

::view-transition-new(navigation-top-underline) {
	animation: var(--view-transition-half-duration) 0s ease-in draw-line;
	animation-fill-mode: both;
	transform-origin: left;
	transition: none;
}

::view-transition-new(navigation-bottom-underline) {
	animation: var(--view-transition-half-duration) var(--view-transition-half-duration) ease-in draw-line;
	animation-fill-mode: both;
	transform-origin: left;
	transition: none;
}

/** Background transitions */

.page-background {
	view-transition-name: background;
}

@keyframes background-fill {
	from { translate: 0 100% }
	to { translate: 0 0 }
}

@keyframes background-fade {
	from { opacity: 1 }
	to { opacity: 0 }
}

::view-transition-old(background) {
	animation: var(--view-transition-duration) background-fade;
	transform-origin: bottom;
}

::view-transition-new(background) {
	animation: var(--view-transition-duration) background-fill;
}

/** Content transitions */

main section {
	view-transition-class: content;
	
	/*noinspection CssUnresolvedCustomProperty*/
	&:nth-child(1) { view-transition-name: var(--transition-name, content-1) }
	&:nth-child(2) { view-transition-name: content-2 }
	&:nth-child(3) { view-transition-name: content-3 }
}

@keyframes content-leave {
	from { translate: 0 0 }
	to { translate: -100vw 0 }
}

@keyframes content-enter {
	from { translate: 100vw 0 }
	to { translate: 0 0 }
}

::view-transition-old(content-1),
::view-transition-old(content-2),
::view-transition-old(content-3) {
	animation: var(--view-transition-half-duration) content-leave;
	animation-fill-mode: both;
}

::view-transition-new(content-1),
::view-transition-new(content-2),
::view-transition-new(content-3) {
	animation: var(--view-transition-half-duration) var(--view-transition-half-duration) content-enter;
	animation-fill-mode: both;
}

/** Footer transitions */

footer {
	view-transition-name: footer;
}