/*
 * Hero — child-theme refinement. Text column: content unchanged.
 * Right side: the logo built from the client's ready images (inc/hero.php) — six pieces + gold
 * drop, then the Arabic and English wordmarks — plus one oversized, very faint copy of the six
 * pieces used as background art. Nothing is drawn: there is no ring, no ticks, no arcs.
 * Colours: the shared dark-section variables (--mxp-*) from products.css.
 *
 * Default = FINAL still state (no JS, Elementor editor, reduced motion).
 * assets/js/hero.js animates it on the live site only (.mx-hero.is-live).
 */

/* Remove the background grid */
.elementor .e-con.mx-hero::before { content: none; }

/* Background: no circular glow behind the logo. One wide, soft wash from the top-right instead,
 * anchored off-canvas so it reads as light on the whole hero, not as a halo. */
.elementor .e-con.mx-hero {
	background:
		radial-gradient(140% 125% at 86% -24%, rgba(24, 64, 42, 0.92) 0%, rgba(24, 64, 42, 0.34) 44%, transparent 70%),
		linear-gradient(196deg, rgba(157, 203, 91, 0.05) 0%, rgba(9, 29, 13, 0) 48%),
		var(--mx-ink);
	/* The background art is deliberately cropped by the section: right screen edge and top edge. */
	overflow: clip;
}

@media (min-width: 1025px) {
	.elementor .e-con.mx-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---- Visual box (positions the logo; nothing is drawn in it) -------------------------------- */
.elementor .e-con.mx-hero__visual {
	position: relative;
	display: grid;
	place-items: center;
}
.elementor .mx-hero .mx-visual--orbit {
	position: relative;
	width: min(100%, 74svh, 640px);
	max-width: none;
	aspect-ratio: 1;
	display: block;
}

/* ---- Background art: the client's six pieces, oversized, very faint, slowly turning -------- */
.mx-hero-hex {
	position: absolute;
	z-index: 0;
	top: 0;
	/* Anchored to the viewport: with a centred 1280px container the right edge of this box sits
	 * at 50vw + 640px, so this lands the art past the screen edge at every width. */
	right: calc(var(--mx-container) / 2 - 50vw - 15vw);
	translate: 0 -50%; /* centred on the column's top edge, so it leaves the section above */
	width: min(52vw, 760px);
	aspect-ratio: 744 / 858;
	opacity: 0.06;
	pointer-events: none;
	transform-origin: 50% 50%;
}
.mx-hero-hex__seg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
}

/* ---- Logo group: mark, then Arabic word, then English word --------------------------------- */
.mx-hero-logo {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.mx-hero-mark {
	position: relative;
	/* Same rendered size as before the ring was removed: viewport-relative, not container-relative. */
	height: 24svh;
	aspect-ratio: 744 / 858;
	flex: none;
}
.mx-hero-mark > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
}
.mx-hero-words {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2svh;
	margin-top: 2.6svh;
	width: 36vw;
}
.mx-hero-word { display: block; width: 100%; height: auto; max-width: none; }

/* Alignment: the group's optical centre matches the text column (line → buttons), not the whole
 * hero. Measured 1440×900 / 1366×768 / 1920×1080: without it the group sits 67px below that centre.
 * `translate` is used on purpose: hero.js writes `transform` for the parallax, so the two compose. */
@media (min-width: 1025px) {
	.mx-hero-logo { translate: 0 -67px; }
}

/* ---- The one calm line above the headline -------------------------------------------------- */
.elementor .mx-hero .elementor-element.mx-hero__kicker .elementor-heading-title {
	display: block;
	margin: 0;
	font-family: var(--mx-font-body);
	font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.005em;
	text-transform: none;
	color: var(--mx-text-on-dark);
	text-wrap: pretty;
}
.mx-hero__sep {
	font-weight: 500;
	color: var(--mx-gold);
}

/* ---- "into the loop." — one flat gold, with a single sheen when it lands -------------------- */
.elementor .mx-hero .mx-gradient-text {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	color: #F4AF35;
	-webkit-text-fill-color: #F4AF35;
}
.elementor .mx-hero .mx-gradient-text.is-sheen {
	background-image: linear-gradient(105deg, #F4AF35 38%, #FFF3D2 50%, #F4AF35 62%);
	background-size: 260% 100%;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* ---- Animation helpers: invisible unless hero.js animates them ------------------------------ */
.mx-hero-fall {
	position: absolute;
	left: 50%;
	bottom: 50%;
	width: 1px;
	height: 0;
	margin-left: -0.5px;
	background: linear-gradient(to bottom, rgba(244, 175, 53, 0), rgba(244, 175, 53, 0.75));
	transform-origin: top center;
	opacity: 0;
}
.mx-hero-ripples {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}
.mx-hero-ripple {
	grid-area: 1 / 1;
	width: 70%;
	aspect-ratio: 1;
	border: 1.5px solid rgba(244, 175, 53, 0.7);
	border-radius: 50%;
	opacity: 0;
}

/* ---- Mobile / tablet: in the flow, smaller, fully visible ---------------------------------- */
@media (max-width: 1024px) {
	.elementor .e-con.mx-hero__visual {
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
		opacity: 1;
		pointer-events: auto;
		margin-top: 0.5rem;
	}
	.elementor .mx-hero .mx-visual--orbit { width: min(86vw, 400px); }
	.mx-hero-hex {
		top: -4%;
		right: -30%;
		translate: none;
		width: 96vw;
		opacity: 0.05;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mx-hero-hex { will-change: auto; }
}