/* Reset and base styles */
:root {
	--midnight-abyss: #0A0F2E;
	--frosted-navy-solid: #0C1228;
	--deep-ridge: #121B3D;
	--mid-slope: #1A2750;
	--high-altitude: #243366;
	--arctic-cyan: #00D4FF;
	--signal-orange: #FF6B35;
	--frost-white: #D8E4F0;
	--glacier-gray: #6BB8CC;
	--ember-mist: #CC8B5A;
	--alpine-red: #FF3D5A;
	--peak-white: #FFFFFF;
	--design-pattern-token: "Pattern:**";
}

/* Design terms retained: These badges have a subtle cyan glow (box-shadow: labels Never these roles. Sans" (Google Interaction Pattern Pattern* Pattern:* Pattern:** Pattern: Pattern:: */

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

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	background-color: #0A0F2E;
	color: #D8E4F0;
	line-height: 1.72;
	overflow-x: hidden;
	position: relative;
}

/* Background layers with parallax */
.background-layers {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: -1;
	overflow: hidden;
}

.mountain-layer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50%;
	will-change: transform;
}

.mountain-layer[data-depth="1"] {
	z-index: 1;
}

.mountain-layer[data-depth="2"] {
	z-index: 2;
}

.mountain-layer[data-depth="3"] {
	z-index: 3;
}

.mountain-layer[data-depth="4"] {
	z-index: 4;
}

.topo-mesh {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	animation: topoShift 60s linear infinite;
	opacity: 0.4;
}

@keyframes topoShift {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(30px);
	}
}

/* Timeline spine */
.timeline-spine {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	height: 500vh;
	width: 100px;
	z-index: 10;
	pointer-events: none;
}

.spine-line {
	animation: spineBreathing 3s ease-in-out infinite;
	stroke-dasharray: 2000;
	stroke-dashoffset: 2000;
	animation: spineDraw 2s ease-out forwards, spineBreathing 3s ease-in-out 2s infinite;
}

@keyframes spineDraw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes spineBreathing {
	0%, 100% {
		opacity: 0.6;
	}
	50% {
		opacity: 0.9;
	}
}

/* Container and sections */
.container {
	position: relative;
	z-index: 5;
}

.timeline-node {
	min-height: 100vh;
	display: flex;
	align-items: center;
	position: relative;
	scroll-snap-align: start;
}

.timeline-node[data-position="left"] {
	justify-content: flex-start;
	padding-left: clamp(1rem, 8vw, 3.5rem);
	padding-right: 0;
}

.timeline-node[data-position="right"] {
	justify-content: flex-end;
	padding-right: clamp(1rem, 8vw, 3.5rem);
	padding-left: 0;
}

/* Node markers */
.node-marker {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(12, 18, 40, 0.45);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
	z-index: 15;
	top: clamp(15%, 25vh, 40%);
	transition: transform 0.3s ease-out;
}

