/*
 * Shared launch gate. Fully theme-driven.
 * launch.js sets these on .launch-root from the page's theme config:
 *   --lg-primary / --lg-dark / --lg-light / --lg-pale   (hex)
 *   --lg-primary-rgb / --lg-dark-rgb / --lg-light-rgb   ("r, g, b" for rgba())
 * The values below are only fallbacks.
 */
.launch-root {
	--lg-primary: #8C6C2B;
	--lg-dark: #73591E;
	--lg-light: #C9A94A;
	--lg-pale: #EFCB84;
	--lg-primary-rgb: 140, 108, 43;
	--lg-dark-rgb: 115, 89, 30;
	--lg-light-rgb: 201, 169, 74;
}

.launch-root [hidden] {
	display: none !important;
}

.launch-root .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.launch-root .login-gate {
	--gate-dur: calc(1.2s / var(--cd-speed, 1));
	position: fixed;
	inset: 0;
	z-index: 9500;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	text-align: center;
	background: rgba(247, 247, 247, 0.45);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	opacity: 1;
	transition: opacity var(--gate-dur) ease, -webkit-backdrop-filter var(--gate-dur) ease, backdrop-filter var(--gate-dur) ease, background var(--gate-dur) ease;
}

.launch-root .login-gate.clearing {
	-webkit-backdrop-filter: blur(9px);
	backdrop-filter: blur(9px);
}

.launch-root .login-gate.celebrating {
	background: rgba(247, 247, 247, 0.18);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.launch-root .login-gate.lift {
	opacity: 0;
	-webkit-backdrop-filter: blur(0);
	backdrop-filter: blur(0);
	pointer-events: none;
}

.launch-root .login-gate-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.5;
	pointer-events: none;
	animation: loginGateFloat 12s ease-in-out infinite;
}

.launch-root .login-gate-orb.o1 {
	width: 46vmax;
	height: 46vmax;
	background: var(--lg-light);
	left: -12vmax;
	top: -14vmax;
}

.launch-root .login-gate-orb.o2 {
	width: 40vmax;
	height: 40vmax;
	background: var(--lg-primary);
	right: -12vmax;
	bottom: -16vmax;
	animation-delay: -4s;
	opacity: 0.4;
}

.launch-root .login-gate-orb.o3 {
	width: 28vmax;
	height: 28vmax;
	background: var(--lg-pale);
	left: 38%;
	top: 42%;
	animation-delay: -8s;
	opacity: 0.35;
}

@keyframes loginGateFloat {

	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}

	50% {
		transform: translate(5vmax, -4vmax) scale(1.15);
	}
}

.launch-root .login-gate-count {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: opacity calc(0.6s / var(--fx-speed, 1)), transform calc(0.6s / var(--fx-speed, 1));
}

.launch-root .login-gate-count.gone {
	opacity: 0;
	transform: scale(1.6);
	pointer-events: none;
}

.launch-root .login-gate-ringwrap {
	position: relative;
	width: min(70vmin, 520px);
	height: min(70vmin, 520px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.launch-root .login-gate-ringwrap svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	transition: opacity calc(0.5s / var(--cd-speed, 1)) ease;
}

.launch-root .login-gate-ringwrap circle {
	fill: none;
	stroke-width: 4;
	stroke-linecap: round;
}

.launch-root .login-gate-track {
	stroke: rgba(var(--lg-primary-rgb), 0.14);
}

.launch-root #loginGateProg {
	stroke: url(#loginGateGrad);
	stroke-dasharray: 1000;
	stroke-dashoffset: 0;
	filter: drop-shadow(0 0 8px rgba(var(--lg-light-rgb), 0.65));
}

.launch-root .login-gate.idle .login-gate-ringwrap svg {
	opacity: 0;
}

.launch-root .login-gate-num {
	position: relative;
	display: block;
	font-family: var(--v2-font-heading, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif);
	font-weight: 800;
	font-size: min(38vmin, 300px);
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
	background: linear-gradient(180deg, var(--lg-primary), var(--lg-dark));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 12px 30px rgba(var(--lg-dark-rgb), 0.3));
}

.launch-root .login-gate-num.tick {
	animation: loginGateTick calc(1s / var(--cd-speed, 1)) cubic-bezier(.2, .9, .3, 1) both;
}

@keyframes loginGateTick {
	0% {
		transform: scale(1.5);
		opacity: 0;
		filter: blur(18px);
	}

	25% {
		transform: scale(1);
		opacity: 1;
		filter: blur(0);
	}

	85% {
		transform: scale(.96);
		opacity: 1;
		filter: blur(0);
	}

	100% {
		transform: scale(.85);
		opacity: .3;
		filter: blur(6px);
	}
}

.launch-root .login-gate-title {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(0.8);
	pointer-events: none;
	transition: opacity calc(0.6s / var(--fx-speed, 1)) ease, transform calc(0.6s / var(--fx-speed, 1)) cubic-bezier(.2, .9, .3, 1);
}

