/* ── Design tokens ──────────────────────────────────────────────────── */
:root {
	--bg:          #1c1917;  /* deep stone */
	--bg-deep:     #120f0e;  /* night sky base */
	--grass:       #5b8c3a;  /* mossy grass green */
	--grass-dark:  #466b2c;
	--dirt:        #6b4a32;
	--dirt-dark:   #4f3624;
	--stone:       #5c5650;
	--stone-dark:  #423e3a;
	--amber:       #d9a441;  /* torch light */
	--amber-glow:  rgba(217, 164, 65, 0.35);
	--ore-blue:    #3a5a6b;
	--text:        #e8e4d8;  /* parchment */
	--text-dim:    #a9a299;
	--star:        #f4ecd8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
	background: var(--bg);
	color: var(--text);
	font-family: 'Inter', sans-serif;
	overflow-x: hidden;
	min-height: 100vh;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* ── Hero ───────────────────────────────────────────────────────────── */

.hero {
	position: relative;
	height: 100vh;
	min-height: 560px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: linear-gradient(
		to bottom,
		var(--bg-deep) 0%,
		#1f1a16 55%,
		#2a2118 100%
	);
}

/* Stars — sparse, ambient */
.stars {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.star {
	position: absolute;
	width: 2px;
	height: 2px;
	background: var(--star);
	border-radius: 50%;
	opacity: 0.6;
	animation: twinkle 4s ease-in-out infinite;
}

@keyframes twinkle {
	0%, 100% { opacity: 0.15; }
	50%      { opacity: 0.75; }
}

/* Moon */
.moon {
	position: absolute;
	top: 12%;
	right: 14%;
	width: 64px;
	height: 64px;
	background: var(--star);
	border-radius: 50%;
	box-shadow: 0 0 50px rgba(244, 236, 216, 0.25);
	opacity: 0.9;
	z-index: 0;
}

/* ── Hero content ───────────────────────────────────────────────────── */

.hero-content {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 0 1.5rem;
	margin-bottom: 8vh;
}

.wordmark {
	font-family: 'Press Start 2P', monospace;
	font-size: clamp(2rem, 8vw, 4.5rem);
	color: var(--text);
	letter-spacing: 2px;
	line-height: 1.3;
	text-shadow:
		3px 3px 0 var(--grass-dark),
		6px 6px 0 rgba(0,0,0,0.3);
	margin-bottom: 1.5rem;
	animation: rise 1s ease-out;
}

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

.tagline {
	font-size: clamp(0.95rem, 2vw, 1.15rem);
	color: var(--text-dim);
	font-weight: 500;
	letter-spacing: 0.3px;
	max-width: 32ch;
	margin: 0 auto;
	animation: rise 1s ease-out 0.15s backwards;
}

.glow-divider {
	width: 48px;
	height: 3px;
	background: var(--amber);
	box-shadow: 0 0 16px var(--amber-glow);
	margin: 1.75rem auto 0;
	animation: rise 1s ease-out 0.3s backwards;
}

/* ── Terrain horizon — the signature element ───────────────────────── */

.terrain {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	height: 22vh;
	min-height: 140px;
}

.block-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.block {
	width: 100%;
	flex: 1;
}

.block.grass {
	background: var(--grass);
	border-top: 4px solid #74a854;
	box-shadow: inset -3px 0 0 rgba(0,0,0,0.12);
}

.block.dirt  { background: var(--dirt); }
.block.dirt2 { background: var(--dirt-dark); }
.block.stone { background: var(--stone); }
.block.stone2{ background: var(--stone-dark); }

/* Slight per-column height variance, set via inline style data attr in HTML */

/* Floating torch glow accents along the terrain */
.torch {
	position: absolute;
	bottom: 100%;
	width: 6px;
	height: 22px;
	background: var(--amber);
	box-shadow: 0 0 24px 6px var(--amber-glow);
	animation: flicker 2.4s ease-in-out infinite;
}

@keyframes flicker {
	0%, 100% { opacity: 1;   transform: scaleY(1); }
	50%      { opacity: 0.85; transform: scaleY(0.94); }
}

/* ── Below-fold content ────────────────────────────────────────────── */

.section {
	max-width: 640px;
	margin: 0 auto;
	padding: 5rem 1.5rem;
}

.section h2 {
	font-family: 'Press Start 2P', monospace;
	font-size: 1.1rem;
	color: var(--grass);
	letter-spacing: 1px;
	margin-bottom: 1.5rem;
	text-shadow: 2px 2px 0 rgba(0,0,0,0.25);
}

.section p {
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--text-dim);
}

.section p + p { margin-top: 1rem; }

.section strong { color: var(--text); font-weight: 600; }

/* ── Footer ─────────────────────────────────────────────────────────── */

footer {
	text-align: center;
	padding: 3rem 1.5rem 4rem;
	color: var(--text-dim);
	font-size: 0.82rem;
	opacity: 0.6;
	letter-spacing: 0.3px;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 480px) {
	.terrain { height: 16vh; min-height: 100px; }
	.section { padding: 3.5rem 1.25rem; }
}

/* ── Accessibility ──────────────────────────────────────────────────── */

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--amber);
	outline-offset: 3px;
}