/* Fred Mano - demo styles for the animation scaffold */

:root {
	--bg: #0e0e0f;
	--fg: #f5f4f1;
	--muted: #9a9a92;
	--accent: #c8a15a;
}

html.lenis,
html.lenis body {
	height: auto;
}

.hec-main {
	background: var(--bg);
	color: var(--fg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	overflow-x: hidden;
}

/* word reveal: each word is a clipping mask */
.word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.08em;
}
.word > span {
	display: inline-block;
	will-change: transform;
}

/* ---- Hero ---- */
.hec-hero {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.5rem;
	padding: clamp(2rem, 8vw, 9rem);
}
.hec-eyebrow {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.35em;
	font-size: 0.8rem;
	color: var(--accent);
}
.hec-hero h1 {
	margin: 0;
	font-size: clamp(2.4rem, 8vw, 7rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	font-weight: 700;
	max-width: 14ch;
}
.hec-lead {
	margin: 0;
	max-width: 42ch;
	font-size: clamp(1rem, 2vw, 1.4rem);
	color: var(--muted);
}

/* ---- Parallax band ---- */
.hec-parallax-wrap {
	position: relative;
	height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.hec-parallax-bg {
	position: absolute;
	inset: -20% 0;
	background:
		radial-gradient(120% 80% at 30% 20%, #2a2a2e 0%, transparent 60%),
		linear-gradient(135deg, #1a1a1d 0%, #0b0b0c 100%);
	will-change: transform;
}
.hec-parallax-content {
	position: relative;
	text-align: center;
	padding: 2rem;
}
.hec-parallax-content h2 {
	margin: 0;
	font-size: clamp(2rem, 6vw, 4.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* ---- Pinned steps ---- */
.hec-pin {
	position: relative;
	height: 100vh;
}
.hec-pin-inner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(2rem, 8vw, 9rem);
}
.hec-pin article {
	position: absolute;
	max-width: 30ch;
	text-align: center;
}
.hec-pin h3 {
	margin: 0 0 1rem;
	font-size: clamp(1.8rem, 5vw, 3.5rem);
	color: var(--accent);
	font-weight: 700;
}
.hec-pin p {
	margin: 0;
	color: var(--muted);
	font-size: clamp(1rem, 2vw, 1.3rem);
	line-height: 1.5;
}

/* ---- Outro ---- */
.hec-outro {
	min-height: 80vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(2rem, 8vw, 9rem);
}
.hec-outro h2 {
	margin: 0;
	font-size: clamp(2rem, 7vw, 5.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}

@media (prefers-reduced-motion: reduce) {
	.word > span { transform: none !important; }
}