/**
 * Page turn reconstructed from exovia.de/projekte (September 2026).
 * Native document navigation keeps WordPress and plugin lifecycles intact.
 * Unsupported browsers retain ordinary navigation without hiding content.
 */
@view-transition {
	navigation: auto;
}

/* Capture the entire menu bar separately from the rotating page snapshot. */
.wp-site-blocks > header.wp-block-template-part {
	view-transition-name: nm-site-header;
}

::view-transition-group(nm-site-header) {
	z-index: 2;
	animation: none;
}

::view-transition-image-pair(nm-site-header) {
	isolation: isolate;
}

::view-transition-old(nm-site-header) {
	display: none;
}

::view-transition-new(nm-site-header) {
	animation: none;
	mix-blend-mode: normal;
	opacity: 1;
}

::view-transition-group(root) {
	z-index: 1;
	animation-duration: 1.5s;
}

::view-transition-image-pair(root) {
	isolation: isolate;
}

::view-transition-old(root),
::view-transition-new(root) {
	mix-blend-mode: normal;
	animation-duration: 1.5s;
	animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
	animation-fill-mode: both;
}

::view-transition-old(root) {
	z-index: 1;
	animation-name: nm-page-leave;
}

::view-transition-new(root) {
	z-index: 2;
	transform-origin: bottom left;
	animation-name: nm-page-enter;
}

@keyframes nm-page-leave {
	from { opacity: 1; transform: translateY(0) rotate(0deg); }
	to { opacity: 0; transform: translateY(-35%) rotate(-14deg); }
}

@keyframes nm-page-enter {
	from {
		clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
		transform: rotate(14deg);
	}
	to {
		clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);
		transform: rotate(0deg);
	}
}

/* Earlier pages / parent pages / history back: mirror the page turn. */
html[data-nm-transition-direction="backward"]::view-transition-old(root) {
	animation-name: nm-page-leave-backward;
}
html[data-nm-transition-direction="backward"]::view-transition-new(root) {
	transform-origin: top right;
	animation-name: nm-page-enter-backward;
}
@keyframes nm-page-leave-backward {
	from { opacity: 1; transform: translateY(0) rotate(0deg); }
	to { opacity: 0; transform: translateY(35%) rotate(14deg); }
}
@keyframes nm-page-enter-backward {
	from { clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); transform: rotate(-14deg); }
	to { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	::view-transition-group(root),
	::view-transition-old(root),
	::view-transition-new(root) { animation: none; }
}

/* The site's accessibility menu also offers a manual motion preference. */
html.nm-reduced-motion::view-transition-group(root),
html.nm-reduced-motion::view-transition-old(root),
html.nm-reduced-motion::view-transition-new(root) {
	animation: none;
}