/*
Theme Name: Hero Splash
Theme URI: https://example.com/hero-splash
Author: Your Name
Author URI: https://example.com
Description: A single-page "splash" theme: a full-bleed background image with a mouse-responsive animated layer, topped by a centered, fully editable text/logo/email layer. Everything resizes to fill the browser window on any screen while text stays centered and never shrinks below 14pt.
Version: 1.6.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hero-splash
*/

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

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	overflow-x: hidden;
}

body.hero-splash {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	color: #ffffff;
}

a { color: inherit; }

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

/* -------------------------------------------------
   Stage: the full-viewport stack of layers
   1) background image  2) animation canvas  3) content
------------------------------------------------- */
.hero-stage {
	position: fixed;
	inset: 0;
	top: 0;
	left: 0;
	width: 100vw;
	/* 100dvh keeps the stage filling the true visible viewport on mobile
	   browsers where the address bar shows/hides; 100vh is the fallback. */
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}

/* Layer 1: background image, fills edge-to-edge, top to bottom */
.hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	z-index: 1;
	/* Both default to no-op (0 blur, 1x scale) until Background Blur is set. */
	filter: blur(var(--hero-bg-blur, 0px));
	transform: scale(var(--hero-bg-scale, 1));
}

/* bg-rotator.js's re-pick loads as a second, temporary .hero-bg element
   stacked on top of the current one (later in the DOM = painted on top,
   since both share z-index 1). It stays invisible while the new image
   loads in the background — so the old image/gradient never disappears
   — then cross-fades in once it's ready. Keep 0.8s in sync with FADE_MS
   in bg-rotator.js. */
.hero-bg--incoming {
	opacity: 0;
	transition: opacity 0.8s ease;
}

.hero-bg--incoming.is-visible {
	opacity: 1;
}

/* Fallback gradient shown until/unless an editable background image is set */
.hero-bg-fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: radial-gradient(ellipse at center, #234 0%, #0b1220 100%);
	filter: blur(var(--hero-bg-blur, 0px));
}

/* Layer 2: the mouse-responsive tsParticles animation container.
   pointer-events stays on so tsParticles can detect hover/click for its
   interactivity modes (repulse, push, etc.); the content layer above it
   is still fully clickable since it sits at a higher z-index. */
.hero-animation {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: auto;
	display: block;
}

.hero-animation canvas {
	display: block;
}

/* Layer 3: editable content, always centered, always on top */
.hero-content {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 6vh 5vw;
}

/* Logo, pinned top-left, scales gently with viewport */
.hero-logo {
	position: absolute;
	top: max(16px, 3vh);
	left: max(16px, 3vw);
	z-index: 4;
}

.hero-logo img {
	width: clamp(40px, 6vw, 90px);
	height: auto;
}

.hero-text {
	max-width: 640px;
	width: 100%;
}

.hero-heading {
	/* Never smaller than 14pt, scales with viewport, capped at a sane max */
	font-size: clamp(14pt, 5vw, 40pt);
	line-height: 1.2;
	margin: 0 0 0.6em;
	font-weight: 700;
	text-shadow: var(--hero-shadow-layers, 4px 4px 10px rgba(0, 0, 0, 0.45));
}

.hero-subheading {
	font-size: clamp(14pt, 2.4vw, 18pt);
	line-height: 1.5;
	margin: 0 0 0.9em;
	text-shadow: var(--hero-shadow-layers, 4px 4px 6px rgba(0, 0, 0, 0.4));
	font-family: var(--hero-tagline-font-family, inherit);
	font-weight: var(--hero-tagline-font-weight, 400);
	font-style: var(--hero-tagline-font-style, normal);
	letter-spacing: var(--hero-tagline-letter-spacing, normal);
	text-transform: var(--hero-tagline-text-transform, none);
	color: var(--hero-tagline-color, #ffffff);
}

.hero-email-line {
	font-size: clamp(14pt, 2vw, 16pt);
	line-height: 1.5;
	margin: 0 0 0.6em;
	text-shadow: var(--hero-shadow-layers, 4px 4px 6px rgba(0, 0, 0, 0.4));
}

.hero-email-line a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hero-mail-link {
	display: inline-block;
	margin-top: 0.4em;
	font-size: clamp(14pt, 2vw, 16pt);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-shadow: var(--hero-shadow-layers, 4px 4px 6px rgba(0, 0, 0, 0.4));
}

/* Extra-small screens: keep everything readable and centered,
   font-size never dips under 14pt because clamp()'s floor holds. */
@media (max-width: 420px) {
	.hero-content { padding: 5vh 6vw; }
	.hero-logo img { width: clamp(36px, 14vw, 64px); }
}

/* Respect reduced-motion preference: pause the animated canvas */
@media (prefers-reduced-motion: reduce) {
	.hero-animation { display: none; }
}