/* 7.9.66/7.9.68 Soft page changes between the start page, the service pages and the presentations.
   The navigation stays where it is and only cross-fades into the new one (no logo flying around); the service switcher
   does the same between service pages; the page underneath steps back into the dark while the new one rises in, and a
   hairline in SCHMITTWERK red draws across the top. Cross-document View Transitions (Chrome/Edge 126+, Safari 18.2+);
   other browsers change the page as before. Only transform and opacity. sw-vt-in is set by the pagereveal script. */
@view-transition { navigation: auto; }

::view-transition { background: #09090a; }
::view-transition-old(root) { animation: sw-vt-out 300ms cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: sw-vt-in 620ms cubic-bezier(.22, 1, .36, 1) 120ms both; }

/* steady chrome: no movement, a short cross-fade in place */
.ca-nav, .header > .nav { view-transition-name: sw-nav; }
.si-switch { view-transition-name: sw-switch; }
::view-transition-group(sw-nav), ::view-transition-group(sw-switch) { animation-duration: 0s; }
::view-transition-old(sw-nav), ::view-transition-old(sw-switch) { animation: sw-vt-fade-out 220ms ease both; }
::view-transition-new(sw-nav), ::view-transition-new(sw-switch) { animation: sw-vt-fade-in 260ms ease 60ms both; }
::view-transition-image-pair(sw-nav), ::view-transition-image-pair(sw-switch) { isolation: auto; }

html.sw-vt-in::before {
	content: "";
	position: fixed;
	inset: 0 0 auto;
	z-index: 2147483000;
	height: 2px;
	background: #e20816;
	transform-origin: 0 50%;
	pointer-events: none;
	animation: sw-vt-line 900ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes sw-vt-out { to { opacity: 0; transform: translate3d(0, -12px, 0) scale(.988); } }
@keyframes sw-vt-in { from { opacity: 0; transform: translate3d(0, 24px, 0); } }
@keyframes sw-vt-fade-out { to { opacity: 0; } }
@keyframes sw-vt-fade-in { from { opacity: 0; } }
@keyframes sw-vt-line {
	0% { transform: scaleX(0); opacity: 1; }
	60% { transform: scaleX(1); opacity: 1; }
	100% { transform: scaleX(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root), ::view-transition-new(root) { animation: sw-vt-fade-in 180ms ease both; }
	::view-transition-old(root) { animation-direction: reverse; }
	html.sw-vt-in::before { display: none; }
}