/* ==========================================================================
   LUNA LABS - Layout & Effects
   Grid background, CRT effects, animations, page structure
   ========================================================================== */

/* ==========================================================================
   1. LAYOUT & CONTAINER
   Full-width sections with max-width content areas
   ========================================================================== */
html {
	height: 100%;
	scroll-behavior: smooth;
	overflow-x: hidden;
	overscroll-behavior: none;
}

body {
	position: relative;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	background-color: var(--background);
	color: var(--foreground);
	min-height: 100%;
	width: 100%;
	margin: 0;
	overflow-x: clip;
	overscroll-behavior: none;
}

/* -----------------------------------------------------------------------------
   CRT-style Grid Background
   - Scrolling grid that moves with page content
   - Fixed vignette overlay fades grid toward window edges
   - Mouse-following glow effect on grid
   - Scanlines overlay for authentic CRT look
   ----------------------------------------------------------------------------- */

/* Scrolling grid background - full page width, scrolls with content */
.grid-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--document-height, 100%);
	min-height: 100vh;
	pointer-events: none;
	z-index: -3;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%23000' stroke-width='0.5' opacity='0.2'/%3E%3C/svg%3E");
	background-size: 40px 40px;
}

[data-theme="dark"] .grid-bg {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%23fff' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E");
}

/* -----------------------------------------------------------------------------
   Grid Stars & Constellations
   - Real NYC sky constellation data rendered on grid intersections
   - Only visible in dark mode (stars at night)
   - Includes SVG connecting lines between constellation stars
   - Aligns with existing 40px grid pattern
   ----------------------------------------------------------------------------- */

/* Container - hidden by default, shown only in dark mode */
.grid-stars {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--document-height, 100%);
	min-height: 100vh;
	pointer-events: none;
	z-index: -2;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.5s ease;
}

/* Only show stars in dark mode */
[data-theme="dark"] .grid-stars {
	opacity: 1;
}

/* Constellation connecting lines */
.constellation-lines {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.constellation-line {
	stroke: var(--text);
	stroke-width: 0.5;
	stroke-opacity: 0.06;
	fill: none;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: line-draw 2s ease-out forwards;
}

@keyframes line-draw {
	to {
		stroke-dashoffset: 0;
	}
}

/* Individual star styling */
.grid-star {
	position: absolute;
	width: 2px;
	height: 2px;
	background: var(--text);
	border-radius: 50%;
	opacity: 0;
	animation: star-fade-in 1s ease-out forwards;
}

/* Varying star sizes based on magnitude */
.grid-star--small {
	width: 1px;
	height: 1px;
}

.grid-star--large {
	width: 3px;
	height: 3px;
}

.grid-star--bright {
	width: 4px;
	height: 4px;
}

/* Glow effect variants */
.grid-star--glow-soft {
	box-shadow: 0 0 4px 1px var(--text);
}

.grid-star--glow-medium {
	box-shadow: 0 0 6px 2px var(--text);
}

.grid-star--glow-bright {
	box-shadow: 0 0 8px 3px var(--text);
}

/* Twinkle animation for select stars */
.grid-star--twinkle {
	animation: star-fade-in 1s ease-out forwards, star-twinkle 3s ease-in-out infinite 1s;
}

.grid-star--twinkle-slow {
	animation: star-fade-in 1s ease-out forwards, star-twinkle 5s ease-in-out infinite 1.5s;
}

@keyframes star-fade-in {
	from {
		opacity: 0;
		transform: scale(0);
	}
	to {
		opacity: var(--star-opacity, 0.4);
		transform: scale(1);
	}
}

@keyframes star-twinkle {
	0%, 100% {
		opacity: var(--star-opacity, 0.4);
	}
	50% {
		opacity: calc(var(--star-opacity, 0.4) * 0.3);
	}
}

/* Star opacity based on glow level */
.grid-star {
	--star-opacity: 0.4;
}

.grid-star--glow-soft {
	--star-opacity: 0.5;
}

.grid-star--glow-medium {
	--star-opacity: 0.6;
}

.grid-star--glow-bright {
	--star-opacity: 0.75;
}

/* Background stars - subtle filler stars without constellation connections */
.grid-star--background {
	--star-opacity: 0.12;
	width: 1px;
	height: 1px;
}

.grid-star--background.bg-bright {
	--star-opacity: 0.5;
	width: 2px;
	height: 2px;
	box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.4);
}

