/* =============================================================================
   Atheria — Home Hero (Loader + Reveal) Widget
   Structural CSS only. Colors/typography come from Global Tokens (var(--ath-*)
   fallbacks) and the Elementor Style tab. Animated values (opacity/transform
   on loader + headline/subtitle/buttons) are owned by atheria-home-hero.js via
   GSAP — these rules only set the correct *starting* state pre-JS.
   ============================================================================= */

.ath-home-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 90vh;
	overflow: hidden;
	/* Break out of whatever container width the section sits in — the hero
	   is always full-bleed regardless of the page's boxed/full-width setting. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ── Background ───────────────────────────────────────────────────────────── */

.ath-home-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden; /* clips the image when bg_radius is set */
	border-radius: 0; /* explicit baseline — see note in widget PHP about Elementor's default-value output optimization */
}
.ath-home-hero__bg-img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center;
	border-radius: 0 !important; /* overrides any sitewide default image-rounding rule */
	display: block;
}
.ath-home-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 100%);
	opacity: 0.45; /* fallback — overridden by the overlay_opacity control */
}

/* ── Content ──────────────────────────────────────────────────────────────── */

.ath-home-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
	text-align: center;
}

.ath-home-hero__eyebrow {
	display: inline-block;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ath-arctic-mist, #ACBCBF) !important;
	margin-bottom: 1.25rem;
	opacity: 0;
	transform: translateY(12px);
}

.ath-home-hero__headline {
	color: #fff !important;
	margin: 0 0 1.25rem;
	line-height: 1.05;
}
.ath-home-hero__headline-visual {
	display: inline;
	opacity: 0; /* hidden until JS splits + reveals it — was missing before, causing the "double load" */
}

/* No-JS / reduced-motion fallback: headline always visible without it. */
.ath-home-hero__char {
	display: inline-block;
	opacity: 0;
	transform: translateY(20px);
	will-change: transform, opacity;
}

.ath-home-hero__subtitle {
	color: rgba(255, 255, 255, 0.85) !important;
	max-width: 640px;
	margin: 0 auto 2rem;
	opacity: 0;
	transform: translateY(14px);
}

.ath-home-hero__buttons {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.ath-home-hero__btn {
	opacity: 0;
	transform: translateY(12px);
}

/* Visually-hidden screen-reader-only duplicate of the headline text — the
   visual copy is split into per-character spans for the animation and is
   marked aria-hidden, so assistive tech reads this clean version instead. */
.ath-home-hero__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* ── Loader ───────────────────────────────────────────────────────────────── */

.ath-home-hero__loader {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	background: var(--ath-arctic-navy, #243C4C);
	color: #fff;
}
.ath-home-hero__loader-eyebrow,
.ath-home-hero__loader-word {
	opacity: 0;
}
.ath-home-hero__loader-eyebrow {
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-size: 0.8rem;
	color: var(--ath-arctic-mist, #ACBCBF);
}
.ath-home-hero__loader-word {
	font-size: clamp(2.5rem, 6vw, 4rem);
}
.ath-home-hero__loader-line {
	width: 64px;
	height: 2px;
	background: currentColor;
	opacity: 0.85;
	transform: scaleX(0);
	transform-origin: left center;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.ath-home-hero {
		min-height: 80vh;
	}
	.ath-home-hero__content {
		padding: 0 1.25rem;
	}
	.ath-home-hero__buttons {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
/* The JS module checks prefers-reduced-motion itself and shows everything
   immediately without tweening; this is a belt-and-suspenders fallback so
   nothing is ever stuck invisible if JS fails for any reason. */

@media (prefers-reduced-motion: reduce) {
	.ath-home-hero__eyebrow,
	.ath-home-hero__subtitle,
	.ath-home-hero__btn,
	.ath-home-hero__headline-visual,
	.ath-home-hero__char {
		opacity: 1 !important;
		transform: none !important;
	}
	.ath-home-hero__loader {
		display: none !important;
	}
}

/* Same global "no GSAP available" signal the rest of the motion system uses
   (set on <html> by atheria-motion.js) — keeps this widget's degradation
   consistent with every other animated recipe on the site. */
html.ath-no-motion .ath-home-hero__eyebrow,
html.ath-no-motion .ath-home-hero__subtitle,
html.ath-no-motion .ath-home-hero__btn,
html.ath-no-motion .ath-home-hero__headline-visual,
html.ath-no-motion .ath-home-hero__char {
	opacity: 1 !important;
	transform: none !important;
}
html.ath-no-motion .ath-home-hero__loader {
	display: none !important;
}

/* ── Elementor editor: force everything visible, same convention as
   atheria-motion.css — more reliable than depending on JS timing inside
   the editor preview iframe. This is also why colors "didn't show" before:
   the text was sitting at opacity:0 waiting for JS that may run too late
   inside the editor context. ── */
body.elementor-editor-active .ath-home-hero__eyebrow,
body.elementor-editor-active .ath-home-hero__subtitle,
body.elementor-editor-active .ath-home-hero__btn,
body.elementor-editor-active .ath-home-hero__headline-visual,
body.elementor-editor-active .ath-home-hero__char {
	opacity: 1 !important;
	transform: none !important;
}
body.elementor-editor-active .ath-home-hero__loader {
	display: none !important;
}