/* ==========================================================================
   Fred Durst — landing page
   Mobile-first. Progressive enhancement via min-width media queries.
   ========================================================================== */

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

html,
body {
	margin: 0;
	padding: 0;
	background: #000;
	color: #fff;
	font-family:
		"Special Elite", "Courier New", ui-monospace, SFMono-Regular, Menlo,
		Consolas, monospace;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow: hidden;
	overscroll-behavior: none;
}

body {
	/* Use the *small* viewport height as a fallback (always the visible area
	   on iOS regardless of browser chrome state) and prefer the *dynamic*
	   viewport height when the browser supports it. Avoid 100vh, which on
	   iOS Safari is the LARGE viewport height and causes the page to be
	   taller than the visible area → scrollbar / content under the home
	   indicator. */
	height: 100svh;
	height: 100dvh;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

/* Accessible visually-hidden helper for the SEO h1 */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Starfield canvas ---------- */
#starfield {
	position: fixed;
	inset: 0;
	width: 100vw;
	/* Match the body's small/dynamic viewport sizing so the canvas never
	   forces the document to be taller than the visible area on iOS. */
	height: 100svh;
	height: 100dvh;
	z-index: 0;
	background: #000;
	display: block;
	pointer-events: none;
}

/* ---------- Hero layout (mobile-first) ----------
   The hero is a fixed-height flex column that exactly fills the viewport,
   so the three blocks (logo, quote, saucer) always divide the available
   vertical space and the user never has to scroll. Each block is allowed to
   shrink to fit via min-height: 0 + max-height caps tied to viewport units. */
.hero {
	position: relative;
	z-index: 1;
	/* Small viewport height as fallback, dynamic where supported — keeps
	   the hero exactly the size of the *visible* area on iOS Safari so no
	   scrollbar appears. */
	height: 100svh;
	height: 100dvh;
	/* Use safe-area-inset on the top and bottom so nothing slides behind
	   the dynamic-island / home-indicator on iPhone (viewport-fit=cover).
	   max() ensures we still get a comfortable minimum padding when the
	   insets are 0 (non-notched devices, desktop, etc.). */
	padding-top: max(clamp(1rem, 4vw, 2.5rem), env(safe-area-inset-top));
	padding-right: max(clamp(1rem, 5vw, 2.5rem), env(safe-area-inset-right));
	padding-bottom: max(clamp(1rem, 4vw, 2.5rem), env(safe-area-inset-bottom));
	padding-left: max(clamp(1rem, 5vw, 2.5rem), env(safe-area-inset-left));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	/* Gap shrinks on short viewports so the three blocks always fit. */
	gap: clamp(0.5rem, 2svh, 2rem);
	text-align: center;
	overflow: hidden;
}

/* ---------- Fred Durst wordmark ---------- */
.fd-logo {
	flex: 0 1 auto;
	width: min(88vw, 720px);
	/* Cap by viewport height so on short / landscape screens the logo
	   shrinks rather than crowding the rest of the page. svh keeps the cap
	   tied to the *visible* viewport on iOS. */
	max-height: 16svh;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}

/* ---------- Quote ---------- */
.quote {
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	min-height: 0; /* allow shrinking inside the flex column */
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
}

.quote p {
	margin: 0;
	font-family: "Special Elite", "Courier New", ui-monospace, monospace;
	font-weight: 400;
	/* Scale by min of viewport width and height so the quote always fits
	   without overflowing on short screens (mobile landscape, etc). */
	font-size: clamp(1.5rem, min(8vw, 7vh), 5rem);
	line-height: 1.15;
	letter-spacing: 0.005em;
	color: #fff;
	text-shadow: 0 0 1px rgba(255, 255, 255, 0.15);
}

.quote__line {
	display: block;
	white-space: nowrap;
}

/* Scratch underline beneath the word "when" using fd-note__scratch.png.
   The PNG itself contains the two hand-drawn scratch lines on a transparent
   background — we render it as a separate <img> with object-fit: contain so
   the line aspect is preserved (no squash) and it sits centered just under
   the word "when". */
.quote__scratch {
	position: relative;
	display: inline-block;
	padding-bottom: 0.55em;
}

.quote__scratch-img {
	position: absolute;
	left: 50%;
	bottom: -0.05em;
	transform: translateX(-50%);
	width: 110%;
	height: 0.7em;
	object-fit: contain;
	object-position: center;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	/* The source PNG has black scratch marks on transparent background.
	   invert() flips the visible black pixels to white while leaving the
	   transparent pixels untouched, so the lines read against the dark sky. */
	filter: invert(1);
}

/* ---------- Morning Boy UFO logo ---------- */
.mb-link {
	flex: 0 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	width: min(82vw, 640px);
	/* Cap by viewport height so on tall content the saucer doesn't push
	   the layout past the fold. Mirrors the .fd-logo cap. svh so iOS
	   evaluates against the visible area, not the large viewport. */
	max-height: 30svh;
	transition:
		transform 280ms ease,
		filter 280ms ease;
}

.mb-link:hover,
.mb-link:focus-visible {
	transform: translateY(-2px) scale(1.02);
	filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.25));
}

.mb-link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 6px;
	border-radius: 4px;
}

.mb-logo {
	width: 100%;
	max-height: 100%;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}

/* ---------- Tablet ---------- */
@media (min-width: 640px) {
	.hero {
		gap: clamp(1.5rem, 4vw, 3rem);
	}

	.quote p {
		font-size: clamp(2rem, min(7vw, 8vh), 5rem);
	}
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
	.hero {
		padding-block: clamp(2rem, 4vw, 3.5rem);
	}

	.fd-logo {
		width: min(60vw, 720px);
		max-height: 20svh;
	}

	.mb-link {
		width: min(48vw, 600px);
		max-height: 34svh;
	}

	.quote p {
		font-size: clamp(2.5rem, min(5vw, 9vh), 5.5rem);
	}
}

/* ---------- Large desktop ---------- */
@media (min-width: 1440px) {
	.fd-logo {
		width: 640px;
	}

	.mb-link {
		width: 560px;
	}
}

/* ---------- 404 page ----------
   Reuses .hero / .quote / .quote__scratch from the home page so the not-found
   screen feels like the same world. We only adjust spacing (centered column
   instead of space-between) and add a small "back home" text link. */
.hero--notfound {
	justify-content: center;
	gap: clamp(1.25rem, 4svh, 2.5rem);
}

.hero--notfound .fd-logo {
	/* Slightly smaller than the home hero so the 404 message can breathe. */
	width: min(72vw, 560px);
	max-height: 14svh;
}

.notfound__home {
	flex: 0 0 auto;
	display: inline-block;
	font-family: "Special Elite", "Courier New", ui-monospace, monospace;
	font-size: clamp(0.95rem, 2.2vw, 1.15rem);
	letter-spacing: 0.02em;
	color: #fff;
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	transition:
		border-color 200ms ease,
		opacity 200ms ease;
	opacity: 0.85;
}

.notfound__home:hover,
.notfound__home:focus-visible {
	border-bottom-color: #fff;
	opacity: 1;
}

.notfound__home:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
	border-radius: 2px;
}

@media (min-width: 1024px) {
	.hero--notfound .fd-logo {
		width: min(48vw, 560px);
		max-height: 16svh;
	}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.mb-link {
		transition: none;
	}
	.mb-link:hover,
	.mb-link:focus-visible {
		transform: none;
	}
	.notfound__home {
		transition: none;
	}
}