/* ------------------------------------------------------------------ Font */
@font-face {
	font-family: "Space Grotesk Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 300 700;
	src: url("/static/fonts/space-grotesk.06408904.woff2") format("woff2");
}

/* ---------------------------------------------------------------- Tokens */
:root {
	--font-sans:
		"Space Grotesk Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--ease-rise: cubic-bezier(0.2, 0.75, 0.2, 1);

	--canvas: #f8f9fb;
	--ink: #0d1015;
	--muted: #666d78;
	--line: #e2e5ea;
	--line-strong: #cfd4dc;
	--surface: rgba(255, 255, 255, 0.72);
	--surface-hover: #f0f2f5;
	--accent: #176bff;
	--shadow: 0 12px 40px rgba(13, 16, 21, 0.05);

	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--canvas: #0b0d11;
		--ink: #f1f3f6;
		--muted: #8d95a1;
		--line: #242830;
		--line-strong: #343a45;
		--surface: rgba(20, 23, 29, 0.76);
		--surface-hover: #20242c;
		--accent: #4a8cff;
		--shadow: 0 12px 40px rgba(0, 0, 0, 0.18);

		color-scheme: dark;
	}
}

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

html,
body {
	height: 100%;
}

body {
	margin: 0;
	background-color: var(--canvas);
	color: var(--ink);
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	-webkit-tap-highlight-color: transparent;
	overflow-x: hidden;
}

a {
	color: inherit;
	text-decoration: none;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 5px;
}

::selection {
	background: color-mix(in srgb, var(--accent) 22%, transparent);
}

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------------ Hero */
.hero {
	display: flex;
	min-height: 100svh;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: clamp(2rem, 8vw, 7rem);
}

.stack {
	margin-top: -4vh;
	display: flex;
	width: min(100%, 34rem);
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.wordmark {
	display: flex;
	align-items: center;
	margin: 0;
	animation: rise 0.75s var(--ease-rise) both;
}

.wordmark__mark {
	margin-inline: clamp(-0.85rem, -2.2vw, -0.7rem);
	height: auto;
	width: clamp(3.35rem, 11vw, 4.25rem);
	filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent));
}

.wordmark__name {
	font-size: clamp(2.3rem, 8vw, 3.25rem);
	font-weight: 520;
	line-height: 1;
	letter-spacing: -0.06em;
	color: var(--ink);
}

/* ------------------------------------------------------------------ Links */
.links {
	margin-top: 1.6rem;
	display: inline-flex;
	justify-content: center;
	gap: 0.2rem;
	border-radius: 9999px;
	border: 1px solid var(--line);
	background: var(--surface);
	padding: 0.28rem;
	box-shadow: var(--shadow);
	animation: rise 0.75s var(--ease-rise) 0.14s both;
}

.link {
	display: inline-flex;
	min-height: 2.5rem;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	border-radius: 9999px;
	padding: 0.55rem 0.85rem;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--muted);
	transition:
		color 180ms,
		background-color 180ms;
}
.link:hover {
	background-color: var(--surface-hover);
	color: var(--ink);
}
.link svg {
	display: block;
	flex: none;
}

@media (max-width: 400px) {
	.links {
		width: 100%;
	}
	.link {
		flex: 1;
		padding-inline: 0.55rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wordmark,
	.links {
		animation: none;
	}
}