/* ==========================================================================
   Hero — terminal window with wordmark, typewriter tagline and command box.
   ========================================================================== */

.hero {
	padding: var(--space-48) var(--space-16) var(--space-64);
}

.hero__body {
	gap: var(--space-16);
	max-width: var(--container-max);
	margin: 0 auto;
}

.hero__prompt {
	color: var(--color-accent);
	font-size: var(--font-size-sm);
}

.hero__wordmark {
	gap: var(--space-16);
	align-items: center;
	font-size: var(--font-size-3xl);
	letter-spacing: 0.06em;
	color: var(--color-text);
}

.hero__wordmark .hero__mascot {
	font-size: var(--font-size-2xl);
}

.hero__tagline {
	color: var(--color-text);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	min-height: 1.6em;
}

/* --- command copy box --- */
.copy-box {
	background-color: var(--color-bg);
	border: var(--border-strong);
	border-radius: var(--radius-md);
	padding: var(--space-12) var(--space-16);
	transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.copy-box:hover {
	border-color: var(--color-accent);
	box-shadow: var(--glow-accent);
}

.copy-box__command {
	color: var(--color-accent);
	font-size: var(--font-size-sm);
	overflow-x: auto;
	white-space: nowrap;
	padding: 2px 0;
}

.copy-box__button {
	padding: var(--space-4) var(--space-12);
	border: var(--border-accent);
	border-radius: var(--radius-sm);
	color: var(--color-accent);
	font-size: var(--font-size-xs);
	letter-spacing: 0.04em;
	flex-shrink: 0;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.copy-box__button:hover,
.copy-box__button:focus-visible {
	background-color: var(--color-accent);
	color: var(--color-bg);
}

.copy-box__button.is-copied {
	background-color: var(--color-accent);
	color: var(--color-bg);
}

.hero__notes {
	gap: var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
}

.hero__notes .hero__note--muted {
	color: var(--color-text-muted);
}

.hero__cta {
	color: var(--color-accent-secondary);
	font-size: var(--font-size-sm);
}

.hero__cta:hover {
	color: var(--color-accent);
}

@media (min-width: 768px) {
	.hero__wordmark {
		font-size: var(--font-size-3xl);
	}

	.hero__tagline {
		font-size: var(--font-size-xl);
	}

	.copy-box__command {
		font-size: var(--font-size-md);
	}
}

@media (max-width: 480px) {
	.hero__wordmark {
		font-size: var(--font-size-2xl);
		gap: var(--space-12);
	}
}