.grid-star--background.bg-medium {
	--star-opacity: 0.35;
	box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.25);
}

.grid-star--background.bg-dim {
	--star-opacity: 0.08;
}

/* Hide on mobile for performance */
@media (max-width: 768px) {
	.grid-stars {
		display: none;
	}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.grid-star {
		animation: none;
		opacity: var(--star-opacity, 0.4);
	}

	.grid-star--twinkle,
	.grid-star--twinkle-slow {
		animation: none;
	}

	.constellation-line {
		animation: none;
		stroke-dashoffset: 0;
	}
}

/* Fixed vignette overlay - fades grid toward window edges */
/* Uses viewport-fit: cover in HTML meta tag for Safari iOS rounded corners */
/* opacity: 0.99 is a Safari 26 workaround for fixed element compositing bug */
.grid-vignette {
	position: fixed;
	top: -50px;
	left: -50px;
	right: -50px;
	bottom: -50px;
	pointer-events: none;
	z-index: -1;
	opacity: 0.99;
	background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 20%, var(--background) 70%);
}

/* Mouse-following grid glow - illuminates the scrolling grid */
.grid-glow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--document-height, 100%);
	min-height: 100vh;
	pointer-events: none;
	z-index: -2;
	/* Grid pattern set dynamically via JS with variable stroke-width */
	background-size: 40px 40px;
	opacity: 0;
	/* Fixed mask - position updated via JS */
	-webkit-mask-image: radial-gradient(circle 100px at 50% 50%, black 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
	mask-image: radial-gradient(circle 100px at 50% 50%, black 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
	-webkit-mask-size: 240px 240px;
	mask-size: 240px 240px;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: -9999px -9999px;
	mask-position: -9999px -9999px;
}

/* Opacity controlled via JS for Safari compatibility */

/* Phosphor decay trail layers - fading afterglow */
.grid-glow-trail {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--document-height, 100%);
	min-height: 100vh;
	pointer-events: none;
	z-index: -2;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%23000' stroke-width='1.5' opacity='0.3'/%3E%3C/svg%3E");
	background-size: 40px 40px;
	opacity: 0;
	/* Fixed mask - position updated via JS */
	-webkit-mask-image: radial-gradient(circle 80px at 50% 50%, black 0%, transparent 100%);
	mask-image: radial-gradient(circle 80px at 50% 50%, black 0%, transparent 100%);
	-webkit-mask-size: 160px 160px;
	mask-size: 160px 160px;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: -9999px -9999px;
	mask-position: -9999px -9999px;
}

.grid-glow-trail.active {
	opacity: 1;
	animation: phosphor-decay 0.6s ease-out forwards;
}

@keyframes phosphor-decay {
	0% {
		opacity: 0.7;
	}

	100% {
		opacity: 0;
	}
}

[data-theme="dark"] .grid-glow-trail {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%23fff' stroke-width='1.5' opacity='0.25'/%3E%3C/svg%3E");
}

/* Hide glow on touch devices */
@media (hover: none) {

	.grid-glow,
	.grid-glow-trail {
		display: none;
	}
}

/* Disable heavy effects on mobile for performance */
@media (max-width: 768px) {
	body::after {
		/* Disable scanlines on mobile */
		background: none;
		animation: none;
	}

	.grid-glow,
	.grid-glow-trail {
		display: none;
	}
}