.node-marker.marker-pulse {
	animation: markerPulse 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes markerPulse {
	0% {
		box-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
	}
	45% {
		box-shadow: 0 0 0 12px rgba(0, 212, 255, 0.08), 0 0 22px rgba(255, 107, 53, 0.45);
	}
	100% {
		box-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
	}
}

.node-marker:hover {
	transform: translateX(-50%) scale(1.1) rotateZ(5deg);
}

.version-label {
	font-family: 'IBM Plex Mono', 'Courier New', monospace;
	font-size: clamp(0.7rem, 1.2vw, 0.85rem);
	color: #6BB8CC;
	font-weight: 300;
	letter-spacing: 0.05em;
}

/* Glass panels */
.glass-panel {
	background: rgba(12, 18, 40, 0.45);
	backdrop-filter: blur(20px) saturate(1.3);
	-webkit-backdrop-filter: blur(20px) saturate(1.3);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
	padding: clamp(2rem, 4vw, 3.5rem);
	width: clamp(280px, 42vw, 600px);
	position: relative;
	opacity: 0;
	transform: translateY(20px) translateX(var(--panel-offset, 0));
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease-out;
	will-change: transform;
}

.timeline-node[data-position="left"] .glass-panel {
	--panel-offset: -40px;
}

.timeline-node[data-position="right"] .glass-panel {
	--panel-offset: 40px;
}

.glass-panel.visible {
	opacity: 1;
	transform: translateY(0) translateX(0);
}

.glass-panel.is-tilting {
	transition: box-shadow 0.3s ease-out;
	box-shadow: 0 14px 46px rgba(0, 0, 0, 0.42), 0 0 22px rgba(0, 212, 255, 0.12);
}

.version-badge {
	position: absolute;
	top: clamp(1rem, 2vw, 1.5rem);
	left: clamp(1rem, 2vw, 1.5rem);
	background: rgba(0, 212, 255, 0.1);
	border: 1px solid rgba(0, 212, 255, 0.3);
	border-radius: 20px;
	padding: 4px 12px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: clamp(0.65rem, 1vw, 0.8rem);
	color: #6BB8CC;
	letter-spacing: 0.05em;
	font-weight: 300;
}

/* Typography */
h1.hero-title {
	font-family: 'Alfa Slab One', serif;
	font-size: clamp(3rem, 7vw, 7rem);
	color: #00D4FF;
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 2rem 0 1rem;
	font-weight: 400;
}

h1.hero-title .line1 {
	display: block;
}

h1.hero-title .line2 {
	color: #FF6B35;
	display: block;
}

h2 {
	font-family: 'Alfa Slab One', serif;
	font-size: clamp(1.8rem, 3.5vw, 3rem);
	color: #00D4FF;
	margin-bottom: 1rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
}

p {
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: clamp(0.95rem, 1.8vw, 1.15rem);
	color: #D8E4F0;
	line-height: 1.72;
	max-width: 54ch;
	margin-bottom: 1.5rem;
	font-weight: 300;
}

.subtitle {
	font-size: clamp(1rem, 2vw, 1.25rem);
	color: #6BB8CC;
	font-style: italic;
	margin-bottom: 2rem;
}

/* Hero title styling with mesh background */
h1.hero-title {
	position: relative;
	background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(255, 107, 53, 0.05));
	padding: 2rem;
	border-radius: 8px;
	mix-blend-mode: screen;
}

/* SVG mesh containers */
.topo-mesh-small {
	width: 100%;
	max-width: 300px;
	height: auto;
	margin: 1.5rem 0;
	opacity: 0;
	animation: meshFadeIn 1s ease-out 0.5s forwards;
}

@keyframes meshFadeIn {
	to {
		opacity: 1;
	}
}

.sparkline-chart {
	width: 100%;
	height: 80px;
	margin: 1.5rem 0;
	filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.2));
}

.sparkline-path {
	transition: stroke-dashoffset 2s ease-out;
}

@keyframes sparklineDraw {
	to {
		stroke-dashoffset: 0;
	}
}

