/**
 * Moore Health — Premium layer
 *
 * The pieces that separate a clinic site from a template: atmosphere, depth,
 * editorial rhythm and restrained motion.
 *
 * DESIGN RULES THIS FILE FOLLOWS
 *
 * 1. No equal card grids. Layouts are asymmetric, offset, or overlapping.
 * 2. Depth comes from layered light, grain and inner rings — not drop shadows.
 * 3. Motion is slow, physical and optional. Nothing bounces. Nothing loops
 *    fast enough to distract someone reading about their health.
 * 4. Every animated element is visible and readable before its animation
 *    runs, and identical under prefers-reduced-motion.
 *
 * @package MooreHealth
 */

/* =====================================================================
 * 1. ATMOSPHERE
 *
 * A film grain over the whole page and a slow aurora behind dark sections.
 * Grain is the single cheapest trick for making flat colour look printed
 * rather than rendered.
 * ===================================================================== */

.mh-site {
	position: relative;
}

/* Grain overlay — an SVG turbulence, so no image request. */
.mh-site::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.032;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
	mix-blend-mode: multiply;
}

/* Aurora — very slow drifting light behind dark sections. */
.mh-section--dark,
.mh-section--gradient {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.mh-section--dark::before,
.mh-section--gradient::before {
	content: "";
	position: absolute;
	inset: -30%;
	z-index: -1;
	background:
		radial-gradient(38% 44% at 22% 30%, rgba(59, 130, 246, 0.30) 0%, transparent 62%),
		radial-gradient(34% 40% at 78% 68%, rgba(22, 93, 255, 0.32) 0%, transparent 62%),
		radial-gradient(30% 34% at 55% 12%, rgba(22, 93, 255, 0.22) 0%, transparent 60%);
	filter: blur(28px);
	opacity: 0.9;
}

@media (prefers-reduced-motion: no-preference) {
	.mh-section--dark::before,
	.mh-section--gradient::before {
		animation: mh-aurora 38s ease-in-out infinite alternate;
	}
}

@keyframes mh-aurora {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	50%  { transform: translate3d(2.5%, -2%, 0) scale(1.08); }
	100% { transform: translate3d(-2%, 2.5%, 0) scale(1.04); }
}

/* Hairline top edge on dark sections — reads as a material join. */
.mh-section--dark::after,
.mh-section--gradient::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.55), rgba(59, 130, 246, 0.35), transparent);
}

/* =====================================================================
 * 2. IMMERSIVE HERO
 *
 * Taller, layered, with an offset image stack rather than one flat photo.
 * ===================================================================== */

.mh-hero--immersive {
	padding-top: calc(var(--mh-header-height) + var(--mh-space-7));
	padding-bottom: var(--mh-section-y);
}

@media (min-width: 960px) {
	.mh-hero--immersive {
		padding-top: calc(var(--mh-header-height) + var(--mh-space-8));
		min-height: min(92vh, 900px);
		display: flex;
		align-items: center;
	}
}

.mh-hero--immersive .mh-hero__title {
	font-size: var(--mh-size-display);
	line-height: var(--mh-leading-display);
	letter-spacing: var(--mh-tracking-display);
}

/* The line that carries the emphasis, set in italic serif. */
.mh-hero__accent {
	font-style: italic;
	color: var(--mh-blue-press);
}

/* Layered image stack: a tall primary and a smaller offset secondary. */
.mh-hero-stack {
	position: relative;
	padding-bottom: var(--mh-space-6);
}

.mh-hero-stack__primary {
	position: relative;
	z-index: 1;
	border-radius: var(--mh-radius-xl);
	overflow: hidden;
	box-shadow: var(--mh-ring), var(--mh-shadow-lift);
}

.mh-hero-stack__secondary {
	display: none;
}

@media (min-width: 1100px) {
	.mh-hero-stack__secondary {
		display: block;
		position: absolute;
		z-index: 2;
		bottom: 0;
		left: calc(var(--mh-space-8) * -1);
		width: 46%;
		border-radius: var(--mh-radius-lg);
		overflow: hidden;
		box-shadow: var(--mh-ring), var(--mh-shadow-lift);
	}
}

/* Floating credential chip on the hero image. */
.mh-hero-chip {
	position: absolute;
	z-index: 3;
	top: var(--mh-space-5);
	right: calc(var(--mh-space-5) * -1);
	display: none;
	align-items: center;
	gap: var(--mh-space-2);
	padding: var(--mh-space-3) var(--mh-space-4);
	border-radius: var(--mh-radius-pill);
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(16px) saturate(180%);
	box-shadow: var(--mh-ring), var(--mh-shadow);
	font-size: var(--mh-size-small);
	font-weight: var(--mh-weight-semibold);
	color: var(--mh-ink);
	white-space: nowrap;
}