/* CRT Scanlines overlay - optimized for performance */
/* Uses viewport-fit: cover in HTML meta tag for Safari iOS rounded corners */
/* opacity: 0.99 is a Safari 26 workaround for fixed element compositing bug */
body::after {
	content: '';
	position: fixed;
	top: -50px;
	left: -50px;
	right: -50px;
	bottom: -50px;
	pointer-events: none;
	z-index: 9999;
	opacity: 0.99;
	background: repeating-linear-gradient(0deg,
			rgba(0, 0, 0, 0.03) 0px,
			rgba(0, 0, 0, 0.03) 1px,
			transparent 1px,
			transparent 2px);
	/* CRT screen curve - reduced blur for better performance (150px -> 60px) */
	box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.12);
	/* Slight border-radius to simulate CRT curvature */
	border-radius: 8px;
	/* Removed continuous animation - saves battery and reduces repaints */
}

/* Dark mode CRT curve - slightly more pronounced */
[data-theme="dark"] body::after {
	box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2);
}

/* -----------------------------------------------------------------------------
   Blueprint SVG Animations
   Subtle glow/pulse when blueprints enter viewport
   ----------------------------------------------------------------------------- */
.moon-bg,
.rocket-bg,
.earth-bg {
	transition: filter 0.6s ease, opacity 0.6s ease;
}

.moon-bg.in-view,
.rocket-bg.in-view,
.earth-bg.in-view {
	animation: blueprint-glow 3s ease-in-out infinite;
}

@keyframes blueprint-glow {
	0%, 100% {
		filter: brightness(1) drop-shadow(0 0 0 transparent);
	}
	50% {
		filter: brightness(1.05) drop-shadow(0 0 20px rgba(168, 42, 42, 0.15));
	}
}

[data-theme="dark"] .moon-bg.in-view,
[data-theme="dark"] .rocket-bg.in-view,
[data-theme="dark"] .earth-bg.in-view {
	animation: blueprint-glow-dark 3s ease-in-out infinite;
}

