/* ==========================================================================
   XDC 3D TITLE SEQUENCE STYLES
   ========================================================================== */

:root {
	--xdc-copper: #c86343;
	--xdc-copper-glow: rgba(200, 99, 67, 0.45);
	--xdc-gold: #f59e0b;
	--xdc-laser-cyan: #38bdf8;
	--xdc-celluloid-dark: #07080a;
	--xdc-celluloid-border: rgba(245, 242, 235, 0.12);
	--xdc-subtext: #9ca3af;
}

/* Master wrapper - defines total scroll distance for the 3D prologue */
.hero-title-sequence {
	position: relative;
	width: 100%;
	height: 380vh; /* Scrollytelling track length */
	background: var(--xdc-celluloid-dark);
}

/* Pinned WebGL canvas viewport - stays fixed while user scrolls through 380vh */
#webgl-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	height: 100svh;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
	transition: opacity 300ms ease, visibility 300ms ease;
}

#webgl-container canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* WebGL Fallback Backdrop (Zero Layout Shift & Graceful Degradation) */
.hero-fallback-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	background-color: var(--xdc-celluloid-dark, #07080a);
	background-image:
		radial-gradient(ellipse at center, rgba(7, 8, 10, 0.4) 0%, rgba(7, 8, 10, 0.95) 100%),
		url('../stills/xdc_still_lens.jpg');
	background-size: cover;
	background-position: center;
	transition: opacity 600ms ease;
}

.hero-title-sequence.no-webgl .hero-fallback-backdrop {
	opacity: 1;
	animation: ambientCinematicZoom 24s ease-in-out infinite alternate;
}

@keyframes ambientCinematicZoom {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.05);
	}
}

.hero-title-sequence.no-webgl #webgl-container {
	display: none !important;
}

/* Authentic Optical Lens Vignette & Celluloid Roll-Off */
.film-vignette {
	position: fixed;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background:
		radial-gradient(ellipse at center, rgba(7, 8, 10, 0) 38%, rgba(7, 8, 10, 0.58) 72%, rgba(7, 8, 10, 0.94) 100%),
		linear-gradient(180deg, rgba(7, 8, 10, 0.4) 0%, transparent 18%, transparent 82%, rgba(7, 8, 10, 0.95) 100%);
	transition: opacity 300ms ease;
}

/* Camera HUD Overlay (ARRI Alexa / Film Viewfinder Metadata) */
.camera-hud {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	height: 100svh;
	z-index: 4;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(4.8rem, 7vw, 5.8rem) clamp(1.5rem, 4vw, 3.2rem) clamp(1.2rem, 3vw, 2.2rem);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	font-size: clamp(9px, 1vw, 11px);
	letter-spacing: 0.16em;
	color: rgba(245, 242, 235, 0.48);
	text-transform: uppercase;
	transition: opacity 350ms ease;
}

.camera-hud.hud-hidden {
	opacity: 0;
}

.hud-top,
.hud-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.hud-rec {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--xdc-color-text);
	font-weight: 700;
}

.hud-rec-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--xdc-color-accent-hot, #dc3a2a);
	box-shadow: 0 0 10px var(--xdc-color-accent-hot, #dc3a2a);
	animation: hudPulse 1.8s ease-in-out infinite;
}

@keyframes hudPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.35; transform: scale(0.85); }
}

.hud-center-tag {
	color: rgba(245, 242, 235, 0.72);
	font-weight: 600;
}

.hud-crosshair {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 24px;
	height: 24px;
	pointer-events: none;
	opacity: 0.22;
}

.hud-crosshair::before,
.hud-crosshair::after {
	content: "";
	position: absolute;
	background: #f5f2eb;
}

.hud-crosshair::before {
	top: 11px;
	left: 0;
	width: 24px;
	height: 1px;
}

.hud-crosshair::after {
	left: 11px;
	top: 0;
	width: 1px;
	height: 24px;
}

#hud-timecode {
	color: #f5f2eb;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

#hud-dna-status {
	color: var(--xdc-copper);
	font-weight: 600;
}

/* Scroll Track (provides 380vh scroll space inside document) */
.scroll-track {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Narrative Overlay Scenes (Fixed typography during scroll stages) */
.narrative-scene {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	height: 100svh;
	z-index: 5;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding-inline: clamp(1.5rem, 5vw, 4rem);
	max-width: 980px;
	margin: 0 auto;
	right: 0;
	opacity: 0;
	transform: translateY(20px);
will-change: transform, opacity;
	pointer-events: none;
}

.narrative-scene.active {
	display: flex;
}

.narrative-scene .kicker {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: clamp(0.72rem, 1.1vw, 0.82rem);
	font-weight: 700;
	letter-spacing: 0.22em;
	color: var(--xdc-copper);
	text-transform: uppercase;
	margin: 0 0 1.2rem;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}

.narrative-scene .kicker::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 1px;
	background: currentColor;
	opacity: 0.8;
}

