.unk-swup-transition {
	position: fixed;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 9998;
	/* mix-blend-mode: color-burn; */
}

.unk-swup-transition__clip {
	position: absolute;
	background: var(--unk-color-bg);
	will-change: transform;
}

.unk-swup-transition__clip--top {
	top: 0;
	left: 0;
	width: 100%;
	transform: scaleY(0);
	transform-origin: top center;
}

.unk-swup-transition__clip--bottom {
	bottom: 0;
	left: 0;
	width: 100%;
	transform: scaleY(0);
	transform-origin: bottom center;
}

.unk-swup-transition__clip--left {
	top: 0;
	left: 0;
	height: 100%;
	transform: scaleX(0);
	transform-origin: left center;
}

.unk-swup-transition__clip--right {
	top: 0;
	right: 0;
	height: 100%;
	transform: scaleX(0);
	transform-origin: right center;
}

.unk-swup-transition__line {
	position: fixed;
	will-change: transform, filter;
}

.unk-swup-transition__line::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--unk-color-accent);
	opacity: 0.9;

	mask-size: 100% 100%;
	mask-position: 0% 50%;
}

.unk-swup-transition__line--horizontal::before {
	mask-image: linear-gradient(
		90deg,
		transparent 0%,
		white 10%,
		white 90%,
		transparent 100%
	);
}

.unk-swup-transition__line--vertical::before {
	mask-image: linear-gradient(
		0deg,
		transparent 0%,
		white 10%,
		white 90%,
		transparent 100%
	);
}

.unk-swup-transition__line::after {
	content: "";
	position: absolute;
	inset: -6px;
	background: radial-gradient(
		closest-side,
		rgba(255, 255, 255, 0.35),
		rgba(255, 255, 255, 0.05),
		transparent
	);
	mix-blend-mode: screen;
	opacity: 0.6;
}

.unk-swup-transition__line--horizontal {
	width: 100vw;
	height: 1px;
}

.unk-swup-transition__line--horizontal.unk-swup-transition__line--start {
	top: -1px;
}

.unk-swup-transition__line--horizontal.unk-swup-transition__line--end {
	bottom: -1px;
}

.unk-swup-transition__line--vertical {
	height: 100vh;
	width: 1px;
}

.unk-swup-transition__line--vertical.unk-swup-transition__line--start {
	left: -1px;
}

.unk-swup-transition__line--vertical.unk-swup-transition__line--end {
	right: -1px;
}