@keyframes blueprint-glow-dark {
	0%, 100% {
		filter: brightness(1) drop-shadow(0 0 0 transparent);
	}
	50% {
		filter: brightness(1.1) drop-shadow(0 0 25px rgba(239, 107, 107, 0.2));
	}
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {

	.home-content,
	.moon-bg,
	.earth-bg,
	.nav-dropdown {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	/* Disable phosphor trail animation */
	.grid-glow-trail,
	.grid-glow {
		display: none !important;
	}

	/* Disable photo hover animations */
	.photo-wrapper {
		transition: none !important;
	}

	.photo-wrapper:hover {
		transform: none !important;
	}

	/* Disable all transitions */
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* -----------------------------------------------------------------------------
   Page Load Animations (CSS-only, replaces GSAP)
   - Uses GPU-accelerated properties (opacity, transform)
   - Lightweight alternative to 50KB+ GSAP library
   ----------------------------------------------------------------------------- */
@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeInScale {
	from {
		opacity: 0;
		transform: scale(0.95);
	}

	to {
		opacity: 0.4;
		transform: scale(1);
	}
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(30px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Animation classes applied via JS */
.animate-fade-in {
	animation: fadeIn 1s ease-out 0.2s forwards;
}

.animate-fade-in-scale {
	animation: fadeInScale 1s ease-out 0.2s forwards;
}

.animate-slide-in-right {
	animation: slideInRight 0.6s ease-out 0.3s forwards;
}

/* -----------------------------------------------------------------------------
   Page Wrapper
   - Centers all content with max-width
   - Provides consistent edge padding on larger screens
   - Contains scrolling grid background
   ----------------------------------------------------------------------------- */
.page-wrapper {
	position: relative;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	min-height: 100vh;
	overflow-x: clip;
}


/* -----------------------------------------------------------------------------
   Section Base
   - Full viewport width
   - Contains max-width content area
   ----------------------------------------------------------------------------- */
section {
	position: relative;
	width: 100%;
	padding: 6rem 0;
}

/* Content container within sections - respects max-width */
.section-content {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
	position: relative;
	z-index: 2;
}

/* ==========================================================================
   2. SCROLL PROGRESS INDICATOR
   Fixed bar at top of viewport showing scroll progress
   ========================================================================== */
.scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 0%;
	height: 2px;
	background: var(--accent);
	z-index: 10001;
	transition: width 0.1s linear;
}

/* ==========================================================================
   3. COLOR BLEED EFFECT
   Localized chromatic aberration that follows mouse cursor
   Clean edge bleed only (red/cyan split)
   ========================================================================== */
.color-bleed {
	position: relative;
	/* Mouse position - set via JavaScript */
	--bleed-x: -200px;
	--bleed-y: -200px;
	/* Effect radius */
	--bleed-radius: 70px;
}

/* Pseudo-element creates the localized color bleed overlay */
.color-bleed::before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	/* Transparent text - only shadows visible */
	-webkit-text-fill-color: transparent;
	color: transparent;
	/* Chromatic aberration - blood red to orange warm bleed */
	text-shadow:
		/* Left edge - BLOOD RED (#b53030) dominant */
		-2px 0 0 rgba(181, 48, 48, 0.6),
		-3.5px 0 1px rgba(181, 48, 48, 0.3),
		/* Right edge - ORANGE (#e07030) warm complement */
		2px 0 0 rgba(224, 112, 48, 0.5),
		3.5px 0 1px rgba(232, 128, 56, 0.25);
	/* Radial mask - reveals effect only near cursor */
	-webkit-mask-image: radial-gradient(circle var(--bleed-radius) at var(--bleed-x) var(--bleed-y),
			black 0%,
			rgba(0, 0, 0, 0.5) 50%,
			transparent 100%);
	mask-image: radial-gradient(circle var(--bleed-radius) at var(--bleed-x) var(--bleed-y),
			black 0%,
			rgba(0, 0, 0, 0.5) 50%,
			transparent 100%);
	pointer-events: none;
	/* Place BEHIND the original text so shadows only show at edges */
	z-index: -1;
}

/* Light mode - reduced intensity for dark text */
:root:not([data-theme="dark"]) .color-bleed::before {
	text-shadow:
		/* Left edge - BLOOD RED (#b53030) */
		-2px 0 0 rgba(181, 48, 48, 0.3),
		-3.5px 0 1px rgba(181, 48, 48, 0.15),
		/* Right edge - BURNT ORANGE (#c05818) */
		2px 0 0 rgba(192, 88, 24, 0.25),
		3.5px 0 1px rgba(208, 104, 32, 0.1);
}

/* Disable on touch devices and when reduced motion preferred */
@media (hover: none),
(prefers-reduced-motion: reduce) {
	.color-bleed::before {
		display: none;
	}
}

/* ==========================================================================
   3b. DOPPLER CHROMATIC SPLIT
   Directional color trails based on scroll velocity
   Scroll down → red trails | Scroll up → cyan trails
   Inspired by astronomical Doppler effect & chromatic aberration
   ========================================================================== */

/*
   CSS variables set by JavaScript:
   --doppler-strength: 0-1 scalar (intensity based on scroll speed)
   --doppler-red-y: computed red shadow Y offset (px)
   --doppler-cyan-y: computed cyan shadow Y offset (px)
   --doppler-blur: computed blur radius (px)
   --doppler-opacity: computed shadow opacity (0-1)
*/
:root {
	--doppler-strength: 0;
	--doppler-red-y: 0px;
	--doppler-cyan-y: 0px;
	--doppler-blur: 0px;
	--doppler-opacity: 0;
}

/* Text elements: vertical chromatic split (inertia effect) */
.traction-stat-number,
.stat-number {
	text-shadow:
		0 var(--doppler-red-y) var(--doppler-blur) rgb(255 70 70 / var(--doppler-opacity)),
		0 var(--doppler-cyan-y) var(--doppler-blur) rgb(70 200 255 / var(--doppler-opacity));
}

/* CTA button and mailto links: chromatic split */
.cta-button,
a[href^="mailto"] {
	text-shadow:
		0 var(--doppler-red-y) var(--doppler-blur) rgb(255 70 70 / var(--doppler-opacity)),
		0 var(--doppler-cyan-y) var(--doppler-blur) rgb(70 200 255 / var(--doppler-opacity));
}

/* Non-text accents: drop-shadow filter for chromatic edge */
.scroll-progress,
.sputnik-accent {
	filter:
		drop-shadow(0 var(--doppler-red-y) var(--doppler-blur) rgb(255 70 70 / var(--doppler-opacity)))
		drop-shadow(0 var(--doppler-cyan-y) var(--doppler-blur) rgb(70 200 255 / var(--doppler-opacity)));
}

/* Disable Doppler effect when reduced motion preferred */
@media (prefers-reduced-motion: reduce) {
	.scroll-progress,
	.cta-button,
	.traction-stat-number,
	.stat-number,
	.sputnik-accent,
	a[href^="mailto"] {
		text-shadow: none !important;
		filter: none !important;
	}
}

/* ==========================================================================
   3c. SPUTNIK ACCENT ELEMENT
   Small decorative satellite near navigation
   "First signal from space" - navigation helps you find your way
   ========================================================================== */

.sputnik-accent {
	position: absolute;
	top: 2rem;
	left: 2rem;
	width: 36px;
	height: 36px;
	pointer-events: none;
	z-index: 10;
	color: var(--text);
	opacity: 0.5;
	transition: opacity 0.3s ease, transform 0.5s ease;
}

/* Antenna pulse animation - transmitting signal */
.sputnik-antenna {
	opacity: 0.5;
	animation: sputnik-pulse 2.5s ease-in-out infinite;
}

.sputnik-antenna:nth-child(4) { animation-delay: 0.6s; }
.sputnik-antenna:nth-child(5) { animation-delay: 1.2s; }
.sputnik-antenna:nth-child(6) { animation-delay: 1.8s; }

@keyframes sputnik-pulse {
	0%, 100% { opacity: 0.3; }
	50% { opacity: 0.9; }
}

/* Subtle rotation on hover */
.sputnik-accent:hover {
	opacity: 0.7;
	transform: rotate(5deg);
}

/* Dark mode - more visible */
[data-theme="dark"] .sputnik-accent {
	opacity: 0.6;
}

[data-theme="dark"] .sputnik-accent:hover {
	opacity: 0.8;
}

/* Tablet */
@media (max-width: 768px) {
	.sputnik-accent {
		width: 30px;
		height: 30px;
		top: 1.5rem;
		left: 1.5rem;
	}
}

/* Mobile */
@media (max-width: 480px) {
	.sputnik-accent {
		width: 28px;
		height: 28px;
		top: 1rem;
		left: 1.25rem;
	}
}

/* Small mobile */
@media (max-width: 380px) {
	.sputnik-accent {
		top: 0.75rem;
		left: 1rem;
	}
}

/* Disable animation when reduced motion preferred */
@media (prefers-reduced-motion: reduce) {
	.sputnik-antenna {
		animation: none;
		opacity: 0.4;
	}
	.sputnik-accent:hover {
		transform: none;
	}
}

/* ==========================================================================
   4. RESPONSIVE - iPad Landscape Layout Adjustments
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1200px) {

	/* Allow content to dictate page height */
	html,
	body {
		height: auto;
		min-height: auto;
	}

	.page-wrapper {
		min-height: auto;
	}

	/* Grid background - override JS height variable on iPad */
	.grid-bg,
	.grid-glow,
	.grid-glow-trail {
		height: 100% !important;
		min-height: 0 !important;
	}

	/* Reduce section min-height to allow content to dictate height */
	section {
		min-height: auto;
		padding: 6rem 0;
	}
}

@media (max-width: 768px) {
	.section-content {
		padding: 0 1.5rem;
	}
}

@media (max-width: 480px) {
	.section-content {
		padding: 0 1.25rem;
	}
}

@media (max-width: 360px) {
	.section-content {
		padding: 0 1rem;
	}
}