/**
 * VHS tape-insert intro — fullscreen clip -> cut to black -> reveal the
 * real page. Front page only (see functions.php's is_front_page() gate).
 */
html.vhs-intro-active,
html.vhs-intro-active body {
	overflow: hidden; /* lock scroll while the intro plays */
}

#vhs-intro-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999; /* above everything, including .vhs-glass (400) and .vhs-controls (402) */
	background: #000;
	cursor: pointer; /* click-anywhere-to-skip affordance */
}

#vhs-intro-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; /* fullscreen crop, no letterboxing on mismatched aspect ratios */
	background: #000;
}
/* iPhone: the source clip's aspect ratio doesn't match a phone's tall
   portrait screen, so object-fit:cover (desktop/iPad default above) was
   cropping real chunks of the frame off both edges — Jordan's ask: never
   crop on iPhone, even if that means letterboxing instead of filling the
   screen. object-fit:contain always shows the FULL video frame, adding
   black bars top/bottom or left/right as needed to preserve its aspect
   ratio — the bars read as intentional here since the overlay and video
   element both already sit on a pure #000 background, same color. Scoped
   to phone widths specifically (max-width:767px, this codebase's
   standing phone breakpoint), not pointer:coarse — iPad is also
   touch/coarse but wasn't the complaint and its own aspect ratio crops
   far less aggressively. */
@media (max-width: 767px) {
	#vhs-intro-video { object-fit: contain; }
}

#vhs-intro-black {
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0;
	transition: opacity 60ms linear; /* a CUT, not a fade — 60ms reads as instantaneous, not a slow dissolve */
}
#vhs-intro-black.is-cut {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	/* vhs-intro.js already removes the overlay outright for PRM before any
	   of this can paint — this rule is belt-and-suspenders only, in case
	   the overlay is ever visible for a frame before JS runs. */
	#vhs-intro-overlay { display: none; }
}