@media (min-width: 1100px) {
	.mh-hero-chip {
		display: inline-flex;
	}
}

/* Live pulse dot — the only "technology" signal on the page. */
.mh-pulse {
	position: relative;
	width: 0.5rem;
	height: 0.5rem;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--mh-blue-bright);
}

.mh-pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-color: inherit;
}

@media (prefers-reduced-motion: no-preference) {
	.mh-pulse::after {
		animation: mh-pulse 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	}
}

@keyframes mh-pulse {
	0%   { transform: scale(1);   opacity: 0.7; }
	70%  { transform: scale(3.4); opacity: 0; }
	100% { transform: scale(3.4); opacity: 0; }
}

/* =====================================================================
 * 3. STATEMENT
 *
 * A full-bleed editorial line. No card, no box — just type doing the work.
 * ===================================================================== */

.mh-statement {
	padding-block: var(--mh-section-y-loose);
}

.mh-statement__text {
	max-width: 18ch;
	margin: 0;
	font-family: var(--mh-font-display);
	font-size: clamp(2.5rem, 6.5vw, 6rem);
	font-weight: var(--mh-weight-display);
	line-height: 1.02;
	letter-spacing: -0.045em;
	color: var(--mh-ink);
	text-wrap: balance;
}

@media (min-width: 720px) {
	.mh-statement__text {
		max-width: 22ch;
	}
}

.mh-statement__text em {
	font-style: italic;
	color: var(--mh-blue-press);
}

.mh-statement__meta {
	max-width: 34ch;
	margin-top: var(--mh-space-5);
	margin-left: auto;
	font-size: var(--mh-size-body-lg);
	line-height: var(--mh-leading-body-lg);
	color: var(--mh-slate);
}

@media (min-width: 960px) {
	.mh-statement__meta {
		margin-top: calc(var(--mh-space-7) * -1);
		padding-left: var(--mh-space-8);
	}
}

/* =====================================================================
 * 4. JOURNEY
 *
 * A vertical spine with offset entries. Replaces the four-across step row
 * on longer pages, where a row of equal boxes reads as filler.
 * ===================================================================== */

.mh-journey {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mh-journey;
}

.mh-journey::before {
	content: "";
	position: absolute;
	top: 0.75rem;
	bottom: 0.75rem;
	left: 1.0625rem;
	width: 2px;
	background: linear-gradient(180deg, var(--mh-blue) 0%, var(--mh-blue) 55%, transparent 100%);
	opacity: 0.35;
}

@media (min-width: 960px) {
	.mh-journey::before {
		left: 50%;
		transform: translateX(-1px);
	}
}

.mh-journey__item {
	position: relative;
	margin: 0 0 var(--mh-space-7);
	padding-left: var(--mh-space-7);
	counter-increment: mh-journey;
}

.mh-journey__item:last-child {
	margin-bottom: 0;
}

@media (min-width: 960px) {
	.mh-journey__item {
		width: 50%;
		padding-left: var(--mh-space-8);
		margin-left: 50%;
	}

	/* Alternate sides for a real editorial rhythm. */
	.mh-journey__item:nth-child(odd) {
		margin-left: 0;
		padding-left: 0;
		padding-right: var(--mh-space-8);
		text-align: right;
	}
}

.mh-journey__marker {
	position: absolute;
	top: 0.125rem;
	left: 0;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--mh-warm-white);
	box-shadow: inset 0 0 0 2px var(--mh-blue);
	font-family: var(--mh-font-body);
	font-size: 0.8125rem;
	font-weight: var(--mh-weight-bold);
	color: var(--mh-blue-press);
}

.mh-journey__marker::before {
	content: counter(mh-journey, decimal-leading-zero);
}

@media (min-width: 960px) {
	.mh-journey__marker {
		left: calc(var(--mh-space-8) * -0.5 - 1.125rem);
	}

	.mh-journey__item:nth-child(odd) .mh-journey__marker {
		left: auto;
		right: calc(var(--mh-space-8) * -0.5 - 1.125rem);
	}
}

.mh-journey__title {
	margin-bottom: var(--mh-space-2);
	font-family: var(--mh-font-display);
	font-size: var(--mh-size-h3);
	font-weight: 700;
	line-height: 1.2;
	color: var(--mh-ink);
}

.mh-journey__text {
	max-width: 40ch;
	color: var(--mh-slate);
}

