:root {
	color-scheme: dark;
}

html {
	background: #050609;
}

body {
	margin: 0;
}

canvas {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
}

main {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100svh;
}

.orb {
	width: min(62vw, 44vh, 640px);
	aspect-ratio: 1;
}

.mark {
	width: min(30vw, 15vh, 220px);
	margin-top: min(6.5vh, 56px);
	overflow: visible;
	fill: #f3f3f6;
	filter: drop-shadow(0 0 8px rgb(255 255 255 / 0.12));
}

a {
	margin-top: min(4vh, 36px);
	padding: 12px 20px;
	border-radius: 999px;
	font: 500 15px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
	color: rgb(255 255 255 / 0.72);
	background: rgb(255 255 255 / 0.07);
	text-decoration: none;
	transition: color 0.3s, background-color 0.3s;
}

a:hover,
a:focus-visible {
	color: #fff;
	background: rgb(255 255 255 / 0.14);
}

.stage .mark path,
.stage a {
	opacity: 0;
}

.go .mark path {
	animation: fade 0.5s ease both, rise 0.9s cubic-bezier(0.22, 1.1, 0.36, 1) both;
}

.go .mark path:nth-child(1) {
	--x: -360px;
	animation-delay: 2.22s;
}

.go .mark path:nth-child(2) {
	--x: 0px;
	animation-delay: 2.29s;
}

.go .mark path:nth-child(3) {
	--x: 360px;
	animation-delay: 2.36s;
}

.go a {
	animation: fade 0.6s ease 2.75s both, lift 0.9s cubic-bezier(0.22, 1, 0.36, 1) 2.75s both;
}

@keyframes fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes rise {
	from {
		transform: translate(var(--x), 260px);
	}
}

@keyframes lift {
	from {
		transform: translateY(12px);
	}
}