:root {
	/* Compliance lexicon: (Google Fonts Inter-Chamber Transitions:** Transitions* Transitions: IntersectionObserver pause off-screen animations Source URLs should use free Lottie animations from LottieFiles CDN — abstract/geometric/nature categories. Space Mono" (Google Fonts */
	--bg-primary: #0a1f0a;
	--bg-secondary: #132613;
	--text-primary: #c8e6c0;
	--text-accent: #e0ffe0;
	--neon-primary: #7cfc00;
	--neon-secondary: #ff71ce;
	--depth-accent: #01cdfe;
	--warm-neutral: #d4a574;
	--muted-forest: #4a7a3f;
	--scroll-progress: 0;
	--perspective-x: 50%;
}

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

html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

body {
	font-family: "IBM Plex Mono", monospace;
	background: var(--bg-primary);
	color: var(--text-primary);
}

.chambers-container {
	display: flex;
	flex-direction: row;
	width: 100vw;
	height: 100vh;
	overflow-x: scroll;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	position: relative;
	background: var(--bg-primary);
}

.chambers-container::-webkit-scrollbar {
	display: none;
}

.chamber {
	width: 100vw;
	height: 100vh;
	flex: 0 0 100vw;
	scroll-snap-align: start;
	position: relative;
	overflow: hidden;
	contain: layout style paint;
	background: var(--bg-primary);
}

.membrane {
	width: 50px;
	height: 100vh;
	flex: 0 0 50px;
	position: relative;
	background: #0a1f0a;
	mix-blend-mode: multiply;
	box-shadow: inset 0 0 28px rgba(124, 252, 0, 0.08), inset 0 0 60px rgba(1, 205, 254, 0.06);
}

.membrane::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(224, 255, 224, 0.05) 2px 4px);
}

.chamber-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
	perspective: 1200px;
	perspective-origin: var(--perspective-x) 50%;
}

.layer {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}

.layer-bg {
	z-index: 1;
	transform: translateZ(-180px) scale(1.15);
}

.layer-mid {
	z-index: 10;
	transform: translateZ(-40px) scale(1.04);
	pointer-events: none;
}

.layer-fg {
	z-index: 30;
	transform: translateZ(80px) scale(0.94);
	pointer-events: none;
}