@media (min-width: 960px) {
	.mh-journey__item:nth-child(odd) .mh-journey__text {
		margin-left: auto;
	}
}

.mh-journey__note {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: var(--mh-space-2);
	font-size: var(--mh-size-small);
	font-weight: var(--mh-weight-semibold);
	color: var(--mh-blue-press);
}

/* =====================================================================
 * 5. CONCERN CHIPS
 *
 * What people actually search for, as tappable chips. Far more useful and
 * far less generic than a grid of identical feature cards.
 * ===================================================================== */

.mh-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mh-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mh-chips__item {
	margin: 0;
}

.mh-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--mh-tap-target);
	padding: 0.625rem 1.125rem;
	border-radius: var(--mh-radius-pill);
	background-color: var(--mh-pure-white);
	box-shadow: var(--mh-ring), var(--mh-shadow-sm);
	font-size: var(--mh-size-small);
	font-weight: var(--mh-weight-medium);
	color: var(--mh-ink);
	text-decoration: none;
	transition:
		transform var(--mh-duration) var(--mh-ease),
		box-shadow var(--mh-duration) var(--mh-ease),
		color var(--mh-duration) var(--mh-ease);
}

.mh-chip::before {
	content: "";
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background-color: var(--mh-accent);
	flex-shrink: 0;
}

.mh-chip:hover {
	transform: translateY(-2px);
	box-shadow: var(--mh-ring), var(--mh-shadow);
	color: var(--mh-blue-press);
}

/* =====================================================================
 * 6. SPLIT FEATURE — offset, overlapping, never a card row
 * ===================================================================== */

.mh-offset {
	display: grid;
	gap: var(--mh-space-5);
	align-items: center;
}

@media (min-width: 960px) {
	.mh-offset {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--mh-space-6);
	}

	.mh-offset__media {
		grid-column: 1 / span 7;
	}

	/* The copy panel overlaps the image — depth without a drop shadow. */
	.mh-offset__copy {
		grid-column: 7 / span 6;
		z-index: 2;
		padding: var(--mh-space-6);
		border-radius: var(--mh-radius-lg);
		background: rgba(255, 255, 255, 0.86);
		backdrop-filter: blur(18px) saturate(150%);
		box-shadow: var(--mh-ring), var(--mh-shadow);
	}

	.mh-offset--reverse .mh-offset__media {
		grid-column: 6 / span 7;
		grid-row: 1;
	}

	.mh-offset--reverse .mh-offset__copy {
		grid-column: 1 / span 6;
		grid-row: 1;
	}
}

/* =====================================================================
 * 7. PROOF ROW
 *
 * Facts about how the clinic works — never invented statistics.
 * ===================================================================== */

.mh-proof {
	display: grid;
	gap: var(--mh-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 720px) {
	.mh-proof {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--mh-space-6);
	}
}

