/* --- Global Setup & Hyper-Theme --- */
:root {
	--bg-color: #050208; /* Near black purple */
	--glow-1: #00ffff; /* Cyan */
	--glow-2: #ff00ff; /* Magenta */
	--glow-3: #ffff00; /* Yellow */
	--glow-4: #00ff00; /* Lime */

	/* Dynamic Mouse & Time Variables (Updated by JS) */
	--mouse-x: 0.5; /* Normalized 0-1 */
	--mouse-y: 0.5; /* Normalized 0-1 */
	--pointer-x: 0px; /* Raw pixels */
	--pointer-y: 0px; /* Raw pixels */
	--mouse-dist: 0.5; /* Normalized distance from center 0-1 */
	--time: 0; /* Constantly incrementing */
	--scroll-y: 0; /* Normalized scroll position 0-1 */

	/* Config */
	--particle-count: 150; /* JS uses this */
	--max-layers: 4;
}

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

html {
	/* Force scrollbar to calculate height correctly */
	height: 200vh; /* Make page intentionally scrollable */
	will-change: auto;
}

body {
	background-color: var(--bg-color);
	color: #eee;
	font-family: "Roboto Mono", monospace;
	min-height: 100%; /* Ensure body takes at least full scrollable height */
	overflow: hidden; /* Hide direct body scrollbar, manage scroll via JS var */
	position: fixed; /* Prevent default scroll */
	width: 100%;
	cursor: none; /* Hide default cursor */
}

/* --- Layering System --- */
.layer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none; /* Layers don't block interaction */
}
.layer-content {
	width: 100%;
	height: 100%;
	position: relative;
	pointer-events: auto; /* Content within layers can be interactive */
}

/* --- Layer 0: Deep Background FX --- */
#layer-0 {
	z-index: 0;
}
.background-grid {
	position: absolute;
	top: calc(var(--mouse-y) * -50px - 50%); /* Move with mouse */
	left: calc(var(--mouse-x) * -50px - 50%);
	width: 200%;
	height: 200%;
	background-image: linear-gradient(to right, rgba(var(--glow-1), 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(var(--glow-1), 0.1) 1px, transparent 1px);
	background-size: calc(50px + var(--mouse-dist) * 50px) calc(50px + var(--mouse-dist) * 50px); /* Grid size reacts to mouse dist from center */
	opacity: calc(0.5 - var(--mouse-dist) * 0.4); /* Fade grid near center */
	transform: rotate(calc(var(--time) * 5deg)) scale(calc(1 + var(--scroll-y) * 0.2)); /* Slow rotation + scroll zoom */
	transition: background-size 0.5s ease-out, opacity 0.5s ease-out;
	will-change: background-size, opacity, transform;
}
.background-gradient-mesh {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at calc(var(--mouse-x) * 100%) calc(var(--mouse-y) * 100%), hsla(calc(var(--time) * 10), 100%, 50%, 0.2), /* Hue rotates */ transparent 60%), radial-gradient(circle at calc((1 - var(--mouse-x)) * 100%) calc((1 - var(--mouse-y)) * 100%), hsla(calc(var(--time) * 10 + 180), 100%, 50%, 0.15), /* Opposite hue/pos */ transparent 70%);
	mix-blend-mode: screen; /* Brighten overlaps */
	filter: blur(calc(20px + var(--mouse-dist) * 30px)); /* Blur increases away from center */
	transform: scale(calc(1 + var(--mouse-dist) * 0.1)); /* Slight scale with distance */
	transition: filter 0.4s ease-out, transform 0.4s ease-out;
	will-change: filter, transform;
}

/* --- Layer 1: Particle Field (JS Populated) --- */
#layer-1 {
	z-index: 1;
}
#particle-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.particle {
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--glow-2);
	box-shadow: 0 0 6px var(--glow-2), 0 0 10px var(--glow-2);
	opacity: 0;
	/* JS will set initial transform and animation */
	/* Example CSS vars JS might set per particle: */
	/* --vx, --vy (velocity), --life, --depth, --hue */
	will-change: transform, opacity;
	transition: transform 0.1s linear; /* Smooth JS updates slightly */
}

