:root {
	--sos-page-transition-exit-duration: 440ms;
	--sos-page-transition-enter-duration: 640ms;
	--sos-page-transition-exit-ease: cubic-bezier(0.4, 0, 1, 1);
	--sos-page-transition-enter-ease: cubic-bezier(0, 0, 0.2, 1);
	--sos-page-transition-overlay-z: 1490;
}

@view-transition {
	navigation: none;
}

html.sos-transition-reduced,
html.sos-transition-reduced body > #page {
	scroll-behavior: auto;
}

html.sos-transition-reduced body > #page {
	transition: none !important;
	opacity: 1 !important;
}

body > #page {
	transition: none;
	will-change: auto;
	opacity: 1;
}

#sos-page-transition-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--sos-page-transition-overlay-z);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	contain: paint;
	background:
		linear-gradient(180deg, rgba(232, 252, 250, 0.22) 0%, rgba(96, 205, 204, 0.28) 38%, rgba(11, 110, 123, 0.42) 74%, rgba(1, 31, 46, 0.72) 100%);
	will-change: opacity, transform;
	transition:
		opacity 0ms linear,
		visibility 0s linear var(--sos-page-transition-exit-duration);
}

#sos-page-transition-overlay::before,
#sos-page-transition-overlay::after {
	content: "";
	position: absolute;
	inset: -18vh 0 -18vh 0;
	pointer-events: none;
	border-radius: 0;
	will-change: transform, opacity;
}

#sos-page-transition-overlay::before {
	background:
		linear-gradient(180deg, rgba(247, 255, 254, 0.98) 0%, rgba(226, 250, 248, 0.99) 8%, rgba(168, 229, 225, 0.99) 24%, rgba(77, 167, 169, 0.99) 58%, rgba(6, 67, 84, 1) 100%),
		radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.44) 0%, rgba(255, 255, 255, 0.18) 18%, transparent 56%),
		repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0 10px, rgba(255, 255, 255, 0) 10px 24px);
	opacity: 0.98;
	transform: translate3d(0, 112%, 0) scaleY(1.08);
	transform-origin: bottom center;
	transition: opacity 0ms linear;
}

#sos-page-transition-overlay::after {
	background:
		linear-gradient(180deg, rgba(12, 69, 83, 0.06) 0%, rgba(14, 96, 112, 0.22) 34%, rgba(4, 35, 53, 0.68) 100%),
		radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.18), transparent 34%),
		radial-gradient(circle at 50% 84%, rgba(2, 19, 30, 0.66), transparent 46%);
	opacity: 0.52;
	transform: translate3d(0, -10%, 0) scale(1.04);
	transform-origin: center center;
	transition: opacity 0ms linear;
}

html.sos-transition-exit #sos-page-transition-overlay {
	opacity: 1;
	visibility: visible;
}

html.sos-transition-exit #sos-page-transition-overlay::before {
	animation: sos-water-submerge-sheet var(--sos-page-transition-exit-duration) var(--sos-page-transition-exit-ease) forwards;
}

html.sos-transition-exit #sos-page-transition-overlay::after {
	animation: sos-water-submerge-depth var(--sos-page-transition-exit-duration) var(--sos-page-transition-exit-ease) forwards;
}

html.sos-transition-enter #sos-page-transition-overlay {
	opacity: 1;
	visibility: visible;
	transition-duration: var(--sos-page-transition-enter-duration);
	transition-timing-function: var(--sos-page-transition-enter-ease);
}

html.sos-transition-enter #sos-page-transition-overlay::before {
	animation: sos-water-reemerge-sheet var(--sos-page-transition-enter-duration) var(--sos-page-transition-enter-ease) forwards;
}

html.sos-transition-enter #sos-page-transition-overlay::after {
	animation: sos-water-reemerge-depth var(--sos-page-transition-enter-duration) var(--sos-page-transition-enter-ease) forwards;
}

html.sos-transition-reduced #sos-page-transition-overlay,
html.sos-transition-reduced #sos-page-transition-overlay::before,
html.sos-transition-reduced #sos-page-transition-overlay::after {
	display: none !important;
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
	#sos-page-transition-overlay {
		display: none !important;
	}

	body > #page {
		transition: none !important;
		opacity: 1 !important;
	}
}

@keyframes sos-water-submerge-sheet {
	0% {
		transform: translate3d(0, 90%, 0) scaleY(1.08);
		opacity: 0.86;
	}
	12% {
		transform: translate3d(0, 58%, 0) scaleY(1.06);
		opacity: 0.96;
	}
	28% {
		transform: translate3d(0, 22%, 0) scaleY(1.04);
		opacity: 1;
	}
	52% {
		transform: translate3d(0, 4%, 0) scaleY(1.02);
		opacity: 1;
	}
	100% {
		transform: translate3d(0, 0, 0) scaleY(1.01);
		opacity: 1;
	}
}

@keyframes sos-water-submerge-depth {
	0% {
		transform: translate3d(0, -20%, 0) scale(1.06);
		opacity: 0.16;
	}
	14% {
		opacity: 0.34;
	}
	36% {
		opacity: 0.56;
	}
	100% {
		transform: translate3d(0, 0, 0) scale(1);
		opacity: 0.78;
	}
}

@keyframes sos-water-reemerge-sheet {
	0% {
		transform: translate3d(0, 0, 0) scaleY(1);
		opacity: 1;
	}
	16% {
		transform: translate3d(0, -10%, 0) scaleY(1.02);
		opacity: 1;
	}
	100% {
		transform: translate3d(0, -102%, 0) scaleY(1.08);
		opacity: 0;
	}
}

@keyframes sos-water-reemerge-depth {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
		opacity: 0.78;
	}
	24% {
		opacity: 0.28;
	}
	100% {
		transform: translate3d(0, -18%, 0) scale(1.05);
		opacity: 0;
	}
}