/**
 * Variant CSS: hero--gradient-mesh-type
 * Layer 2 - Variants Library (Path B Recipes architecture).
 *
 * Concept: a RICH atmospheric hero, NO photo. The background is a generative CSS
 *   gradient MESH - layered radial blobs + one slow conic sweep - built ENTIRELY
 *   from the theme's semantic tokens (--accent / --accent-fade / --background /
 *   --background-dark) so it re-tunes per theme: an azure aurora on white-azure,
 *   a lime nebula on tech-dark-lime, a brass glow on dark-warm-brass, etc. Over
 *   it sits a confident CENTERED type block - an uppercase kicker pill, an
 *   oversized display H1 with one accent word, a short deck, and TWO CTAs
 *   (primary fill + ghost outline). The signature is the generative atmosphere.
 *
 * AA strategy (all 9 themes) - the #1 risk is text losing contrast over the mesh.
 *   Three defenses, layered:
 *     1. MESH AS TINT, NOT PAINT. Every mesh blob is the theme --accent (or
 *        --background-dark) color-mixed INTO --background at a low percentage, so
 *        the blob is a gentle tint of the base surface - never a saturated field.
 *        The effective background therefore stays close to --background, which is
 *        exactly the surface --text-primary / --text-secondary were audited AA on.
 *     2. BLOBS PUSHED TO THE EDGES. The strongest stops sit in the corners /
 *        margins; the geometric CENTER (where the H1 + deck live) is left calm.
 *     3. CENTER CALM-VEIL. A radial of --background re-asserted at the center
 *        (::after) restores the base surface directly under the type block, so
 *        the headline + deck sit on (near) pure --background. This is the AA floor.
 *   Light themes => light mesh + dark text; dark themes => dark mesh + light text.
 *   The accent word in the H1 is LARGE display type (>=24px), clearing the 3:1
 *   large-text floor in every theme; the kicker uses --text-secondary (AA small)
 *   not --accent, because a small uppercase accent label drops below 4.5:1 on the
 *   two mid-tone light themes (same finding as centered-minimal). white-minimal
 *   (accent == ink == near-black) reroutes its mesh to the warm paper tone at the
 *   foot of this file so the atmosphere never becomes grey smudges on white.
 *
 * Hardcoded values: none on theme surfaces. Semantic tokens + color-mix only.
 *
 * Scoping: EVERY selector starts with
 *   body.aibt-universal .universal-hero--gradient-mesh-type
 * because the theme loads ALL variant CSS globally (role-level = leak, fatal).
 *
 * @package AI_Base_Theme
 * @since 2026-05-29 (Path B Variants Library - 20-hero expansion)
 */

/* === Section shell + mesh ingredients =====================================
   Local custom props hold the per-theme mesh tints. Defining them here (and
   overriding only the two named blobs in the white-minimal block at the foot)
   keeps the gradient stacks DRY: change a stop once, both ::before + the shell
   pick it up. Each blob is --accent mixed INTO --background, so it is a tint of
   the surface, not a paint over it (the AA contract, see file header). */