/* --- Layer 2: Central Element / Interactive Core --- */
#layer-2 {
	z-index: 10;
	pointer-events: auto;
} /* Allow interaction */
.core-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) translateZ(0); /* Center */
	perspective: 1000px;
	width: 300px;
	height: 300px;
}
.core-object {
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	position: relative;
	animation: coreFloat 15s infinite ease-in-out;
	will-change: transform;
	cursor: pointer;
}
.core-face {
	position: absolute;
	top: 10%;
	left: 10%; /* Slightly inset */
	width: 80%;
	height: 80%;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #fff, transparent 50%);
	opacity: 0.5;
	mix-blend-mode: screen;
	transform-style: preserve-3d;
}
/* Multiple nested, rotating, reacting faces */
.core-face-1 {
	background-color: var(--glow-1);
	transform: rotateY(calc(var(--time) * 15deg)) rotateX(calc(var(--time) * 10deg)) translateZ(0px);
	animation: facePulse 3s infinite ease-in-out alternate;
	--base-hue: 180; /* Cyan */
}
.core-face-2 {
	background-color: var(--glow-2);
	transform: rotateY(calc(var(--time) * -12deg + 60deg)) rotateX(calc(var(--time) * 8deg + 30deg)) translateZ(calc(sin(var(--time)) * 20px)); /* Use JS time for Z oscillation */
	animation: facePulse 3.5s infinite ease-in-out alternate -0.5s;
	border-radius: 30% 70% 50% 50%;
	--base-hue: 300; /* Magenta */
}
.core-face-3 {
	background-color: var(--glow-3);
	transform: rotateY(calc(var(--time) * 10deg + 120deg)) rotateX(calc(var(--time) * -15deg + 60deg)) translateZ(calc(cos(var(--time)) * 20px));
	animation: facePulse 4s infinite ease-in-out alternate -1s;
	border-radius: 50% 50% 30% 70%;
	opacity: 0.4;
	--base-hue: 60; /* Yellow */
}

/* Face interaction: React to mouse distance from center */
.core-object:hover .core-face {
	filter: brightness(1.5) hue-rotate(calc((0.5 - var(--mouse-dist)) * 90deg)); /* Brighten/shift hue when mouse near center */
	transform: scale(calc(1 + (0.5 - var(--mouse-dist)) * 0.2)) rotateZ(calc((0.5 - var(--mouse-dist)) * 45deg)) translateZ(calc(var(--mouse-dist) * 50px)); /* Scale up/rotate/push back near center */
	transition: filter 0.3s ease-out, transform 0.3s ease-out;
}
/* Add pseudo elements for more layers */
.core-face::before {
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: inherit;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 60%);
	filter: blur(5px);
	transform: translateZ(5px);
	animation: innerSpin 5s infinite linear reverse;
}
.core-face::after {
	content: "";
	position: absolute;
	inset: -10px;
	border-radius: inherit;
	border: 1px solid hsla(var(--base-hue), 100%, 70%, calc(0.1 + var(--mouse-dist) * 0.3)); /* Border opacity reacts */
	mix-blend-mode: screen;
	transform: translateZ(-5px) rotate(calc(var(--time) * -10deg));
	animation: outerWave 6s infinite ease-in-out;
}

@keyframes coreFloat {
	0%,
	100% {
		transform: translateY(-10px) rotateX(5deg) rotateY(-5deg);
	}
	50% {
		transform: translateY(10px) rotateX(-5deg) rotateY(10deg);
	}
}
@keyframes facePulse {
	from {
		opacity: 0.3;
		filter: brightness(0.8) saturate(1);
	}
	to {
		opacity: 0.6;
		filter: brightness(1.2) saturate(1.5);
	}
}
@keyframes innerSpin {
	to {
		transform: translateZ(5px) rotate(360deg);
	}
}
@keyframes outerWave {
	0%,
	100% {
		transform: translateZ(-5px) rotate(calc(var(--time) * -10deg)) scale(1);
	}
	50% {
		transform: translateZ(-5px) rotate(calc(var(--time) * -10deg)) scale(1.05);
	}
}

/* --- Layer 3: Hyper Text --- */
#layer-3 {
	z-index: 20;
	pointer-events: auto;
} /* Make text selectable */
.hyper-text-container {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80vw;
	transform: translate(-50%, -50%) rotateX(calc((var(--mouse-y) - 0.5) * -30deg)) rotateY(calc((var(--mouse-x) - 0.5) * 30deg)); /* Tilt with mouse */
	text-align: center;
	perspective: 800px;
	transition: transform 0.3s ease-out;
}
.hyper-text {
	font-family: "Orbitron", sans-serif;
	font-size: clamp(2rem, 10vw, 6rem); /* Responsive */
	font-weight: 900;
	color: transparent; /* Hide base text */
	position: relative;
	display: inline-block; /* Needed for transforms */
	transform-style: preserve-3d;
	cursor: text;
}
.hyper-text span {
	/* Each letter wrapped in span */
	display: inline-block; /* Allow transform */
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease;
	will-change: transform, color;
	/* Base animation */
	animation: letterWobble 5s infinite ease-in-out var(--delay); /* Delay set by JS */
	/* Interaction via JS vars */
	transform: translateZ(calc(var(--dist-norm, 1) * -100px)) /* Push back far letters */ rotateY(calc(var(--angle-norm, 0) * 60deg)) /* Rotate letters based on angle to mouse */ translateY(calc(sin(var(--time) * 2 + var(--delay) * 10) * (1 - var(--dist-norm, 1)) * 15px)); /* Bob based on time and distance */
	color: hsl(calc(180 + var(--angle-norm, 0) * 180), 100%, calc(60% + (1 - var(--dist-norm, 1)) * 30%)); /* Color based on angle/distance */
}
.hyper-text span::before,
.hyper-text span::after {
	content: attr(data-char); /* Show letter content */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	will-change: transform, text-shadow, color;
}
.hyper-text span::before {
	/* Main visible letter */
	color: inherit; /* Use span's calculated color */
	text-shadow: 0 0 5px currentColor, 0 0 10px var(--glow-1), 0 0 15px var(--glow-2);
	transform: translateZ(calc((1 - var(--dist-norm, 1)) * 2px)); /* Slight Z push when near */
}
.hyper-text span::after {
	/* Chromatic Aberration / Glitch layer */
	color: var(--glow-4); /* Lime */
	mix-blend-mode: screen;
	opacity: calc((1 - var(--dist-norm, 1)) * 0.7); /* More visible when close */
	transform: translate(calc(var(--dx-norm, 0) * 5px), calc(var(--dy-norm, 0) * 5px)) /* Offset based on direction */ translateZ(-2px) skew(calc(var(--dx-norm, 0) * 10deg), calc(var(--dy-norm, 0) * -10deg)); /* Skew based on direction */
	text-shadow: 0 0 5px var(--glow-4);
	filter: blur(1px);
}

