/* Independent motion layer. Keep user-edited theme styling untouched. */
@view-transition {
	navigation: none;
}

.wc-curtain {
	position: fixed;
	inset: 0;
	z-index: 100000;
	visibility: hidden;
	pointer-events: none;
	overflow: hidden;
	contain: layout paint;
}

.wc-curtain__panel {
	position: absolute;
	left: 0;
	width: 100%;
	height: calc(50% + 2px);
	background: #0d070b;
	will-change: transform;
}

.wc-curtain__panel--top {
	top: 0;
	background: radial-gradient(ellipse at 50% 100%, #3c0b19, #0d070b 67%);
	transform: translateY(-102%);
}

.wc-curtain__panel--bottom {
	bottom: 0;
	background: radial-gradient(ellipse at 50% 0, #3c0b19, #0d070b 67%);
	transform: translateY(102%);
}

.wc-curtain__identity {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	opacity: 0;
	color: #fff;
}

.wc-curtain__wordmark {
	position: relative;
	font-family: inherit;
	font-size: clamp(32px, 6.5vw, 94px);
	font-weight: 600;
	letter-spacing: -0.06em;
	line-height: 1.1;
	padding: 0 22px;
	text-align: center;
}

.wc-curtain__wordmark span {
	color: #efb5bd;
}

.wc-curtain__identity p {
	position: relative;
	margin: 20px 0 0;
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #d6b6c0;
}

.wc-curtain__rule {
	position: relative;
	margin-top: 32px;
	width: 160px;
	height: 1px;
	background: linear-gradient(90deg, transparent, #cf304e, transparent);
	transform-origin: left;
}

.wc-curtain__orbit {
	position: absolute;
	width: min(62vw, 470px);
	aspect-ratio: 1;
	border: 1px solid #ffffff16;
	border-radius: 50%;
	transform: rotate(-25deg) scaleX(1.45);
	will-change: transform;
}

.wc-curtain__orbit::after {
	content: "";
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #e83c58;
	top: 14%;
	right: 14%;
	box-shadow: 0 0 30px #ef3d59;
}

.wc-motion-out .wc-curtain,
.wc-motion-in .wc-curtain {
	visibility: visible;
	pointer-events: auto;
}

.wc-motion-out .wc-curtain__panel--top {
	animation: wc-cover-top 0.42s cubic-bezier(0.65, 0, 0.2, 1) both;
}

.wc-motion-out .wc-curtain__panel--bottom {
	animation: wc-cover-bottom 0.42s 0.045s cubic-bezier(0.65, 0, 0.2, 1) both;
}

.wc-motion-out .wc-curtain__identity {
	animation: wc-brand-in 0.32s 0.15s ease-out both;
}

.wc-motion-in .wc-curtain__panel--top {
	animation: wc-open-top 0.65s 0.25s cubic-bezier(0.75, 0, 0.18, 1) both;
}

.wc-motion-in .wc-curtain__panel--bottom {
	animation: wc-open-bottom 0.65s 0.32s cubic-bezier(0.75, 0, 0.18, 1) both;
}

.wc-motion-in .wc-curtain__identity {
	animation: wc-brand-out 0.42s 0.2s ease-in both;
}

.wc-motion-out .wc-curtain__orbit,
.wc-motion-in .wc-curtain__orbit {
	animation: wc-orbit 8s linear infinite;
	animation-delay: var(--wc-orbit-delay, 0ms);
}

.wc-motion-in:not(.wc-motion-ready) .wc-curtain__panel,
.wc-motion-in:not(.wc-motion-ready) .wc-curtain__identity,
.wc-motion-in:not(.wc-motion-ready) .wc-curtain__rule {
	animation-play-state: paused;
}

.wc-motion-in .wc-curtain__rule {
	animation: wc-rule 0.55s ease-out both;
}

@keyframes wc-cover-top {
	from {
		transform: translateY(-102%);
	}

	to {
		transform: translateY(0);
	}
}

@keyframes wc-cover-bottom {
	from {
		transform: translateY(102%);
	}

	to {
		transform: translateY(0);
	}
}

@keyframes wc-open-top {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-102%);
	}
}

@keyframes wc-open-bottom {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(102%);
	}
}

@keyframes wc-brand-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes wc-brand-out {
	from {
		opacity: 1;
		transform: none;
	}

	to {
		opacity: 0;
		transform: translateY(-20px);
	}
}

@keyframes wc-orbit {
	to {
		transform: rotate(335deg) scaleX(1.45);
	}
}

@keyframes wc-rule {
	from {
		transform: scaleX(0.15);
	}

	to {
		transform: scaleX(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wc-curtain,
	.wc-motion-in .wc-curtain,
	.wc-motion-out .wc-curtain {
		display: none;
	}
}