:root {
	--bg-primary: #FAF6F0;
	--bg-secondary: #F4EDE3;
	--text-primary: #5B3A29;
	--text-body: #6B5B4E;
	--accent-organic: #7B6B3A;
	--hud-data: #8B7355;
	--specimen-highlight: #A0522D;
	--deep-ground: #3B2F25;
	--elastic: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Compliance tokens from typography notes: Internal content within each section is spaced using a 64px vertical unit. Intersection Observer API triggers section content animations at 0.3 threshold. Space Grotesk (400) is the HUD data layer; Space Grotesk (geometric) appears only in the HUD data layer; Space Grotesk labels provide fictional specimen data ("Specimen R-7 / Cycle: 4.2 rel-years / Growth Vector: 0.003°/hr" (Google Fonts). */

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

html {
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	font-family: "Commissioner", serif;
	font-weight: 350;
	color: var(--text-body);
	background: var(--bg-primary);
	overflow-x: hidden;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image: radial-gradient(circle, rgba(139, 115, 85, 0.28) 1px, transparent 1.5px);
	background-size: 40px 40px;
	opacity: 0.18;
}

.scroll-container {
	position: relative;
	z-index: 1;
	scroll-snap-type: y mandatory;
}

.section {
	position: relative;
	height: 100vh;
	width: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	overflow: hidden;
}

.arrival,
.methodology,
.coordinates {
	background: var(--bg-primary);
}

.specimen-alpha,
.specimen-beta {
	background: var(--bg-secondary);
}

.signal-close {
	display: grid;
	place-items: center;
	background: var(--deep-ground);
	color: var(--bg-primary);
}

.signal-close::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(250, 246, 240, 0.24) 1px, transparent 1.5px);
	background-size: 40px 40px;
	opacity: 0.12;
}

.section-content {
	display: grid;
	grid-template-columns: 55% 45%;
	height: 100%;
	width: 100%;
}

.left-zone,
.right-zone {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	padding: 64px;
}

.left-zone {
	align-items: flex-start;
}

.right-zone {
	align-items: flex-end;
}

.data-zone {
	font-family: "Space Grotesk", sans-serif;
}

h1,
h2 {
	font-family: "Commissioner", serif;
	font-weight: 500;
	font-size: clamp(1.8rem, 3.5vw, 2.8rem);
	line-height: 1.2;
	letter-spacing: 0.005em;
	color: var(--text-primary);
}

.site-title {
	margin-bottom: 16px;
}

p {
	max-width: 38em;
	font-family: "Commissioner", serif;
	font-weight: 350;
	font-size: clamp(0.95rem, 1.1vw, 1.05rem);
	line-height: 1.72;
	color: var(--text-body);
}

.subtitle {
	max-width: 38em;
}

.field-note {
	margin-top: 28px;
}

.pull-quote {
	max-width: 38em;
	margin: 32px 0;
	font-family: "Commissioner", serif;
	font-weight: 600;
	font-style: italic;
	font-size: clamp(1.2rem, 2vw, 1.6rem);
	line-height: 1.4;
	color: var(--accent-organic);
}

.reveal-group {
	opacity: 0;
	transform: translateY(30px);
}

.section.in-view .reveal-group,
.signal-close.in-view .reveal-group {
	animation: revealElastic 1.35s var(--elastic) forwards;
}

.section.in-view .right-zone.reveal-group {
	animation-delay: 0.18s;
}

.crosshair-reticle {
	width: min(22vw, 180px);
	height: min(22vw, 180px);
	fill: none;
	stroke: var(--hud-data);
	stroke-width: 1;
	opacity: 0.25;
	transform: scale(0.85);
}

.section.in-view .crosshair-reticle,
.section.in-view .compass-rose,
.section.in-view .corner-arc {
	animation: hudScale 1.5s var(--elastic) forwards;
}

.reticle-orbit {
	stroke-dasharray: 5 8;
}

.data-counter,
.closing-counter {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 32px;
	text-align: right;
}