@keyframes letterWobble {
	0%,
	100% {
		transform: rotateZ(0deg) scale(1);
	}
	25% {
		transform: rotateZ(-3deg) scale(1.02);
	}
	75% {
		transform: rotateZ(3deg) scale(0.98);
	}
}

/* --- Layer 4: Foreground / UI Elements (e.g., Custom Cursor) --- */
#layer-4 {
	z-index: 1000;
	pointer-events: none;
} /* Highest layer */
.custom-cursor {
	position: fixed; /* Follows viewport */
	left: var(--pointer-x); /* Positioned by JS */
	top: var(--pointer-y);
	width: 30px;
	height: 30px;
	border: 2px solid var(--glow-3);
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(1); /* Center on pointer */
	transition: transform 0.1s ease-out, border-color 0.2s ease, background-color 0.2s ease, width 0.2s ease, height 0.2s ease;
	mix-blend-mode: difference; /* Invert colors below */
	will-change: transform, border-color, background-color, width, height;
}
.custom-cursor::before {
	/* Inner dot */
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	background: var(--glow-3);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: background-color 0.2s ease;
}
body:active .custom-cursor {
	/* Scale down slightly on click */
	transform: translate(-50%, -50%) scale(0.8);
	background-color: rgba(var(--glow-3), 0.3);
}
/* Change cursor appearance when hovering interactive elements */
body[data-interactive-hover="true"] .custom-cursor {
	transform: translate(-50%, -50%) scale(1.3);
	border-color: var(--glow-4);
	background: rgba(var(--glow-4), 0.2);
}
body[data-interactive-hover="true"] .custom-cursor::before {
	background-color: var(--glow-4);
}

/* --- Scroll Indicator (Subtle) --- */
.scroll-hint {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.3);
	font-size: 0.8em;
	animation: hintPulse 2s infinite ease-in-out;
	opacity: calc(1 - var(--scroll-y) * 2); /* Fade out as user scrolls */
	transition: opacity 0.3s ease;
	z-index: 5;
}
@keyframes hintPulse {
	0%,
	100% {
		opacity: 0.3;
	}
	50% {
		opacity: 0.6;
	}
}

/* --- Accessibility: Reduce Motion --- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		will-change: auto !important; /* Remove hints */
	}
	html {
		height: auto;
	} /* Allow normal scroll */
	body {
		position: static;
		overflow: auto;
		cursor: auto;
	} /* Normal scroll, normal cursor */
	.layer {
		position: absolute;
		height: 100vh;
	} /* Basic static layout */
	#layer-0,
	#layer-1,
	#layer-4 {
		display: none;
	} /* Hide background FX, particles, cursor */
	.core-container {
		position: relative;
		top: 50vh;
		left: 0;
		transform: translateY(-50%);
	} /* Center core roughly */
	.core-face {
		opacity: 0.8;
		transform: none;
		filter: none;
	}
	.core-face::before,
	.core-face::after {
		display: none;
	}
	.hyper-text-container {
		position: relative;
		top: auto;
		left: 0;
		transform: none;
		padding: 50px 0;
	}
	.hyper-text span {
		transform: none;
		color: var(--glow-1);
		opacity: 1;
	}
	.hyper-text span::before {
		color: var(--glow-1);
		text-shadow: none;
		transform: none;
	}
	.hyper-text span::after {
		display: none;
	}
	.scroll-hint {
		display: none;
	}
	/* Ensure text is visible */
	.hyper-text {
		color: var(--glow-1);
	}
}