/**
 * OSHIDA — home hero.
 *
 * @figma 1364:1181  arch 818.40 x 1648.48 at (312.79, 194.91), radius 409/409/0/0
 * @figma 1364:1182  inner rim 738.43 x 1399.42 at (352.77, 227.86) — inset 40 / 33
 * @figma 1374:995   silver lockup 291.42 x 425.88 at (574.29, 432.12)
 * @figma 1386:226   headline group at (377.58, 980)
 *
 * Owner: work package C1.
 */

/* --------------------------------------------------------------------------
 * The page ground is a gradient, not a flat fill.
 *
 * Sampling every cached render at x=8 gives the same normalised profile on
 * every long page: L 27 at 0%, rising to 44-45 at ~16%, then decaying to 7 at
 * 100%. It is a frame fill with percentage stops, so it scales with the page.
 * Reproduced from tokens alone — the leading stop sits at -12% so that the
 * ramp reaches L 26 (design: 27) at the top of the document.
 *
 * Scoped to `body.home` rather than `body`, because this file only loads on
 * the front-page route and the profile belongs to the frame, not the theme.
 * If the other page agents measure the same thing, it should move to A1.
 * -------------------------------------------------------------------------- */
body.home {
	background-image: linear-gradient(
		to bottom,
		var(--o-bg) -12%,
		var(--o-surface-nav) 16%,
		var(--o-bg) 84%,
		var(--o-bg-deep) 100%
	);
	background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
 * Section
 *
 * The header occupies 143px of real layout space, so the section's own lead-in
 * is the design's 432.12 - 143 = 289px down to the lockup. The trailing 147.6px
 * carries the frame to the service strip at y=1407.63.
 * -------------------------------------------------------------------------- */
.o-home-hero {
	position: relative;
	padding-block: clamp(56px, 20.07vw, 289px) clamp(48px, 10.25vw, 147.6px);
}

/* --------------------------------------------------------------------------
 * The arch — CSS, not a raster.
 *
 * `border-radius: 999px 999px 0 0` resolves to exactly half the box's inline
 * size on both axes once the browser scales the over-large radii down, which
 * is the design's 409px at the design width and stays a true semicircle at
 * every other width. The interior is the measured ramp: L 45 at the crown,
 * L 7 by y=1300, which is 67% of the arch's own height.
 * -------------------------------------------------------------------------- */
.o-home-hero__arch {
	position: absolute;
	z-index: var(--o-z-base);
	inset-block-start: clamp(20px, 3.61vw, 52px);
	inset-inline: 0;
	margin-inline: auto;
	inline-size: min(818.4px, 78vw);
	aspect-ratio: 818.4 / 1648.48;
	border-radius: 999px 999px 0 0;
	background-image: linear-gradient(
		to bottom,
		var(--o-surface-nav) 0%,
		var(--o-surface-nav) 22%,
		var(--o-bg-deep) 62%
	);
}

/* The inner rim. Inset 40/818.4 = 4.89% inline and 33/1648.5 = 2% block. */
.o-home-hero__arch::before {
	content: "";
	position: absolute;
	inset: 2% 4.89% 0;
	border-radius: 999px 999px 0 0;
	background-image: linear-gradient(
		to bottom,
		var(--o-surface-nav) 0%,
		var(--o-surface-nav) 10%,
		var(--o-bg-deep) 66%
	);
}

/* --------------------------------------------------------------------------
 * Content
 * -------------------------------------------------------------------------- */
.o-home-hero__inner {
	position: relative;
	z-index: var(--o-z-raised);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.o-home-hero__logo {
	display: block;
	inline-size: min(291.42px, 42vw);
}

.o-home-hero__logo-img {
	inline-size: 100%;
	block-size: auto;
}

/*
 * 122px from the lockup's baseline edge (858.00) to the headline box (980).
 * The two lines are separate boxes in the design, 15px apart, so the title is
 * a flex column rather than one wrapping paragraph — the break is authored.
 */
.o-home-hero__title {
	display: flex;
	flex-direction: column;
	gap: clamp(4px, 1.04vw, 15px);
	margin: 0;
	margin-block-start: clamp(32px, 8.47vw, 122px);
	text-wrap: balance;
}

.o-home-hero__lead {
	font-size: clamp(21px, 3.19vw, 46px);
	font-weight: var(--o-fw-regular);
	line-height: 1.41;
	letter-spacing: var(--o-track-tight);
}

.o-home-hero__display {
	font-size: clamp(34px, 6.67vw, 96px);
	font-weight: var(--o-fw-black);
	line-height: 1.42;
	letter-spacing: var(--o-track-tight);
}

/* «اجرای درست» — emphasis by colour, not by italics. */
.o-home-hero__accent {
	color: var(--o-gold);
	font-style: normal;
}

.o-home-hero__sub {
	margin: 0;
	margin-block-start: clamp(6px, 1.04vw, 15px);
	font-size: clamp(15px, 1.81vw, 26px);
	font-weight: var(--o-fw-extralight);
	line-height: 1.88;

	/*
	 * The design sets this line at L~200 over an L~40 ground. --o-text-muted
	 * (0.4) would land at L 126 = 2.9:1 and fail. 0.62 lands at L 173 = 6.2:1
	 * while still reading as the secondary line. See the report.
	 */
	color: var(--o-text);
	opacity: 0.62;
}

@media (max-width: 599px) {
	.o-home-hero__arch {
		inline-size: 86vw;
	}
}