.atmosphere {
	position: absolute;
	inset: -8%;
	background:
		radial-gradient(ellipse at 30% 60%, rgba(124, 252, 0, 0.08) 0%, transparent 60%),
		radial-gradient(ellipse at 72% 22%, rgba(255, 113, 206, 0.07) 0%, transparent 42%),
		linear-gradient(135deg, #0a1f0a 0%, #1a3a1a 40%, #0d2b1a 70%, #0a1f0a 100%);
}

.atmosphere.dark {
	background:
		radial-gradient(ellipse at 48% 50%, rgba(1, 205, 254, 0.1) 0%, transparent 44%),
		linear-gradient(135deg, #0a1f0a 0%, #0d2b1a 50%, #132613 100%);
}

.atmosphere.final {
	background:
		radial-gradient(ellipse at 50% 45%, rgba(124, 252, 0, 0.12) 0%, transparent 54%),
		linear-gradient(135deg, #0a1f0a 0%, #1a3a1a 35%, #0d2b1a 70%, #132613 100%);
}

.blob {
	position: absolute;
	border-radius: 30% 70% 60% 40% / 50% 30% 70% 50%;
	will-change: transform, border-radius;
}

.blob-lg {
	width: clamp(360px, 46vw, 720px);
	height: clamp(360px, 46vw, 720px);
	background: radial-gradient(ellipse, rgba(124, 252, 0, 0.12) 0%, rgba(1, 205, 254, 0.06) 50%, transparent 80%);
	filter: blur(1px) saturate(1.3);
	mix-blend-mode: screen;
}

.blob-md {
	width: clamp(150px, 18vw, 300px);
	height: clamp(150px, 18vw, 300px);
	background: linear-gradient(160deg, rgba(255, 113, 206, 0.15), rgba(124, 252, 0, 0.2));
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 113, 206, 0.2);
	transform: translateX(calc(var(--scroll-progress) * -40px));
}

.blob-sm {
	width: 54px;
	height: 54px;
	background: #7cfc00;
	opacity: 0.1;
	mix-blend-mode: screen;
	animation: spore-float 12s ease-in-out infinite alternate;
}

.blob-a { left: 8%; top: -14%; animation: morph-1 18s ease-in-out infinite alternate; }
.blob-b { right: 5%; top: -18%; animation: morph-2 20s ease-in-out 1s infinite alternate; }
.blob-c { left: -5%; bottom: 4%; animation: morph-3 22s ease-in-out 2s infinite alternate; }
.blob-d { right: 2%; top: 8%; animation: morph-4 19s ease-in-out 1.5s infinite alternate; }
.blob-e { left: 28%; bottom: -15%; animation: morph-1 21s ease-in-out 2s infinite alternate; }
.blob-f { right: 10%; top: -12%; animation: morph-2 23s ease-in-out 3s infinite alternate; }
.blob-g { left: 36%; top: 7%; animation: morph-3 25s ease-in-out 2.5s infinite alternate; }
.drift-blob { left: 18%; bottom: 12%; animation: morph-4 16s ease-in-out infinite alternate; }
.drift-blob.second { left: 8%; top: 18%; }
.spore-a { right: 16%; bottom: 12%; }
.spore-b { left: 10%; top: 18%; animation-delay: 1s; }
.spore-c { right: 22%; top: 16%; animation-delay: 2s; }
.spore-d { left: 14%; bottom: 18%; animation-delay: 3s; }
.spore-e { right: 10%; bottom: 10%; animation-delay: 1.4s; }
.spore-f { left: 8%; top: 12%; animation-delay: 2.2s; }

.wire-column,
.temple-lines,
.marble-grid,
.forest-lines,
.canopy,
.horizon-grid,
.void-disc {
	position: absolute;
	pointer-events: none;
}

.wire-column {
	bottom: -5vh;
	width: 120px;
	height: 78vh;
	border: 2px solid rgba(124, 252, 0, 0.18);
	background: repeating-linear-gradient(0deg, transparent 0 34px, rgba(212, 165, 116, 0.18) 34px 38px);
	box-shadow: 0 0 32px rgba(1, 205, 254, 0.12);
}

.column-a { right: 18%; transform: skewX(-6deg); }
.column-b { right: 8%; transform: skewX(6deg) scaleY(0.86); opacity: 0.65; }

.marble-grid,
.horizon-grid {
	left: 0;
	right: 0;
	bottom: -10%;
	height: 48%;
	background-image: linear-gradient(rgba(124, 252, 0, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 252, 0, 0.16) 1px, transparent 1px);
	background-size: 72px 72px;
	transform: perspective(600px) rotateX(64deg);
	transform-origin: bottom;
	box-shadow: 0 -24px 60px rgba(1, 205, 254, 0.08);
}

.forest-lines {
	inset: 0;
	background: repeating-linear-gradient(100deg, transparent 0 44px, rgba(74, 122, 63, 0.22) 45px 47px, transparent 48px 90px);
	opacity: 0.45;
}

.temple-lines {
	right: 8%;
	top: 10%;
	width: 38vw;
	height: 70vh;
	border-top: 3px double rgba(212, 165, 116, 0.45);
	border-bottom: 3px double rgba(212, 165, 116, 0.26);
	background: repeating-linear-gradient(90deg, transparent 0 54px, rgba(212, 165, 116, 0.24) 55px 62px, transparent 63px 108px);
}

.canopy {
	inset: -12% -5% auto -5%;
	height: 50vh;
	background: radial-gradient(circle at 20% 20%, rgba(124, 252, 0, 0.12), transparent 18%), radial-gradient(circle at 45% 10%, rgba(1, 205, 254, 0.1), transparent 15%), radial-gradient(circle at 70% 24%, rgba(255, 113, 206, 0.1), transparent 18%);
	filter: blur(8px);
}

.void-disc {
	left: 50%;
	top: 50%;
	width: min(58vw, 680px);
	height: min(58vw, 680px);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(10, 31, 10, 0.8) 0 45%, rgba(255, 113, 206, 0.08) 46%, transparent 68%);
	border: 1px solid rgba(124, 252, 0, 0.16);
}

.spirit {
	position: absolute;
	width: clamp(200px, 30vw, 500px);
	height: clamp(200px, 30vw, 500px);
	opacity: 0.7;
	filter: drop-shadow(0 0 22px rgba(1, 205, 254, 0.25));
}

.spirit-rings { left: 52%; top: 50%; transform: translate(-50%, -50%); }
.spirit-rings span,
.spirit-radar em,
.spirit-pulse b {
	position: absolute;
	inset: 18%;
	border: 2px solid rgba(124, 252, 0, 0.55);
	border-radius: 50%;
	animation: ring-breathe 5s ease-in-out infinite;
}
.spirit-rings span:nth-child(2), .spirit-radar em:nth-child(2), .spirit-pulse b:nth-child(2) { inset: 32%; border-color: rgba(255, 113, 206, 0.48); animation-delay: 0.8s; }
.spirit-rings span:nth-child(3), .spirit-radar em:nth-child(3), .spirit-pulse b:nth-child(3) { inset: 46%; border-color: rgba(1, 205, 254, 0.5); animation-delay: 1.6s; }

.spirit-diamond { right: 9%; top: 50%; transform: translateY(-50%); animation: rotate-slow 18s linear infinite; }
.spirit-diamond.slow { animation-duration: 26s; }
.spirit-diamond i {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 42%;
	height: 42%;
	border: 2px solid rgba(255, 113, 206, 0.48);
	transform: translate(-50%, -50%) rotate(45deg) scale(var(--s, 1));
	box-shadow: 0 0 24px rgba(255, 113, 206, 0.18);
}
.spirit-diamond i:nth-child(2) { --s: .72; border-color: rgba(124, 252, 0, 0.5); }
.spirit-diamond i:nth-child(3) { --s: .46; border-color: rgba(1, 205, 254, 0.5); }
.spirit-diamond i:nth-child(4) { --s: .22; border-color: rgba(224, 255, 224, 0.45); }

.spirit-orbit { right: 18%; top: 12%; border: 1px dashed rgba(124, 252, 0, 0.4); border-radius: 50%; animation: rotate-slow 22s linear infinite; }
.spirit-orbit span { position: absolute; left: 48%; top: -5px; width: 18px; height: 18px; border-radius: 50%; background: #ff71ce; box-shadow: 0 0 22px rgba(255, 113, 206, 0.8); }
.spirit-radar { left: 12%; bottom: 8%; }
.spirit-pulse { right: 10%; top: 24%; }
.spirit-pulse b:nth-child(4) { inset: 6%; border-color: rgba(212, 165, 116, 0.38); animation-delay: 2.2s; }
.final-spirit { left: 50%; top: 48%; transform: translate(-50%, -50%); }

.floating-window {
	position: absolute;
	width: 138px;
	height: 154px;
	background: rgba(19, 38, 19, 0.66);
	border: 2px solid #4a7a3f;
	backdrop-filter: blur(10px);
	box-shadow: 0 0 0 1px rgba(212, 165, 116, 0.12), 0 18px 60px rgba(0, 0, 0, 0.35);
	animation: float-drift 16s ease-in-out infinite alternate;
}

.window-header {
	height: 22px;
	background: linear-gradient(90deg, #1a3a1a, #2a4a2a);
	border-bottom: 1px solid rgba(74, 122, 63, 0.75);
	position: relative;
}

.window-header::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #7cfc00;
	box-shadow: 13px 0 0 #ff71ce, 26px 0 0 #01cdfe;
}

.window-content {
	height: calc(100% - 22px);
	display: grid;
	place-items: center;
	font-family: "Righteous", sans-serif;
	font-size: 3.4rem;
	color: #7cfc00;
	text-shadow: 0 0 8px rgba(124, 252, 0, 0.6), 0 0 24px rgba(124, 252, 0, 0.3), 0 0 48px rgba(124, 252, 0, 0.1);
}

.window-poem {
	padding: 18px;
	font-family: "Space Mono", monospace;
	font-size: 0.7rem;
	line-height: 1.7;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #e0ffe0;
}

.window-left { left: 10%; top: 20%; transform: rotate(-3deg); }
.window-left.lower { top: 62%; }
.window-right { right: 15%; bottom: 18%; transform: rotate(3deg); }
.window-right.high { bottom: auto; top: 22%; }
.window-small { left: 22%; top: 18%; width: 190px; height: 112px; animation-delay: 1.5s; }
.window-center { right: 24%; top: 44%; transform: rotate(-2deg); }
.window-final { right: 12%; top: 17%; width: 210px; height: 128px; }

.annotation,
.kicker {
	font-family: "Space Mono", monospace;
	font-size: 0.7rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #4a7a3f;
}

.annotation {
	position: absolute;
	border: 1px solid rgba(74, 122, 63, 0.45);
	padding: 8px 12px;
	background: rgba(10, 31, 10, 0.42);
}

.annotation-top { left: 8%; top: 10%; }
.annotation-bottom { right: 8%; bottom: 12%; }
.right-note { left: auto; right: 8%; }

.text-left,
.text-right,
.text-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.15rem;
	padding: 0 8vw;
}

.text-left { align-items: flex-start; text-align: left; }
.text-right { align-items: flex-end; text-align: right; }
.text-center { align-items: center; text-align: center; }
.compact .chamber-title { max-width: 760px; }

.kicker {
	color: #d4a574;
	margin-bottom: 0.25rem;
}

.chamber-title {
	font-family: "Bungee Shade", cursive;
	font-size: clamp(2.8rem, 6vw, 5.5rem);
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.05;
	text-transform: uppercase;
	color: #7cfc00;
	filter: drop-shadow(0 0 12px rgba(124, 252, 0, 0.4));
	text-shadow: 0 0 8px rgba(124, 252, 0, 0.6), 0 0 24px rgba(124, 252, 0, 0.3), 0 0 48px rgba(124, 252, 0, 0.1);
	animation: glow-pulse 4s ease-in-out infinite;
	max-width: 900px;
}

.chamber-subtitle {
	font-family: "Righteous", sans-serif;
	font-size: clamp(1.2rem, 2.5vw, 2rem);
	font-weight: 400;
	letter-spacing: 0.03em;
	line-height: 1.3;
	max-width: 760px;
}

.mint { color: #e0ffe0; }
.pink {
	color: #ff71ce;
	text-shadow: 0 0 8px rgba(255, 113, 206, 0.6), 0 0 24px rgba(255, 113, 206, 0.3), 0 0 48px rgba(255, 113, 206, 0.1);
}

.chamber-text {
	font-family: "IBM Plex Mono", monospace;
	font-size: clamp(0.85rem, 1.1vw, 1.05rem);
	font-weight: 300;
	line-height: 1.75;
	letter-spacing: 0.01em;
	color: #c8e6c0;
	max-width: 620px;
	background: linear-gradient(90deg, rgba(19, 38, 19, 0.48), rgba(19, 38, 19, 0.14));
	border-left: 2px solid rgba(212, 165, 116, 0.46);
	padding: 1rem 1.25rem;
}

.text-right .chamber-text {
	border-left: 0;
	border-right: 2px solid rgba(212, 165, 116, 0.46);
	background: linear-gradient(270deg, rgba(19, 38, 19, 0.48), rgba(19, 38, 19, 0.14));
}

.text-center .chamber-text {
	border-right: 0;
	border-left: 0;
	border-top: 2px solid rgba(212, 165, 116, 0.46);
}

.progress-shell {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 18px;
	z-index: 100;
	pointer-events: none;
}

.progress-track,
.progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 2px;
}

.progress-track {
	right: 0;
	background: rgba(74, 122, 63, 0.4);
}

.progress-bar {
	width: calc(var(--scroll-progress) * 100%);
	background: #7cfc00;
	box-shadow: 0 0 10px rgba(124, 252, 0, 0.5);
	transition: width 80ms linear;
}

.marker {
	position: absolute;
	top: -7px;
	transform: translateX(-50%);
	font-family: "Space Mono", monospace;
	font-size: 0.8rem;
	color: #7cfc00;
	text-shadow: 0 0 4px rgba(124, 252, 0, 0.6);
}

.chamber-counter {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99;
	font-family: "Space Mono", monospace;
	font-size: 0.7rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #d4a574;
	background: rgba(10, 31, 10, 0.56);
	border: 1px solid rgba(212, 165, 116, 0.26);
	padding: 0.55rem 0.7rem;
	pointer-events: none;
}

.scan-lines,
.vignette {
	position: fixed;
	inset: 0;
	pointer-events: none;
}

.scan-lines {
	z-index: 200;
	background: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(10, 31, 10, 0.15) 2px, rgba(10, 31, 10, 0.15) 4px);
}