body.aibt-universal .universal-hero--gradient-mesh-type {
	/* Three accent-tint stops, ascending strength, all still gentle. */
	--mesh-tint-1: color-mix(in srgb, var(--accent, #888) 22%, var(--background, #fff));
	--mesh-tint-2: color-mix(in srgb, var(--accent, #888) 13%, var(--background, #fff));
	--mesh-tint-3: color-mix(in srgb, var(--accent, #888) 8%, var(--background, #fff));
	/* A deep counter-tone pulled toward --background-dark so the mesh has a
	   shadow side as well as a glow side - this is what reads as "depth" rather
	   than a flat wash. Kept subtle (mixed back toward the base). */
	--mesh-shade: color-mix(in srgb, var(--background-dark, #111) 16%, var(--background, #fff));

	position: relative;
	isolation: isolate;
	background: var(--background, #fff);
	padding-block: calc(clamp(var(--space-2xl, 6rem), 17vh, 13rem) * var(--density, 1));
	padding-inline: clamp(var(--space-md, 1.5rem), 5vw, var(--space-xl, 4rem));
	overflow: hidden;
}

/* === Mesh layer (::before) - the generative atmosphere ====================
   A stack of radial blobs anchored to the corners/margins + one wide conic
   sweep that adds a subtle directional aurora. Sits BELOW content (z-index:-2).
   `background-blend-mode: normal` is implicit; the tints already blend because
   they are mixes of the base surface, so overlaps deepen gracefully. If motion
   is allowed, the whole layer drifts very slowly (see animation). */
body.aibt-universal .universal-hero--gradient-mesh-type::before {
	content: "";
	position: absolute;
	inset: -10%; /* bleed so the drifting blobs never expose a hard edge */
	z-index: -2;
	background:
		/* top-left glow - strongest accent tint */
		radial-gradient(
			ellipse 48% 52% at 16% 12%,
			var(--mesh-tint-1) 0%,
			transparent 60%
		),
		/* bottom-right glow - mid accent tint, balances the composition */
		radial-gradient(
			ellipse 52% 50% at 86% 88%,
			var(--mesh-tint-2) 0%,
			transparent 62%
		),
		/* upper-right faint accent haze */
		radial-gradient(
			ellipse 40% 44% at 92% 18%,
			var(--mesh-tint-3) 0%,
			transparent 66%
		),
		/* lower-left shade pool - the "shadow side" that gives the mesh depth */
		radial-gradient(
			ellipse 46% 48% at 8% 92%,
			var(--mesh-shade) 0%,
			transparent 60%
		),
		/* slow conic aurora sweep, very low contribution, ties the stops together */
		conic-gradient(
			from 210deg at 60% 40%,
			var(--mesh-tint-3) 0deg,
			transparent 70deg,
			var(--mesh-shade) 150deg,
			transparent 220deg,
			var(--mesh-tint-2) 300deg,
			transparent 360deg
		);
	background-repeat: no-repeat;
	pointer-events: none;
	/* Ambient drift - tech-snappy ease, very slow + large so it reads as living
	   atmosphere, never as a moving object. Frozen under reduced-motion + editor. */
	animation: hero-mesh-drift 38s var(--ease-snappy, ease-in-out) infinite alternate;
	will-change: transform;
}

/* === Center calm-veil (::after) - the AA floor ============================
   Re-asserts the BASE --background as a soft radial right where the type block
   lives, so the headline + deck always sit on (near) pure --background. Fades
   to transparent toward the edges so the corner blobs still read. This is what
   guarantees small-text AA over the mesh in every theme. */
body.aibt-universal .universal-hero--gradient-mesh-type::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(
			ellipse 64% 72% at 50% 50%,
			var(--background, #fff) 0%,
			color-mix(in srgb, var(--background, #fff) 70%, transparent) 42%,
			transparent 78%
		);
	pointer-events: none;
}

/* === Inner column - centered, capped for a tight confident type block ===== */
body.aibt-universal .universal-hero--gradient-mesh-type .universal-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 54rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* === Kicker - an uppercase pill on a hairline accent-fade chip =============
   Colour = --text-secondary (NOT --accent): a small uppercase accent label
   drops below WCAG AA on the two mid-tone light themes (paper-color-blocks,
   light-industrial-orange); --text-secondary clears AA in all 9. The accent
   identity is carried by the chip border + the mesh + the H1 accent word. */
body.aibt-universal .universal-hero--gradient-mesh-type .universal-hero__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs, 0.78rem) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest, 0.24em) !important;
	text-transform: uppercase !important;
	color: var(--text-secondary, var(--ink-soft)) !important;
	display: inline-flex;
	align-items: center;
	margin: 0 0 var(--space-md, 1.5rem) 0 !important;
	padding: 0.5rem 1.05rem;
	border: var(--decor-border-width, 1px) solid var(--divider-accent, var(--line, rgba(0, 0, 0, 0.12)));
	border-radius: 999px;
	background: var(--accent-fade, transparent);
	opacity: 0;
	transform: translateY(14px);
	animation: hero-mesh-rise var(--duration-slow, 900ms) var(--ease-snappy, ease) 200ms forwards;
}

/* === Headline - the focal point =========================================== */
body.aibt-universal .universal-hero--gradient-mesh-type h1.universal-hero__headline,
body.aibt-universal .universal-hero--gradient-mesh-type .universal-hero__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary, var(--ink)) !important;
	margin: 0 !important;
	max-width: 17ch;
	text-wrap: balance;
	opacity: 0;
	transform: translateY(16px);
	animation: hero-mesh-rise var(--duration-slow, 900ms) var(--ease-snappy, ease) 300ms forwards;
	/* font-size + line-height + weight inherited from block inline style.typography */
}

/* The accent word - LARGE display type on the calmed center, clearing the 3:1
   large-text floor in every theme (4.5:1 in all but the orange mid-tone, where
   it is large). Not italic, so it reads as a deliberate poster accent. */
body.aibt-universal .universal-hero--gradient-mesh-type .universal-hero__headline em {
	font-style: normal;
	color: var(--accent, var(--text-primary));
	font-weight: inherit;
}

/* === Deck ================================================================= */
body.aibt-universal .universal-hero--gradient-mesh-type .universal-hero__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg, 1.25rem) !important;
	line-height: var(--leading-relaxed, 1.65) !important;
	color: var(--text-secondary, var(--ink-soft)) !important;
	max-width: 46ch;
	margin: var(--space-lg, 2.5rem) auto 0 !important;
	opacity: 0;
	transform: translateY(16px);
	animation: hero-mesh-rise var(--duration-slow, 900ms) var(--ease-snappy, ease) 420ms forwards;
}

/* === CTA pair ============================================================= */
body.aibt-universal .universal-hero--gradient-mesh-type .universal-hero__cta-wrap {
	margin-top: clamp(var(--space-lg, 2.5rem), 5vh, var(--space-xl, 4rem));
	gap: var(--space-sm, 1rem) var(--space-md, 1.5rem);
	opacity: 0;
	transform: translateY(16px);
	animation: hero-mesh-rise var(--duration-slow, 900ms) var(--ease-snappy, ease) 540ms forwards;
}

/* Shared button geometry */
body.aibt-universal .universal-hero--gradient-mesh-type .wp-block-button.universal-hero__cta .wp-block-button__link {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-base, 1.05rem);
	letter-spacing: var(--tracking-wide, 0.04em);
	padding: 1.05rem 2.4rem;
	border-radius: var(--decor-radius, 0);
	min-height: var(--target-min, 44px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition:
		background var(--duration-fast, 240ms) var(--ease-default, ease),
		color var(--duration-fast, 240ms) var(--ease-default, ease),
		border-color var(--duration-fast, 240ms) var(--ease-default, ease),
		transform var(--duration-fast, 240ms) var(--ease-default, ease);
}

/* Primary - solid fill, dominant. Uses the theme's audited --cta-* pair, which
   is tuned for --background (the surface restored under the type block by the
   calm-veil): ink-on-white on the white themes, dark-text-on-accent on the dark
   themes. AA by theme design. */
body.aibt-universal .universal-hero--gradient-mesh-type .wp-block-button.universal-hero__cta:not(.universal-hero__cta--ghost) .wp-block-button__link {
	color: var(--cta-text-primary, var(--on-accent, #fff));
	background: var(--cta-bg-primary, var(--accent));
	border: var(--decor-border-width, 1px) solid var(--cta-border-primary, var(--accent));
}

body.aibt-universal .universal-hero--gradient-mesh-type .wp-block-button.universal-hero__cta:not(.universal-hero__cta--ghost) .wp-block-button__link:hover {
	background: var(--accent-hover, var(--text-primary));
	border-color: var(--accent-hover, var(--text-primary));
	color: var(--cta-text-primary, var(--on-accent, #fff));
	transform: translateY(-2px);
}

/* Ghost / secondary - transparent fill, ink border + ink text. --cta-text-
   secondary / --cta-border-secondary resolve to the body ink tone over
   --background (the highest-contrast pair available, AA in every theme). The
   primary stays clearly dominant because the ghost has no fill. */
body.aibt-universal .universal-hero--gradient-mesh-type .wp-block-button.universal-hero__cta--ghost .wp-block-button__link,
body.aibt-universal .universal-hero--gradient-mesh-type .wp-block-button.universal-hero__cta--ghost.is-style-outline .wp-block-button__link {
	color: var(--cta-text-secondary, var(--text-primary)) !important;
	background: var(--cta-bg-secondary, transparent) !important;
	border: var(--decor-border-width, 1px) solid var(--cta-border-secondary, var(--text-primary)) !important;
}

body.aibt-universal .universal-hero--gradient-mesh-type .wp-block-button.universal-hero__cta--ghost .wp-block-button__link:hover,
body.aibt-universal .universal-hero--gradient-mesh-type .wp-block-button.universal-hero__cta--ghost.is-style-outline .wp-block-button__link:hover {
	color: var(--background, #fff) !important;
	background: var(--text-primary, var(--ink)) !important;
	border-color: var(--text-primary, var(--ink)) !important;
	transform: translateY(-2px);
}

body.aibt-universal .universal-hero--gradient-mesh-type .wp-block-button.universal-hero__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: var(--focus-offset, 4px);
}

/* === Entrance + ambient drift keyframes ===================================
   Drift is intentionally tiny (a few px + <2deg) and slow so the mesh feels
   alive without distracting from the type. */
@keyframes hero-mesh-rise {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes hero-mesh-drift {
	0% {
		transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
	}
	100% {
		transform: translate3d(-2.5%, 1.8%, 0) scale(1.08) rotate(1.5deg);
	}
}

/* === Tablet =============================================================== */
@media (max-width: 781px) {
	body.aibt-universal .universal-hero--gradient-mesh-type {
		padding-block: calc(clamp(var(--space-xl, 4rem), 12vh, var(--space-2xl, 6rem)) * var(--density, 1));
	}

	body.aibt-universal .universal-hero--gradient-mesh-type .universal-hero__inner {
		max-width: 40rem;
	}
}

/* === Mobile =============================================================== */
@media (max-width: 640px) {
	/* Cap uppercase tracking to 0 on the smallest screens (KI-003). */
	body.aibt-universal .universal-hero--gradient-mesh-type .universal-hero__kicker {
		letter-spacing: 0 !important;
		padding: 0.45rem 0.9rem;
	}

	body.aibt-universal .universal-hero--gradient-mesh-type .universal-hero__headline {
		font-size: clamp(2.2rem, 10.5vw, 3.3rem) !important;
		max-width: 100%;
	}

	body.aibt-universal .universal-hero--gradient-mesh-type .universal-hero__deck {
		font-size: var(--text-base, 1.05rem) !important;
	}

	/* A touch more center-veil opacity headroom: tighten the veil so the calmed
	   zone tracks the narrower type column and the corner blobs stay visible. */
	body.aibt-universal .universal-hero--gradient-mesh-type::after {
		background:
			radial-gradient(
				ellipse 86% 64% at 50% 48%,
				var(--background, #fff) 0%,
				color-mix(in srgb, var(--background, #fff) 72%, transparent) 46%,
				transparent 82%
			);
	}

	/* Stack CTAs full-width for comfortable tap targets. */
	body.aibt-universal .universal-hero--gradient-mesh-type .universal-hero__cta-wrap {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	body.aibt-universal .universal-hero--gradient-mesh-type .wp-block-button.universal-hero__cta {
		width: 100%;
	}

	body.aibt-universal .universal-hero--gradient-mesh-type .wp-block-button.universal-hero__cta .wp-block-button__link {
		width: 100%;
	}
}

/* === Reduced motion ======================================================= */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-hero--gradient-mesh-type::before {
		animation: none;
		transform: none;
	}

	body.aibt-universal .universal-hero--gradient-mesh-type .universal-hero__kicker,
	body.aibt-universal .universal-hero--gradient-mesh-type .universal-hero__headline,
	body.aibt-universal .universal-hero--gradient-mesh-type .universal-hero__deck,
	body.aibt-universal .universal-hero--gradient-mesh-type .universal-hero__cta-wrap {
		animation: none;
		opacity: 1;
		transform: none;
	}

	body.aibt-universal .universal-hero--gradient-mesh-type .wp-block-button.universal-hero__cta .wp-block-button__link {
		transition: none;
	}

	body.aibt-universal .universal-hero--gradient-mesh-type .wp-block-button.universal-hero__cta .wp-block-button__link:hover {
		transform: none;
	}
}

/* === Editor wrapper override =============================================
   The block editor does not run scroll JS; force the final visible state so a
   long-delay entrance frame never hides content, and FREEZE the mesh drift so
   the canvas is static (no surprise motion while editing). The mesh itself is
   pure CSS so it still paints in the editor - only the animation is stilled. */
.editor-styles-wrapper .universal-hero--gradient-mesh-type::before {
	animation: none !important;
	transform: none !important;
}

.editor-styles-wrapper .universal-hero--gradient-mesh-type .universal-hero__kicker,
.editor-styles-wrapper .universal-hero--gradient-mesh-type .universal-hero__headline,
.editor-styles-wrapper .universal-hero--gradient-mesh-type .universal-hero__deck,
.editor-styles-wrapper .universal-hero--gradient-mesh-type .universal-hero__cta-wrap {
	opacity: 1 !important;
	transform: none !important;
}

/* === white-minimal special case ===========================================
   accent == ink == #1A1715 (near-black). The default mesh would mix near-black
   INTO white => grey smudges that read as muddy AND erode the headline contrast
   at the center. Reroute this theme's mesh to the warm PAPER tone (--background-
   alt, #F4F1ED) for the tint blobs, and keep only the faintest whisper of the
   ink accent in the shade pool so the atmosphere stays a refined tonal paper
   grain - quiet, premium, never dark blobs on white. The accent identity in this
   theme lives in the kicker chip border + the H1 accent word (ink, on the calm
   center) - both unaffected. Body + theme class raises specificity over the base
   block above, winning the source-order tie. Graphics only, zero text impact. */
body.aibt-universal.aibt-theme-white-minimal .universal-hero--gradient-mesh-type {
	--mesh-tint-1: color-mix(in srgb, var(--background-alt, #F4F1ED) 92%, var(--accent, #1A1715));
	--mesh-tint-2: color-mix(in srgb, var(--background-alt, #F4F1ED) 80%, var(--background, #fff));
	--mesh-tint-3: color-mix(in srgb, var(--background-alt, #F4F1ED) 65%, var(--background, #fff));
	--mesh-shade: color-mix(in srgb, var(--accent, #1A1715) 5%, var(--background-alt, #F4F1ED));
}