.launch-root .login-gate-title.show {
	opacity: 1;
	transform: scale(1);
}

.launch-root .login-gate-title h2 {
	margin: 0;
	padding: 0 24px;
	font-family: var(--v2-font-heading, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif);
	font-weight: 800;
	font-size: clamp(2rem, 8vw, 5rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	background: linear-gradient(180deg, var(--lg-primary), var(--lg-dark));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 10px 26px rgba(var(--lg-dark-rgb), 0.3));
}

.launch-root .login-gate-start {
	position: absolute;
	inset: 0;
	margin: auto;
	z-index: 2;
	width: max-content;
	height: max-content;
	border: 0;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: scale(0.8);
	transition: opacity calc(0.4s / var(--cd-speed, 1)) ease, transform 0.25s ease, visibility 0s calc(0.4s / var(--cd-speed, 1));
}

.launch-root .login-gate.idle .login-gate-start {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	transition: opacity calc(0.4s / var(--cd-speed, 1)) ease, transform 0.25s ease;
}

.launch-root .login-gate-start.login-gate-play {
	width: 200px;
	height: 200px;
	padding: 0;
	border: 6px solid var(--lg-dark);
	border-radius: 50%;
	background: radial-gradient(circle at 30% 25%, rgba(var(--lg-light-rgb), 0.54) 0%, rgba(var(--lg-primary-rgb), 0.83) 38%, rgba(var(--lg-dark-rgb), 0.16) 100%);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0;
	line-height: 0;
	isolation: isolate;
	box-shadow: 0 0.75rem 1.75rem rgba(var(--lg-dark-rgb), 0.45), inset 0 0.125rem 0.25rem rgba(255, 255, 255, 0.35), inset 0 -0.375rem 0.75rem rgba(0, 0, 0, 0.25);
	transition: scale 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, filter 0.25s ease, opacity calc(0.4s / var(--cd-speed, 1)) ease, transform 0.25s ease, visibility 0s calc(0.4s / var(--cd-speed, 1));
}

.launch-root .login-gate.idle .login-gate-start.login-gate-play {
	transition: scale 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, filter 0.25s ease, opacity calc(0.4s / var(--cd-speed, 1)) ease, transform 0.25s ease;
}

.launch-root .login-gate-play .play-icon {
	width: 46%;
	height: 46%;
	fill: #fff;
	stroke: #fff;
	stroke-width: 2.5;
	stroke-linejoin: round;
	filter: drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.35));
	transition: scale 0.25s ease;
}

.launch-root .login-gate-play::before,
.launch-root .login-gate-play::after {
	content: "";
	position: absolute;
	inset: -0.25rem;
	border-radius: 50%;
	border: 0.125rem solid rgba(var(--lg-light-rgb), 0.7);
	z-index: -1;
	animation: v2PlayPulse calc(2.4s / var(--cd-speed, 1)) ease-out infinite;
	pointer-events: none;
}

.launch-root .login-gate-play::after {
	animation-delay: calc(1.2s / var(--cd-speed, 1));
}

@keyframes v2PlayPulse {
	0% {
		transform: scale(1);
		opacity: 0.8;
	}

	100% {
		transform: scale(1.65);
		opacity: 0;
	}
}

.launch-root .login-gate-start.login-gate-play:hover {
	scale: 1.08;
	filter: brightness(1.1);
}

.launch-root .login-gate-play:hover .play-icon {
	scale: 1.08;
}

.launch-root .login-gate-start.login-gate-play:active {
	scale: 0.95;
}

.launch-root .login-gate-start.login-gate-play:focus-visible {
	outline: 0.1875rem solid #fff;
	outline-offset: 0.25rem;
}

.launch-root .login-edge-glow {
	position: fixed;
	inset: 0;
	z-index: 9600;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(circle, rgba(var(--lg-light-rgb), 0.75), rgba(var(--lg-light-rgb), 0) 60%);
}

.launch-root .login-edge-glow.go {
	animation: loginGateFlash calc(1.1s / var(--fx-speed, 1)) ease-out;
}

@keyframes loginGateFlash {
	0% {
		opacity: 1;
		transform: scale(.3);
	}

	100% {
		opacity: 0;
		transform: scale(2.2);
	}
}

.launch-root .login-confetti {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 9700;
}

@media (prefers-reduced-motion: reduce) {

	.launch-root .login-gate,
	.launch-root .login-gate-count,
	.launch-root .login-gate-start,
	.launch-root .login-gate-title {
		transition: none;
	}

	.launch-root .login-gate-orb,
	.launch-root .login-gate-num.tick,
	.launch-root .login-edge-glow.go {
		animation: none;
	}

	.launch-root .login-gate-play::before,
	.launch-root .login-gate-play::after {
		animation: none;
		opacity: 0;
	}
}