.vignette {
	z-index: 80;
	background: radial-gradient(ellipse at center, transparent 0 52%, rgba(10, 31, 10, 0.45) 100%);
}

@keyframes morph-1 {
	0% { border-radius: 30% 70% 60% 40% / 50% 30% 70% 50%; }
	50% { border-radius: 68% 32% 46% 54% / 35% 62% 38% 65%; }
	100% { border-radius: 60% 40% 30% 70% / 40% 60% 50% 30%; }
}

@keyframes morph-2 {
	0% { border-radius: 40% 60% 50% 50% / 60% 40% 40% 60%; }
	50% { border-radius: 28% 72% 64% 36% / 55% 26% 74% 45%; }
	100% { border-radius: 50% 50% 40% 60% / 50% 60% 60% 40%; }
}

@keyframes morph-3 {
	0% { border-radius: 50% 50% 40% 60% / 40% 60% 50% 30%; }
	50% { border-radius: 36% 64% 70% 30% / 67% 33% 42% 58%; }
	100% { border-radius: 40% 60% 50% 50% / 60% 30% 40% 70%; }
}

@keyframes morph-4 {
	0% { border-radius: 60% 40% 50% 50% / 50% 50% 30% 70%; }
	50% { border-radius: 74% 26% 35% 65% / 36% 70% 30% 64%; }
	100% { border-radius: 50% 50% 60% 40% / 30% 70% 50% 50%; }
}

