:root {
	--stage-bg: #090a08;
	--crossfade: 2.6s;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body { background: var(--stage-bg); overflow: hidden; }

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	white-space: nowrap;
	clip: rect(0, 0, 0, 0);
}

/* The stage is a fixed dark field the wordmark sits in as negative space. */
.stage {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 100dvh;
	overflow: hidden;
	padding: clamp(20px, 5vw, 96px) calc(env(safe-area-inset-right, 0px) + clamp(20px, 5vw, 96px))
		clamp(20px, 5vw, 96px) calc(env(safe-area-inset-left, 0px) + clamp(20px, 5vw, 96px));
	position: relative;
	width: 100vw;
}


/* The cutout box's aspect ratio is derived from the letters' actual measured
   pixel bounding box in the source artwork (x:270-3329, y:1500-2099 of a
   3600x3600 canvas, centered), plus uniform clear-space padding — not eyeballed. */
.cutout {
	aspect-ratio: 3.565 / 1;
	height: auto;
	max-height: 70vh;
	opacity: 0;
	position: relative;
	/* A strong ease-in: bright footage over black already reads as "mostly
	   revealed" at moderate opacity, so the curve stays low for most of the
	   duration and only ramps up sharply near the end — a held, flat color
	   first, then the image arriving, rather than a quick even fade. */
	transition: opacity 2.6s cubic-bezier(0.85, 0, 0.98, 0.35);
	width: min(74vw, 1500px);
}

/* The page opens on a plain dark field — the wordmark only fades in once the
   first clip is actually ready, instead of popping in with the page load. */
.cutout.is-revealed { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.cutout { transition-duration: 0.4s; }
}

.reel {
	background: linear-gradient(160deg, #1b2b22, #0d1712);
	inset: 0;
	overflow: hidden;
	position: absolute;

	/* The exact wordmark geometry, used as a luminance mask: white letters stay
	   visible, the black field around them hides everything underneath. Size/
	   position are computed from the measured bounding box above, not guessed —
	   "center center" because the letters sit dead-center in the square canvas. */
	-webkit-mask-image: url("images/logo/ZOHEH Logo White.jpg");
	mask-image: url("images/logo/ZOHEH Logo White.jpg");
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 105.3% auto;
	mask-size: 105.3% auto;
	mask-mode: luminance;
}

/* Opacity (the crossfade) lives on the slot; the transform (the cinematic
   push) lives on the video inside it. Splitting them means the slow drift
   never fights with, or gets reset by, the fade — see script.js's driftClip. */
.clip-slot {
	inset: 0;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	transition: opacity var(--crossfade) ease;
}

.clip-slot.is-active { opacity: 1; }

.clip-video {
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
	width: 100%;
	will-change: transform;
}

/* Darkens the edges of whatever is visible through the letters, so nothing behind
   ever fully resolves — the "almost reveals, never quite" read the page is built on. */
.reel-vignette {
	background: radial-gradient(120% 90% at 50% 50%, transparent 45%, rgba(0, 0, 0, 0.55) 100%);
	inset: 0;
	pointer-events: none;
	position: absolute;
}

/* A brief, gentle dip in brightness during each crossfade — masks the exposure
   mismatch between clips (a bright rocky peak vs. a dim lake at dusk) the way a
   dissolve-through-black would in film editing, instead of a raw hard cut. */
.reel-veil {
	background: #000;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 1.3s ease;
}

.reel-veil.is-boosted { opacity: 0.32; }

.reel.is-static .clip-slot { display: none; }

@media (prefers-reduced-motion: reduce) {
	.clip-video { transition: none !important; transform: none !important; }
}

/* Desktop: wide, letterboxed, generous negative space around the wordmark. */
@media (min-width: 768px) {
	.stage { padding: clamp(24px, 6vw, 120px); }
	.cutout { width: min(72vw, 1500px); }
}

/* Phone: the wordmark fills nearly the full width, portrait-friendly framing. */
@media (max-width: 767px) {
	.stage { padding: 18px; }
	.cutout {
		max-height: 50vh;
		width: min(96vw, 640px);
	}
	.reel-vignette { background: radial-gradient(140% 100% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.6) 100%); }
}

@media (max-width: 767px) and (orientation: landscape) {
	.cutout { max-height: 60vh; width: min(80vw, 900px); }
}