@font-face {
	font-family: 'Bahnschrift Web';
	src:
		local('Bahnschrift'),
		url('assets/fonts/bahnschrift.woff2') format('woff2-variations'),
		url('assets/fonts/bahnschrift.woff2') format('woff2');
	font-weight: 300 700;
	font-stretch: 75% 100%;
	font-display: swap;
}

:root {
	color-scheme: dark;
	--bg: #080a12;
	--ink: #f3f4fb;
	--muted: #9da4b8;
	--line: rgba(224, 230, 255, 0.14);
	--accent: #b6baff;
	--font:
		'Bahnschrift Web', 'Bahnschrift', Inter, ui-sans-serif, system-ui,
		-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--subhead-font:
		'Bahnschrift Web', 'Bahnschrift', Inter, ui-sans-serif, system-ui,
		-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	min-height: 100%;
	background: var(--bg);
	-webkit-text-size-adjust: 100%;
}

body {
	min-width: 320px;
	min-height: 100vh;
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font);
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-underline-offset: 3px;
}
a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}

.loading-screen {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-rows: 1fr auto;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	padding: 32px 24px 20px;
	justify-items: center;
	background-color: var(--bg);
}

.loading-screen::before,
.loading-screen::after {
	position: absolute;
	z-index: -1;
	inset: -26%;
	pointer-events: none;
	content: '';
	will-change: transform, opacity;
}

.loading-screen::before {
	background-color: var(--bg);
	background-image:
		radial-gradient(
			ellipse at 18% 22%,
			hsla(247, 66%, 35%, 0.34) 0%,
			transparent 48%
		),
		radial-gradient(
			ellipse at 79% 20%,
			hsla(188, 58%, 28%, 0.25) 0%,
			transparent 46%
		),
		radial-gradient(
			ellipse at 76% 79%,
			hsla(266, 58%, 34%, 0.27) 0%,
			transparent 52%
		),
		radial-gradient(
			ellipse at 20% 82%,
			hsla(218, 66%, 25%, 0.3) 0%,
			transparent 50%
		),
		radial-gradient(
			ellipse at 50% 48%,
			hsla(229, 48%, 20%, 0.25) 0%,
			transparent 54%
		);
	background-blend-mode: screen, screen, screen, screen, normal;
	animation: mesh-drift-a 38s ease-in-out infinite alternate;
}

.loading-screen::after {
	background-image:
		radial-gradient(
			ellipse at 72% 28%,
			hsla(252, 68%, 38%, 0.26) 0%,
			transparent 50%
		),
		radial-gradient(
			ellipse at 26% 72%,
			hsla(195, 62%, 30%, 0.22) 0%,
			transparent 48%
		),
		radial-gradient(
			ellipse at 45% 24%,
			hsla(272, 54%, 32%, 0.2) 0%,
			transparent 46%
		);
	background-blend-mode: screen;
	mix-blend-mode: screen;
	animation: mesh-drift-b 29s ease-in-out infinite alternate;
}

.loading-card {
	align-self: center;
	display: grid;
	justify-items: center;
	text-align: center;
}

.brand-mark {
	position: relative;
	display: grid;
	width: clamp(112px, 20vw, 148px);
	aspect-ratio: 1;
	place-items: center;
	overflow: hidden;
	margin-bottom: 30px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 17.31%;
	background: #000;
	box-shadow:
		0 30px 90px rgba(0, 0, 0, 0.55),
		0 0 64px rgba(119, 130, 255, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.42),
		inset 0 -18px 34px rgba(104, 119, 255, 0.14);
	animation: logo-heartbeat 4.2s ease-in-out infinite;
}

.brand-mark::before {
	position: absolute;
	z-index: 2;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.32),
		rgba(255, 255, 255, 0.06) 36%,
		transparent 62%,
		rgba(171, 183, 255, 0.16)
	);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.45),
		inset 0 -16px 28px rgba(104, 119, 255, 0.14);
	content: '';
	pointer-events: none;
}

.brand-mark img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
}

.loading-card h1 {
	margin: 0;
	line-height: 0;
}

.brand-wordmark {
	display: block;
	width: clamp(195px, 34vw, 268px);
	height: auto;
}

.loading-message {
	margin: 14px 0 0;
	color: #c1c6d6;
	font-family: var(--subhead-font);
	font-size: clamp(0.65rem, 1.35vw, 0.75rem);
	font-weight: 350;
	letter-spacing: 0.125em;
}

.loading-message .sep {
	display: inline-block;
	margin: 0 0.65em;
	color: rgba(197, 200, 255, 0.6);
	font-size: 0.85em;
	letter-spacing: 0;
	vertical-align: 0.05em;
}

.loading-footer {
	max-width: 68ch;
	padding-top: 24px;
	color: rgba(157, 164, 184, 0.65);
	font-family: var(--subhead-font);
	font-size: clamp(0.65rem, 1.35vw, 0.72rem);
	font-weight: 350;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-align: center;
}

.loading-footer p {
	margin: 0;
}

@keyframes mesh-drift-a {
	0% {
		transform: translate3d(-4%, -3%, 0) scale(1) rotate(0deg);
	}
	50% {
		transform: translate3d(3%, -2%, 0) scale(1.08) rotate(3deg);
	}
	100% {
		transform: translate3d(4%, 4%, 0) scale(1.04) rotate(-3deg);
	}
}

@keyframes mesh-drift-b {
	0% {
		transform: translate3d(5%, 3%, 0) scale(1.06) rotate(0deg);
		opacity: 0.55;
	}
	50% {
		transform: translate3d(-4%, 4%, 0) scale(1) rotate(-4deg);
		opacity: 0.95;
	}
	100% {
		transform: translate3d(-3%, -5%, 0) scale(1.1) rotate(4deg);
		opacity: 0.65;
	}
}

@keyframes logo-heartbeat {
	0%,
	100% {
		transform: scale(1);
	}
	12% {
		transform: scale(1.035);
	}
	24% {
		transform: scale(1);
	}
	36% {
		transform: scale(1.02);
	}
	52% {
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}