/* ===================================================================
	 Hero
	 =================================================================== */

main {
	margin-top: -30px; /* status-strip height */
}

.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(540px, 100svh, 1200px);
	overflow: hidden;
}
.hero__bg {
	position: absolute;
	inset: 0;
	z-index: var(--z-bg);
}
canvas#augure-hexes-tiles {
	top: 0;
	left: 0;
	width: 100%;
	height: 100lvh;
	display: block;
	position: fixed;
	z-index: 10;
}

.hero__bg-overlay {
	position: fixed;
	inset: 0;
	z-index: 11;
	height: 100lvh;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		transparent 70%,
		var(--color-bg) 100%
	);
}

div.hero__bg-under {
	position: fixed;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	height: 100lvh;
	& > img {
		margin: auto;
		max-height: 70svh;
	}
}

.hero-fallback {
	display: none;
}

.hero__content {
	position: relative;
	z-index: var(--z-content);
	width: 100%;
	pointer-events: none;
}

.hero__title {
	font-size: var(--step-display);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.035em;
	margin-block: var(--space-xl) var(--space-2xl);
}
.hero__title .line + .line { margin-block-start: var(--space-xs); }
.hero__title .accent { color: var(--color-accent); font-style: italic; font-weight: 400; }
.hero__title .line { display: block; }
.hero__title .line > span {
	display: inline-block;
	transform: translateY(110%);
	will-change: transform;
}

/* Rotator: two greetings always visible — small on top, big below — swap which pair shows */
.hero__rotator {
	position: relative;
	display: block;
	margin-block: 0;
	text-wrap: balance;
	cursor: pointer;
}
.hero__pair {
	position: relative;
	display: grid;
	gap: var(--space-xs);
}
.hero__pair:not(.is-on) { display: none; }
.hero__small {
	font-family: var(--font-mono);
	font-size: var(--step-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-fg-muted);
	line-height: 1.3;
	opacity: 0.7;
	position: relative;
}
.hero__big {
	font-size: var(--step-display);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.035em;
	color: var(--color-fg);
	position: relative;
}
.hero__big .accent, .hero__small .accent { color: var(--color-accent); font-style: italic; font-weight: 400; }
.hero__small .accent { font-style: normal; font-weight: 500; }

/* Glitch layers (r/b channels) — only on the big title */
.hero__big::before,
.hero__big::after {
	content: attr(data-text);
	position: absolute;
	left: 0; top: 0;
	display: block;
	opacity: 0;
	pointer-events: none;
	mix-blend-mode: screen;
}
.hero__big::before { color: #ff0044; }
.hero__big::after  { color: #00e5ff; }
.hero__big.is-glitch::before,
.hero__big.is-glitch::after { opacity: 0.9; }
.hero__big.is-glitch { animation: glitch-shift 0.35s steps(2, end) 1; }
.hero__big.is-glitch::before { animation: glitch-r 0.35s steps(2, end) 1; }
.hero__big.is-glitch::after  { animation: glitch-b 0.35s steps(2, end) 1; }
@keyframes glitch-shift {
	0%   { transform: translate(0, 0); }
	25%  { transform: translate(-2px, 1px); }
	50%  { transform: translate(2px, -1px); }
	75%  { transform: translate(-1px, -1px); }
	100% { transform: translate(0, 0); }
}
@keyframes glitch-r {
	0%   { transform: translate(0, 0); clip-path: inset(0 0 0 0); }
	20%  { transform: translate(-5px, -2px); clip-path: inset(10% 0 60% 0); }
	40%  { transform: translate(4px, 1px);  clip-path: inset(50% 0 30% 0); }
	60%  { transform: translate(-3px, 2px); clip-path: inset(20% 0 50% 0); }
	80%  { transform: translate(2px, -1px); clip-path: inset(70% 0 10% 0); }
	100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); }
}
@keyframes glitch-b {
	0%   { transform: translate(0, 0); clip-path: inset(0 0 0 0); }
	20%  { transform: translate(5px, 2px);  clip-path: inset(60% 0 10% 0); }
	40%  { transform: translate(-4px, -1px); clip-path: inset(30% 0 50% 0); }
	60%  { transform: translate(3px, -2px); clip-path: inset(50% 0 20% 0); }
	80%  { transform: translate(-2px, 1px);  clip-path: inset(10% 0 70% 0); }
	100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); }
}

/* Small-slot jitter during the swap */
.hero__small.is-jitter {
	animation: small-jitter 0.35s steps(2, end) 1;
}
@keyframes small-jitter {
	0%   { transform: translate(0, 0); }
	30%  { transform: translate(-1px, 1px); }
	60%  { transform: translate(1px, -1px); }
	100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__rotator { cursor: default; }
	.hero__big::before, .hero__big::after { display: none; }
}

.hero__blocks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
}
.hero__block {
	padding: 2rem;
	border-radius: var(--radius-lg);
	background: rgba(20, 21, 22, 0.6);
	backdrop-filter: blur(12px);
	border: 1px solid var(--border);
	transition: border-color 0.4s, background 0.4s;
}
.hero__block:hover {
	border-color: var(--border-light);
	background: rgba(20, 21, 22, 0.85);
}
.hero__block--main {
	grid-column: 1 / -1;
	background: transparent;
	border: none;
	backdrop-filter: none;
	padding: 0 0 2rem 0;
}
.hero__block--main:hover {
	background: transparent;
	border-color: transparent;
}
.hero__block-label {
	font-family: var(--font-mono);
	font-size: var(--step-2xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-accent);
	margin-bottom: 0.75rem;
	opacity: 0.8;
}
.hero__block-title {
	font-size: var(--step-lg);
	margin-bottom: 0.5rem;
}
.hero__block-text {
	color: var(--color-fg-muted);
	font-size: var(--step-sm);
	line-height: 1.65;
}

.hero__cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	align-items: center;
	margin: 2rem 0 0;
}

/* Below-fold section containing blocks + CTA */
.hero-below {
	margin-top: -4.5rem;
	padding-bottom: 6rem;
}

@media (max-width: 960px) {
	.hero__blocks { grid-template-columns: 1fr; gap: var(--space-lg); }
	.hero__title { font-size: clamp(3rem, 1rem + 14vw, 7rem); }
}