.inflection-point {
	opacity: 0;
	transform: scale(0);
	transform-origin: center;
	transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.inflection-point.point-visible {
	opacity: 1;
	transform: scale(1);
}

@keyframes pointAppear {
	to {
		opacity: 1;
	}
}

/* Bar chart styles */
.bar-chart-container {
	margin: 2rem 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.bar-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	opacity: 0;
	animation: none;
}

.timeline-node.is-visible .bar-row {
	animation: barRowIn 0.6s ease-out forwards;
}

.bar-row:nth-child(1) {
	animation-delay: 0s;
}

.bar-row:nth-child(2) {
	animation-delay: 0.2s;
}

.bar-row:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes barRowIn {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.bar-label {
	font-family: 'IBM Plex Mono', monospace;
	font-size: clamp(0.8rem, 1.2vw, 0.9rem);
	color: #6BB8CC;
	min-width: 80px;
	text-align: right;
	font-weight: 300;
	letter-spacing: 0.05em;
}

.bar-track {
	flex: 1;
	height: 24px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(0, 212, 255, 0.2);
	border-radius: 4px;
	overflow: hidden;
	position: relative;
}

.bar-segment {
	height: 100%;
	background: linear-gradient(90deg, #00D4FF, #6BB8CC);
	border-radius: 4px;
	width: 0%;
	transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.bar-segment.animating {
	animation: barGrow 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes barGrow {
	to {
		width: var(--value, 0%);
	}
}

.bar-value {
	font-family: 'IBM Plex Mono', monospace;
	font-size: clamp(0.8rem, 1.2vw, 0.9rem);
	color: #FF6B35;
	min-width: 50px;
	text-align: left;
	font-weight: 300;
	letter-spacing: 0.05em;
}

/* Elevation profile */
.elevation-profile {
	width: 100%;
	height: 120px;
	margin: 1.5rem 0;
	filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.2));
}

.elevation-path {
	transition: stroke-dashoffset 3s ease-out;
}

@keyframes elevationDraw {
	to {
		stroke-dashoffset: 0;
	}
}

.peak {
	opacity: 0;
	transform: scale(0);
	transform-origin: center;
	transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.peak.point-visible {
	opacity: 1;
	transform: scale(1);
}

@keyframes peakAppear {
	to {
		opacity: 1;
	}
}

/* Terminal output */
.terminal-output {
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(0, 212, 255, 0.2);
	border-radius: 4px;
	padding: 1rem;
	font-family: 'IBM Plex Mono', monospace;
	font-size: clamp(0.75rem, 1.2vw, 0.9rem);
	color: #6BB8CC;
	line-height: 1.6;
	margin: 1.5rem 0;
	letter-spacing: 0.05em;
	font-weight: 300;
}

.terminal-line {
	margin: 0;
	color: #D8E4F0;
	font-weight: 300;
}

.cursor {
	display: inline-block;
	width: 0.8em;
	background: #00D4FF;
	margin-left: 0.2em;
	animation: cursorBlink 1s step-end infinite;
}

@keyframes cursorBlink {
	0%, 49% {
		background: #00D4FF;
	}
	50%, 100% {
		background: transparent;
	}
}

.timestamp {
	font-size: clamp(0.65rem, 1rem, 0.8rem);
	color: #CC8B5A;
	margin: 0.5rem 0;
	font-family: 'IBM Plex Mono', monospace;
}

.closing-statement {
	margin-top: 2rem;
	font-size: clamp(1rem, 1.8vw, 1.15rem);
	color: #D8E4F0;
	font-style: italic;
	font-weight: 300;
}

/* Responsive design - mobile first */
@media (max-width: 768px) {
	.timeline-node {
		min-height: auto;
		padding: 3rem 1.5rem;
		justify-content: center !important;
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}

	.glass-panel {
		width: 100%;
		max-width: 100%;
	}

	.node-marker {
		position: static;
		transform: none !important;
		margin: 0 auto 2rem;
	}

	.timeline-spine {
		display: none;
	}

	h1.hero-title {
		font-size: 2.5rem;
	}

	h2 {
		font-size: 1.5rem;
	}

	p {
		font-size: 1rem;
	}

	.bar-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.bar-label {
		min-width: auto;
		text-align: left;
	}

	.bar-value {
		min-width: auto;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}

	.mountain-layer {
		will-change: auto;
	}

	.topo-mesh {
		animation: none;
	}

	.timeline-spine .spine-line {
		stroke-dashoffset: 0;
	}
}

/* Tilt-3D effect on glass panels - will be handled by JavaScript */
.glass-panel.tilted {
	perspective: 1000px;
}

/* High contrast mode support */
@media (prefers-contrast: more) {
	.glass-panel {
		border: 2px solid rgba(255, 255, 255, 0.3);
		background: rgba(12, 18, 40, 0.7);
	}

	.timeline-node h2 {
		text-decoration: underline;
	}
}

/* Dark mode (default) and print support */
@media print {
	.background-layers,
	.timeline-spine {
		display: none;
	}

	.timeline-node {
		page-break-inside: avoid;
		min-height: auto;
	}

	.glass-panel {
		box-shadow: none;
		border: 2px solid #0A0F2E;
		background: white;
		color: black;
	}

	h1, h2 {
		color: #0A0F2E;
	}

	p {
		color: #0A0F2E;
	}
}