.hero {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	min-height: 100dvh;
	overflow: clip;
	text-align: center;
}

.hero-canvas {
	position: fixed;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.hero-canvas[hidden] {
	display: none;
}

.hero-body {
	position: relative;
	display: grid;
	gap: var(--space-6);
	justify-items: center;
	width: min(var(--width-content), calc(100vw - var(--space-6)));
	padding: var(--space-7) var(--space-4);
	grid-template-areas:
		"mark"
		"lede"
		"prompt"
		"verbs";
	grid-template-columns: minmax(0, 1fr);
}

.hero-lede {
	display: grid;
	gap: var(--space-4);
	justify-items: center;
	grid-area: lede;
}

.hero-mark {
	width: clamp(22rem, 42vmin, 46rem);
	grid-area: mark;
	pointer-events: none;
	transform-style: preserve-3d;
	transition:
		opacity 1.4s var(--ease-soft),
		transform var(--dur-slow) var(--ease-soft);
	animation: hero-float 14s ease-in-out infinite;
	view-transition-name: hero-mark;
}

.hero-mark img {
	display: block;
	width: 100%;
	height: auto;
}

@keyframes hero-float {
	0%,
	100% {
		translate: 0 0;
	}
	50% {
		translate: 0 -1.4rem;
	}
}

.hero-title {
	margin: 0;
	font-size: var(--step-5);
	letter-spacing: -0.04em;
	line-height: 1;
}

.hero-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	justify-content: center;
	margin: 0;
	padding: 0;
	color: var(--text-secondary);
	font-size: var(--step-2);
	list-style: none;
}

.hero-tags li + li::before {
	margin-right: var(--space-3);
	color: var(--accent);
	content: "·";
}

.hero-prompt {
	display: flex;
	grid-area: prompt;
	justify-self: center;
	gap: var(--space-2);
	align-items: baseline;
	padding: var(--space-3) var(--space-5);
	border: 1px solid var(--surface-raised-border);
	border-radius: var(--radius-pill);
	background: var(--surface-raised);
	color: var(--text-primary);
	font: inherit;
	font-size: var(--step-1);
	cursor: text;
	backdrop-filter: blur(var(--glass-blur-s));
}

.hero-prompt-sigil {
	color: var(--accent);
}

.hero-prompt-cursor {
	display: inline-block;
	width: 0.9ch;
	height: 1.1em;
	background: var(--term-cursor);
	box-shadow: var(--term-cursor-bloom);
	translate: 0 0.15em;
	animation: hero-blink 1.1s steps(1) infinite;
}

@keyframes hero-blink {
	0%,
	49% {
		opacity: 1;
	}
	50%,
	100% {
		opacity: 0;
	}
}

.hero-verbs {
	display: flex;
	grid-area: verbs;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: center;
}

.hero-verb {
	--verb-lift: 0.7rem;

	display: block;
	min-width: 13rem;
	color: var(--text-primary);
	text-decoration: none;
}

.hero-verb-face {
	display: grid;
	gap: var(--space-1);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-m);
	background: color-mix(in srgb, var(--nm-ink900) 55%, transparent);
	font-size: var(--step-1);
	backdrop-filter: blur(var(--glass-blur-m));
	transition:
		box-shadow var(--dur-soft) var(--ease-soft),
		translate var(--dur-soft) var(--ease-soft);
}

.hero-verb:hover .hero-verb-face,
.hero-verb:focus-visible .hero-verb-face {
	box-shadow:
		inset 0 0 0 1px var(--accent-soft),
		0 1.2rem 3.2rem var(--accent-edge);
	translate: 0 calc(var(--verb-lift) * -1);
}

.hero-verb-hint {
	color: var(--accent-soft);
	font-size: var(--step--1);
	transition: color var(--dur-soft) var(--ease-soft);
}

.hero-verb:hover .hero-verb-hint,
.hero-verb:focus-visible .hero-verb-hint {
	color: var(--text-primary);
}

@keyframes hero-dissolve {
	to {
		opacity: 0;
		scale: 0.94;
	}
}

@supports (animation-timeline: view()) {
	.hero-body {
		animation: hero-dissolve linear both;
		animation-timeline: view();
		animation-range: exit 0% exit 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-body,
	.hero-mark,
	.hero-prompt-cursor {
		animation: none;
	}
}