@keyframes fly-left-out {
	from {
		transform: translateX(0);
		opacity: 1;
	}
	to {
		transform: translateX(-100px);
		opacity: 0;
	}
}
@keyframes fly-left-in {
	from {
		transform: translateX(-100px);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes fly-right-out {
	from {
		transform: translateX(0);
		opacity: 1;
	}
	to {
		transform: translateX(100px);
		opacity: 0;
	}
}
@keyframes fly-right-in {
	from {
		transform: translateX(100px);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes l2 {
	to {
		transform: rotate(1turn);
	}
}

@keyframes nonetonone {
	from {
		height: 3px;
	}
	to {
		height: 3px;
	}
}

*:has(> .loader-filler) {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
}
.loader-filler {
	height: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	position: relative;
	transform: rotate(45deg);
}
.loader-filler::before {
	content: '';
	position: absolute;
	inset: 0px;
	border-radius: 50%;
	border: 3px solid var(--fill, var(--white));
	animation: l18 var(--duration, 2s) infinite linear;
	z-index: 1;
}
.loader-filler::after {
	content: '';
	position: absolute;
	inset: 0px;
	border-radius: 50%;
	border: 3px solid var(--bg, var(--transparent-black));
	z-index: 0;
}
@keyframes l18 {
	0% {
		clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
	}
	25% {
		clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
	}
	50% {
		clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
	}
	75% {
		clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
	}
	100% {
		clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
	}
}

::view-transition-group(sveltekit-progress-bar-bar),
::view-transition-group(sveltekit-progress-bar-local) {
	z-index: 999999;
}
::view-transition-new(sveltekit-progress-bar-bar) {
	animation: 0s both nonetonone;
}
::view-transition-old(sveltekit-progress-bar-bar) {
	animation: 0s both nonetonone;
}

::view-transition-group(header) {
	z-index: 99999;
}
::view-transition-group(naviga) {
	z-index: 100000;
}
::view-transition-group(toast) {
	z-index: 100001;
}
::view-transition-old(header) {
	transition: 0s;
}
::view-transition-new(header) {
	transition: 0s;
}

::view-transition-old(forward) {
	animation: 0.2s both fly-left-out;
}
::view-transition-new(forward) {
	animation: 0.2s both fly-left-in;
}
::view-transition-old(backward) {
	animation: 0.2s both fly-right-out;
}
::view-transition-new(backward) {
	animation: 0.2s both fly-right-in;
}

@media screen and (max-width: 960px) {
	::view-transition-old(forward) {
		width: 100vw;
	}
	::view-transition-new(forward) {
		width: 100vw;
	}
	::view-transition-old(backward) {
		width: 100vw;
	}
	::view-transition-new(backward) {
		width: 100vw;
	}
}