.narrative-title {
	font-family: var(--xdc-font-body);
	font-size: clamp(2.6rem, 6.2vw, 5.6rem);
	font-weight: 700;
	line-height: 0.96;
	letter-spacing: -0.025em;
	color: #f4f1ea;
	margin: 0 0 1.6rem;
	max-width: 1000px;
	text-transform: uppercase;
	text-shadow: 0 4px 28px rgba(0, 0, 0, 0.75);
}

.narrative-subtitle {
	font-size: clamp(1.05rem, 1.8vw, 1.25rem);
	font-weight: 400;
	line-height: 1.65;
	color: var(--xdc-subtext);
	max-width: 600px;
	margin: 0 auto;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}

/* Floating Interactive Studio Dock - Hidden for pure cinematic immersion */
.controls-dock {
	display: none !important;
}

/* Subsequent Sections Layering - they slide over the fixed canvas when reaching 380vh */
.home-section,
.site-footer {
	position: relative;
	z-index: 20;
	background: var(--xdc-celluloid-dark, #07080a);
}

.home-manifest {
	position: relative;
	z-index: 20;
	background: #07080a;
	box-shadow: 0 -50px 120px rgba(7, 8, 10, 0.98);
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.hero-title-sequence {
		height: 340vh;
	}

	.camera-hud {
		padding: clamp(4.5rem, 6vw, 5rem) 1rem 1rem;
	}

	.hud-tech-meta,
	.hud-scroll-hint {
		display: none;
	}

	.narrative-scene {
		padding-inline: 1.25rem;
		max-width: 100%;
	}

	.narrative-title {
		font-size: clamp(2.2rem, 8vw, 3.4rem);
	}
}

/* Give phone viewfinder labels breathing room below the 72px header. */
@media (max-width: 720px) {
	.camera-hud {
		padding-top: 6rem;
		padding-right: max(1.5rem, env(safe-area-inset-right, 0px));
		padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
		padding-left: max(1.5rem, env(safe-area-inset-left, 0px));
	}

	.hud-top,
	.hud-bottom {
		gap: 1rem;
		align-items: flex-start;
		line-height: 1.5;
	}

	.hud-rec,
	#hud-timecode {
		flex-shrink: 0;
		white-space: nowrap;
	}

	.hud-center-tag,
	#hud-dna-status {
		min-width: 0;
		text-align: right;
	}
}

/* Short landscape viewports need a composition based on height, not width. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1100px) {
	.hero-title-sequence {
		--xdc-landscape-offset: 0.75rem;
	}

	.camera-hud {
		padding: 5rem var(--xdc-landscape-right) calc(1.5rem - var(--xdc-landscape-offset) + env(safe-area-inset-bottom, 0px)) var(--xdc-landscape-left);
	}

	.hud-tech-meta,
	.hud-scroll-hint {
		display: none;
	}

	.hud-center-tag,
	#hud-dna-status {
		margin-inline-start: auto;
		display: block;
		max-width: calc(100% - 9rem);
		min-width: 0;
		text-align: right;
	}

	.hud-top,
	.hud-bottom {
		gap: 1rem;
	}

	#webgl-container,
	.hero-fallback-backdrop {
		top: calc(5rem + var(--xdc-landscape-offset));
		left: calc(var(--xdc-landscape-left) + var(--xdc-landscape-width) * 0.55);
		right: var(--xdc-landscape-right);
		bottom: calc(3.25rem - var(--xdc-landscape-offset) + env(safe-area-inset-bottom, 0px));
		width: auto;
		height: auto;
	}

	.film-vignette {
		background: linear-gradient(90deg, #07080a 0%, rgba(7, 8, 10, 0.92) 45%, transparent 65%), linear-gradient(180deg, transparent 75%, #07080a 100%);
	}

	.hud-crosshair {
		left: calc(var(--xdc-landscape-left) + var(--xdc-landscape-width) * 0.775);
		top: calc(50% + var(--xdc-landscape-offset));
	}

	.narrative-scene {
		left: var(--xdc-landscape-left);
		width: calc(var(--xdc-landscape-width) * 0.55);
		right: auto;
		align-items: flex-start;
		text-align: left;
		padding: calc(6.5rem + var(--xdc-landscape-offset)) 1.25rem calc(3.25rem - var(--xdc-landscape-offset) + env(safe-area-inset-bottom, 0px)) 0;
		max-width: 100%;
	}

	.narrative-scene .kicker {
		font-size: 0.625rem;
		letter-spacing: 0.12em;
		margin-bottom: 0.5rem;
	}

	.narrative-title {
		font-size: clamp(1.25rem, 3.2vw, 2rem);
		line-height: 1.06;
		margin-bottom: 0.625rem;
	}

	.narrative-subtitle {
		font-size: clamp(0.75rem, 1.65vw, 0.875rem);
		line-height: 1.4;
		max-width: 30rem;
		margin-inline: 0;
	}
}