@keyframes float-drift {
	0% { translate: 0 0; rotate: -2deg; }
	100% { translate: 0 -22px; rotate: 3deg; }
}

@keyframes spore-float {
	0% { transform: translate(0, 0) scale(0.8); }
	100% { transform: translate(20px, -34px) scale(1.2); }
}

@keyframes glow-pulse {
	0%, 100% { opacity: 0.72; text-shadow: 0 0 8px rgba(124, 252, 0, 0.6), 0 0 24px rgba(124, 252, 0, 0.3), 0 0 48px rgba(124, 252, 0, 0.1); }
	50% { opacity: 1; text-shadow: 0 0 12px rgba(124, 252, 0, 0.8), 0 0 30px rgba(124, 252, 0, 0.4), 0 0 60px rgba(124, 252, 0, 0.15); }
}

@keyframes ring-breathe {
	0%, 100% { transform: scale(0.82); opacity: 0.35; }
	50% { transform: scale(1.08); opacity: 0.95; }
}

@keyframes rotate-slow {
	to { rotate: 360deg; }
}

@media (max-width: 760px) {
	.text-left,
	.text-right,
	.text-center {
		padding: 0 7vw;
	}

	.chamber-title {
		font-size: clamp(2.2rem, 14vw, 4rem);
	}

	.chamber-text {
		max-width: 86vw;
	}

	.floating-window {
		width: 108px;
		height: 122px;
	}

	.spirit {
		width: 260px;
		height: 260px;
	}
}