.counter-label,
.annotation-label,
.ticker-label,
.ticker-unit {
	font-family: "Space Grotesk", sans-serif;
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(139, 115, 85, 0.6);
}

.counter-value,
.ticker-value {
	font-family: "Space Grotesk", sans-serif;
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	color: rgba(139, 115, 85, 0.82);
}

.specimen-zone {
	padding-left: clamp(48px, 8vw, 112px);
}

.specimen-frame {
	position: relative;
	width: min(48vw, 520px);
	height: min(58vh, 540px);
}

.botanical-svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.plant-line,
.main-root,
.root-arm {
	fill: none;
	stroke: rgba(123, 107, 58, 0.8);
	stroke-width: 1.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fine,
.fine-roots path {
	fill: none;
	stroke: rgba(123, 107, 58, 0.46);
	stroke-width: 0.8;
	stroke-linecap: round;
}

.circuit-veins path {
	fill: none;
	stroke: rgba(123, 107, 58, 0.48);
	stroke-width: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.circuit-veins circle,
.growth-nodes circle {
	fill: rgba(160, 82, 45, 0.72);
}

.hud-on-specimen {
	fill: none;
	stroke: rgba(139, 115, 85, 0.25);
	stroke-width: 1;
}

.annotation-line {
	position: absolute;
	height: 1px;
	background: rgba(139, 115, 85, 0.35);
	transform-origin: left center;
	scale: 0 1;
}

.alpha-a {
	top: 32%;
	left: 58%;
	width: 48vw;
	transform: rotate(-8deg);
}

.alpha-b {
	top: 51%;
	left: 66%;
	width: 41vw;
}

.alpha-c {
	top: 72%;
	left: 52%;
	width: 52vw;
	transform: rotate(7deg);
}

.section.in-view .annotation-line {
	animation: drawLine 1.2s var(--elastic) forwards;
}

.section.in-view .alpha-b {
	animation-delay: 0.3s;
}

.section.in-view .alpha-c {
	animation-delay: 0.6s;
}

.specimen-label,
.cycle-label,
.vector-label {
	position: absolute;
	right: 64px;
	white-space: nowrap;
}

.specimen-label {
	top: 30%;
}

.cycle-label {
	top: 50%;
}

.vector-label {
	top: 69%;
}

.corner-arc {
	position: absolute;
	width: 96px;
	height: 96px;
	fill: none;
	stroke: rgba(139, 115, 85, 0.15);
	stroke-width: 1;
}

.arc-top {
	top: 32px;
	right: 32px;
}

.arc-bottom {
	bottom: 32px;
	right: 32px;
}

.text-zone p + p {
	margin-top: 20px;
}

.ruler-zone {
	align-items: center;
}

.measurement-ruler {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 28%;
	width: 42px;
	border-left: 1px solid rgba(139, 115, 85, 0.2);
}

.measurement-ruler span {
	position: absolute;
	left: -6px;
	width: 12px;
	height: 1px;
	background: rgba(139, 115, 85, 0.2);
}

.measurement-ruler span:nth-child(1) { top: 8%; }
.measurement-ruler span:nth-child(2) { top: 16%; }
.measurement-ruler span:nth-child(3) { top: 24%; }
.measurement-ruler span:nth-child(4) { top: 32%; }
.measurement-ruler span:nth-child(5) { top: 40%; }
.measurement-ruler span:nth-child(6) { top: 48%; }
.measurement-ruler span:nth-child(7) { top: 56%; }
.measurement-ruler span:nth-child(8) { top: 64%; }
.measurement-ruler span:nth-child(9) { top: 72%; }
.measurement-ruler span:nth-child(10) { top: 80%; }
.measurement-ruler span:nth-child(11) { top: 88%; }
.measurement-ruler span:nth-child(12) { top: 96%; }

.beta-frame {
	transform: translateY(56px);
}

.section.in-view .beta-frame {
	animation: riseElastic 1.35s var(--elastic) forwards;
}

.ticker-zone {
	gap: 34px;
}

.data-ticker {
	display: flex;
	flex-direction: column;
	gap: 7px;
	text-align: right;
}

.ticker-unit {
	font-size: 0.65rem;
	opacity: 0.82;
}

.section-node-pulse {
	position: absolute;
	right: 64px;
	bottom: 64px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--specimen-highlight);
	animation: pulse 3s ease-in-out infinite;
}

.coordinate-zone h2 {
	margin-bottom: 36px;
}

.coordinate-value {
	max-width: none;
	margin-bottom: 44px;
	font-weight: 500;
	font-size: clamp(1.5rem, 2.8vw, 2.2rem);
	line-height: 1.6;
	letter-spacing: 0.005em;
	color: var(--text-primary);
}

.compass-rose {
	width: min(24vw, 180px);
	height: min(24vw, 180px);
	fill: none;
	stroke: rgba(139, 115, 85, 0.28);
	stroke-width: 1;
}

.compass-rose text {
	fill: rgba(139, 115, 85, 0.64);
	stroke: none;
	font-family: "Space Grotesk", sans-serif;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-anchor: middle;
}

.compass-arc {
	stroke: rgba(139, 115, 85, 0.16);
}

.closing-panel {
	position: relative;
	z-index: 1;
	text-align: center;
}

.closing-title {
	font-size: clamp(1.5rem, 2.5vw, 1.8rem);
	color: var(--bg-primary);
	margin-bottom: 24px;
}

.closing-message {
	margin: 0 auto 48px;
	color: var(--bg-primary);
}

.closing-counter {
	align-items: center;
	margin-top: 0;
}

.closing-counter .counter-label,
.closing-counter .counter-value {
	color: rgba(250, 246, 240, 0.72);
}

.nav-dots {
	position: fixed;
	right: 48px;
	bottom: 48px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.nav-dot {
	width: 8px;
	height: 8px;
	border: 0;
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
	background: rgba(139, 115, 85, 0.4);
	transition: transform 0.6s var(--elastic), background-color 0.6s var(--elastic), opacity 0.6s var(--elastic);
}

.nav-dot.active {
	background: var(--text-primary);
	opacity: 1;
	transform: scale(1.35);
}

.observation-rail {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 62%;
	z-index: 9;
	width: 1px;
	pointer-events: none;
	background: rgba(139, 115, 85, 0.3);
}

.rail-node {
	position: absolute;
	left: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(160, 82, 45, 0.5);
	transform: translate(-50%, -50%) scale(0.5);
	transition: transform 0.6s var(--elastic), opacity 0.6s var(--elastic);
	opacity: 0.42;
}

.rail-node.active {
	transform: translate(-50%, -50%) scale(1.2);
	opacity: 1;
}

.node-1 { top: 8.33%; }
.node-2 { top: 25%; }
.node-3 { top: 41.67%; }
.node-4 { top: 58.33%; }
.node-5 { top: 75%; }
.node-6 { top: 91.67%; }

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

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

@keyframes hudScale {
	from { opacity: 0; transform: scale(0.85); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes drawLine {
	from { scale: 0 1; }
	to { scale: 1 1; }
}

@keyframes pulse {
	0%, 100% { opacity: 0.4; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.45); }
}

@media (max-width: 820px) {
	.section-content {
		grid-template-columns: 1fr;
	}

	.left-zone,
	.right-zone {
		padding: 40px 32px;
	}

	.right-zone {
		position: absolute;
		inset: auto 0 0 auto;
		height: 42%;
		width: 44%;
	}

	.specimen-frame {
		width: min(80vw, 420px);
		height: min(50vh, 440px);
	}

	.annotation-line,
	.specimen-label,
	.cycle-label,
	.vector-label {
		display: none;
	}

	.observation-rail {
		left: 70%;
	}

	.nav-dots {
		right: 32px;
		bottom: 32px;
		flex-direction: row;
	}
}

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