.mh-proof__item {
	margin: 0;
	padding-top: var(--mh-space-4);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.mh-proof__label {
	display: block;
	margin-bottom: var(--mh-space-2);
	font-size: var(--mh-size-label);
	font-weight: var(--mh-weight-bold);
	letter-spacing: var(--mh-tracking-label);
	text-transform: uppercase;
	color: var(--mh-blue-bright);
}

.mh-proof__value {
	display: block;
	font-family: var(--mh-font-display);
	font-size: clamp(1.5rem, 2.4vw, 2.125rem);
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
}

.mh-proof__text {
	margin-top: var(--mh-space-2);
	font-size: var(--mh-size-small);
	line-height: var(--mh-leading-small);
	color: var(--mh-text-inverse-muted);
}

/* =====================================================================
 * 8. STICKY MOBILE CTA
 *
 * Appears once the hero has scrolled away. Mobile only.
 * ===================================================================== */

.mh-sticky-cta {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 35;
	display: flex;
	align-items: center;
	gap: var(--mh-space-3);
	padding: var(--mh-space-3) var(--mh-gutter) calc(var(--mh-space-3) + env(safe-area-inset-bottom));
	background: rgba(251, 250, 247, 0.9);
	backdrop-filter: blur(18px) saturate(180%);
	border-top: 1px solid var(--mh-border);
	transform: translateY(110%);
	transition: transform var(--mh-duration-slow) var(--mh-ease-out);
}

.mh-sticky-cta.is-visible {
	transform: translateY(0);
}

@media (min-width: 960px) {
	.mh-sticky-cta {
		display: none;
	}
}

.mh-sticky-cta__text {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: var(--mh-size-small);
	font-weight: var(--mh-weight-semibold);
	line-height: 1.3;
	color: var(--mh-ink);
}

.mh-sticky-cta .mh-button {
	flex-shrink: 0;
}

/* =====================================================================
 * 9. MOTION — PROGRESSIVE ENHANCEMENT ONLY
 *
 * Master prompt §11 and §30.
 *
 * THE RULE THAT WAS BROKEN BEFORE:
 * The previous build hid elements behind `.mh-js`, which header.php adds
 * INLINE at first paint — before any script has run. A blocked, failed or
 * slow premium.js therefore left the H1 permanently invisible while it still
 * occupied full height. That was the giant blank gap on the homepage.
 *
 * The gate is now `.mh-motion-ready`, which premium.js adds ONLY after:
 *   - DOMContentLoaded has fired,
 *   - IntersectionObserver exists,
 *   - reduced-motion has been checked,
 *   - observers have been attached successfully.
 *
 * If any of that fails, the class never lands and every element stays in its
 * visible base state. Content is never hidden by default.
 *
 * The H1 is NEVER animated for visibility. Its accent underline is animated
 * instead — decoration only.
 * ===================================================================== */

/* Base state: everything visible, in position, usable. */
[data-mh-reveal] {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: no-preference) {
	/*
	 * Enhanced state. Opacity floors at 0.001 rather than 0 so that even a
	 * mid-transition failure leaves the element technically rendered and
	 * screen-reader reachable.
	 */
	.mh-motion-ready [data-mh-reveal] {
		opacity: 0.001;
		transform: translateY(18px);
		transition:
			opacity 520ms var(--mh-ease-out),
			transform 520ms var(--mh-ease-out);
		transition-delay: var(--mh-delay, 0ms);
	}

	.mh-motion-ready [data-mh-reveal].is-visible {
		opacity: 1;
		transform: none;
	}
}

/*
 * H1 accent underline — the only "hero animation".
 * It decorates; it never gates the headline's visibility.
 */
.mh-headline-rule {
	display: block;
	width: 100%;
	max-width: 7.5rem;
	height: 3px;
	margin-top: var(--mh-space-4);
	border-radius: 2px;
	background: linear-gradient(90deg, var(--mh-blue) 0%, var(--mh-blue-bright) 100%);
	transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
	.mh-motion-ready .mh-headline-rule {
		transform: scaleX(0);
		transition: transform 720ms var(--mh-ease-out) 180ms;
	}

	.mh-motion-ready .mh-headline-rule.is-visible {
		transform: scaleX(1);
	}
}

/* Hover lift for linked panels. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	[data-mh-lift] {
		transition:
			transform var(--mh-duration-slow) var(--mh-ease-out),
			box-shadow var(--mh-duration-slow) var(--mh-ease-out);
	}

	[data-mh-lift]:hover {
		transform: translateY(-5px);
		box-shadow: var(--mh-ring), var(--mh-shadow-hover);
	}
}

/* =====================================================================
 * 10. SECTION LABEL
 * ===================================================================== */

.mh-section-index {
	display: flex;
	align-items: baseline;
	gap: var(--mh-space-3);
	margin-bottom: var(--mh-space-5);
	padding-bottom: var(--mh-space-3);
	border-bottom: 1px solid var(--mh-border);
}

.mh-section-index__num {
	font-family: var(--mh-font-body);
	font-size: var(--mh-size-label);
	font-weight: var(--mh-weight-bold);
	letter-spacing: var(--mh-tracking-label);
	color: var(--mh-blue);
}

.mh-section-index__label {
	font-size: var(--mh-size-label);
	font-weight: var(--mh-weight-bold);
	letter-spacing: var(--mh-tracking-label);
	text-transform: uppercase;
	color: var(--mh-slate);
}

.mh-section--dark .mh-section-index {
	border-bottom-color: rgba(255, 255, 255, 0.16);
}

.mh-section--dark .mh-section-index__label {
	color: var(--mh-text-inverse-muted);
}

.mh-section--dark .mh-section-index__num {
	color: var(--mh-blue-bright);
}

/* =====================================================================
 * 11. LEAD-IN
 * ===================================================================== */

.mh-leadin {
	max-width: 26ch;
	font-family: var(--mh-font-display);
	font-size: clamp(1.5rem, 2.8vw, 2.4rem);
	font-weight: var(--mh-weight-display);
	line-height: 1.24;
	letter-spacing: -0.025em;
	color: var(--mh-ink);
	text-wrap: balance;
}

.mh-section--dark .mh-leadin {
	color: #fff;
}