/* ==========================================================================
   ALQIMA — Hero
   Full-viewport cinematic opening. Editorial composition on an architectural
   grid; media, scrims and typography sit on separate depth layers.

   Mobile  (< 768)       : stacked, headline dominant, copy anchored low
   Tablet  (768 – 1199)  : 8-col, aside splits into copy | actions
   Desktop (≥ 1200)      : 12-col, headline cols 1–8, aside cols 9–12
   Wide    (≥ 1440)      : refined spacing, larger optical sizes
   ========================================================================== */

.hero {
	position: relative;
	isolation: isolate;
	height: 100vh;
	height: 100svh;
	min-height: 34rem;
	overflow: hidden;
	background: var(--c-canvas);
	color: var(--c-text);
}

/* ------------------------------------------------------------ Media stack */
.hero__media,
.hero__media-zoom,
.hero__media-intro {
	position: absolute;
	inset: 0;
}

.hero__media {
	z-index: var(--z-media);
	will-change: transform;
}

.hero__media-zoom,
.hero__media-intro {
	will-change: transform;
	transform-origin: 58% 50%;
}

.hero__poster,
.hero__poster-img,
.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 56% 50%;
}

.hero__video {
	opacity: 0;
	transition: opacity 1.6s var(--ease-soft);
	pointer-events: none;
}

.hero.is-video-playing .hero__video {
	opacity: 1;
}

/* ---------------------------------------------------------------- Scrims */
/* Non-UI, image-only gradients: legibility + seamless fade into the canvas. */
.hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to bottom, rgb(var(--rgb-ink) / 0.62) 0%, rgb(var(--rgb-ink) / 0) 24%),
		linear-gradient(to top, var(--color-navy) 0%, rgb(var(--rgb-ink) / 0.78) 22%, rgb(var(--rgb-ink) / 0.2) 52%, rgb(var(--rgb-ink) / 0) 66%),
		linear-gradient(to right, rgb(var(--rgb-ink) / 0.55) 0%, rgb(var(--rgb-ink) / 0) 58%);
}

[dir="rtl"] .hero__scrim {
	background:
		linear-gradient(to bottom, rgb(var(--rgb-ink) / 0.62) 0%, rgb(var(--rgb-ink) / 0) 24%),
		linear-gradient(to top, var(--color-navy) 0%, rgb(var(--rgb-ink) / 0.78) 22%, rgb(var(--rgb-ink) / 0.2) 52%, rgb(var(--rgb-ink) / 0) 66%),
		linear-gradient(to left, rgb(var(--rgb-ink) / 0.55) 0%, rgb(var(--rgb-ink) / 0) 58%);
}

/* Scroll veil (motion.js fades it in as the hero leaves). */
.hero__veil {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--c-canvas);
	opacity: 0;
	pointer-events: none;
}

/* Intro curtain: covers the poster until the entrance sequence lifts it.
   (Opacity lives on the curtain, never on the LCP image itself.) */
.hero__curtain {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: var(--c-canvas);
	opacity: 0;
	pointer-events: none;
}

/* --------------------------------------------------------------- Content */
.hero__content {
	position: absolute;
	inset: 0;
	z-index: var(--z-content);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-block: calc(var(--header-h) + var(--s-5)) calc(var(--meta-h) + var(--s-6));
	pointer-events: none;
	--meta-h: 4.25rem;
}

.hero__content a,
.hero__content button {
	pointer-events: auto;
}

.hero__grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
	column-gap: var(--gutter);
	row-gap: var(--s-5);
	align-items: end;
}

/* Eyebrow ------------------------------------------------------------ */
.hero__eyebrow {
	grid-column: 1 / -1;
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	font-size: var(--fs-label);
	font-weight: var(--fw-medium);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	line-height: 1.55;
	color: var(--c-text-2);
}

.hero__eyebrow-mark {
	width: 5px;
	height: 5px;
	margin-block-start: 0.5em;
	background: var(--c-accent);
	flex: none;
}

.hero__eyebrow-text {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.6em;
}

.hero__eyebrow-line {
	display: block;
	overflow: hidden;
}

.hero__eyebrow-line__inner {
	display: block;
}

/* Headline lockup ----------------------------------------------------- */
.hero__title {
	grid-column: 1 / -1;
	font-family: var(--f-latin);
	font-size: clamp(3.5rem, 0.6rem + 18vw, 8rem);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-display);
	letter-spacing: var(--tr-display);
	color: var(--c-text);
	margin-inline-start: -0.06em;  /* optical alignment of the cap stems to the grid */
}

/* Arabic lockup: القمة / العمرانية in IBM Plex Sans Arabic. Arabic needs
   room above and below (no negative tracking, taller line box). */
[dir="rtl"] .hero__title {
	font-family: var(--f-arabic);
	font-size: clamp(3.25rem, 0.8rem + 15vw, 7rem);
	font-weight: var(--fw-semibold);
	line-height: 1.12;
	letter-spacing: 0;
}

[dir="rtl"] .hero__title-line {
	padding-block: 0.12em 0.16em;
	margin-block: -0.12em -0.16em;
}

.hero__title-line {
	display: block;
	overflow: hidden;
	/* breathing room so the mask never crops overshoots or the descender
	   of the "q" in "Alqima" (mixed-case lockup since Stage 05) */
	padding-block: 0.06em 0.22em;
	margin-block: -0.06em -0.22em;
	padding-inline: 0.04em;
	margin-inline: -0.04em;
}

.hero__title-line__inner {
	display: block;
	will-change: transform;
}

/* Aside: tagline + statement + CTAs ---------------------------------- */
.hero__aside {
	grid-column: 1 / -1;
	display: grid;
	gap: var(--s-4);
	padding-block-start: var(--s-2);
}

/* The brand slogan (Customize → Brand identity). Warm beige on navy. */
.hero__tagline {
	max-width: 30ch;
	font-size: clamp(0.9375rem, 0.88rem + 0.3vw, 1.125rem);
	font-weight: var(--fw-medium);
	line-height: 1.4;
	letter-spacing: -0.005em;
	color: var(--c-accent);
}

.hero__statement {
	max-width: 32ch;
	font-size: var(--fs-lead);
	font-weight: var(--fw-regular);
	line-height: 1.45;
	letter-spacing: -0.012em;
	color: var(--c-text-2);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--s-6);
	row-gap: var(--s-2);
	margin-block-start: var(--s-2);
}

/* ------------------------------------------------------------------ Meta */
.hero__meta {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: var(--z-content);
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: calc(4.25rem + env(safe-area-inset-bottom));
	padding-block-end: env(safe-area-inset-bottom);
}

.hero__meta::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: var(--margin);
	height: 1px;
	background: var(--c-hairline);
}

.hero__meta-start {
	display: flex;
	align-items: center;
	gap: var(--s-6);
}

.hero__index {
	display: inline-flex;
	gap: 0.5em;
	font-family: var(--f-latin);
	font-size: var(--fs-micro);
	font-weight: var(--fw-medium);
	letter-spacing: 0.2em;
	color: var(--c-text);
	font-variant-numeric: tabular-nums;
	direction: ltr;
	unicode-bidi: isolate;
}

.hero__index-sep,
.hero__index-total {
	color: var(--c-text-3);
}

/* Scroll indicator: label + thin vertical line with a travelling segment. */
.hero__scroll {
	display: inline-flex;
	align-items: center;
	gap: var(--s-4);
	min-height: 2.75rem;
	font-size: var(--fs-micro);
	font-weight: var(--fw-medium);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--c-text-2);
	transition: color var(--dur-2) var(--ease-soft);
}

.hero__scroll-line {
	position: relative;
	display: block;
	width: 1px;
	height: 2.5rem;
	background: var(--c-hairline);
	overflow: hidden;
}

.hero__scroll-line span {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	height: 40%;
	background: var(--c-text);
	animation: scroll-travel 2.4s var(--ease-in-out) infinite;
}

@keyframes scroll-travel {
	0%   { transform: translateY(-100%); }
	60%  { transform: translateY(250%); }
	100% { transform: translateY(250%); }
}

@media (hover: hover) {
	.hero__scroll:hover {
		color: var(--c-text);
	}
}

/* ============================================================ Tablet 768+ */
@media (min-width: 48em) {
	.hero__content {
		--meta-h: 4.75rem;
	}

	.hero__meta {
		height: calc(4.75rem + env(safe-area-inset-bottom));
	}

	.hero__title {
		font-size: clamp(6rem, 1rem + 14.5vw, 11rem);
	}

	.hero__eyebrow-text {
		display: block;
	}

	.hero__eyebrow {
		grid-column: 1 / span 3;
		margin-block-end: var(--s-4);
	}

	/* aside becomes a 2-column row: copy | actions */
	.hero__aside {
		grid-template-columns: repeat(8, minmax(0, 1fr));
		column-gap: var(--gutter);
		align-items: end;
		padding-block-start: var(--s-5);
	}

	.hero__tagline,
	.hero__statement {
		grid-column: 1 / span 5;
	}

	.hero__actions {
		grid-column: 6 / span 3;
		grid-row: 1 / span 2;
		flex-direction: column;
		align-items: flex-start;
		justify-self: end;
		margin: 0;
	}
}

/* ======================================================= Desktop 1200+ */
@media (min-width: 75em) {
	.hero__grid {
		row-gap: 0;
		--title-size: clamp(8rem, 0.4rem + 11.6vw, 13.75rem);
	}

	.hero__eyebrow {
		grid-column: 1 / span 3;
		grid-row: 1;
		margin-block-end: var(--s-6);
	}

	.hero__title {
		grid-column: 1 / span 8;
		grid-row: 2;
		font-size: var(--title-size);
		align-self: end;
	}

	.hero__aside {
		grid-column: 9 / span 4;
		grid-row: 2;
		display: grid;
		grid-template-columns: none;
		gap: var(--s-4);
		align-self: end;
		/* sit on the optical baseline of the headline's second line */
		padding-block: 0 calc(var(--title-size) * 0.08);
	}

	.hero__tagline {
		grid-column: auto;
		padding-block-end: var(--s-4);
		border-block-end: 1px solid var(--c-hairline);
	}

	.hero__statement {
		grid-column: auto;
		font-size: var(--fs-lead);
	}

	.hero__actions {
		grid-column: auto;
		grid-row: auto;
		flex-direction: row;
		align-items: center;
		justify-self: start;
		margin-block-start: var(--s-4);
	}
}

/* ========================================================= Wide 1440+ */
@media (min-width: 90em) {
	.hero__content {
		--meta-h: 5.25rem;
	}

	.hero__meta {
		height: calc(5.25rem + env(safe-area-inset-bottom));
	}

	.hero__eyebrow {
		margin-block-end: var(--s-7);
	}
}

/* ============================================ Short landscape viewports */
@media (max-height: 34rem) and (orientation: landscape) {
	.hero {
		height: auto;
		min-height: 100svh;
	}

	.hero__content {
		position: relative;
		min-height: 100svh;
	}
}

/* ============================================================ Mobile < 768 */
@media (max-width: 47.99em) {
	/* keep the architectural focal point (lit portal) clear of the copy */
	.hero__poster,
	.hero__poster-img,
	.hero__video {
		object-position: 50% 30%;
	}

	.hero__scrim {
		background:
			linear-gradient(to bottom, rgb(var(--rgb-ink) / 0.6) 0%, rgb(var(--rgb-ink) / 0) 20%),
			linear-gradient(to top, var(--color-navy) 0%, rgb(var(--rgb-ink) / 0.86) 34%, rgb(var(--rgb-ink) / 0.25) 58%, rgb(var(--rgb-ink) / 0) 70%);
	}

	.hero__index-total,
	.hero__index-sep {
		display: none;
	}

	.hero__eyebrow {
		letter-spacing: 0.18em;
	}
}

/* Compact phones (short viewports, e.g. 320×568, landscape-locked browsers
   with toolbars): tighten rhythm so nothing collides with the header. */
@media (max-width: 47.99em) and (max-height: 45em) {
	.hero__content {
		--meta-h: 3.75rem;
		padding-block-end: calc(var(--meta-h) + var(--s-4));
	}

	.hero__meta {
		height: calc(3.75rem + env(safe-area-inset-bottom));
	}

	.hero__grid {
		row-gap: var(--s-3);
	}

	.hero__title {
		font-size: clamp(3rem, 0.4rem + 15.5vw, 5rem);
	}

	.hero__aside {
		gap: var(--s-3);
		padding-block-start: 0;
	}

	.hero__statement {
		font-size: 0.9375rem;
	}

	.hero__actions {
		column-gap: var(--s-5);
		margin-block-start: 0;
	}

	/* Showreel keeps its accessible name; only the visible word is dropped. */
	.cta--play .cta__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (max-width: 47.99em) and (max-height: 38em) {
	.hero__eyebrow {
		display: none;
	}
}

@media (max-width: 47.99em) {
	.video-toggle__label {
		display: none;
	}

	.hero__scroll-line {
		height: 2rem;
	}
}

/* =================================================== Pre-reveal states */
/* Only when JS runs AND motion is allowed. motion.js adds .is-ready on
   <html> when it takes over (or after a 4s safety timeout). The poster is
   never hidden — it is the LCP element; the intro uses transforms only. */
@media (prefers-reduced-motion: no-preference) {
	html.js:not(.is-ready) .site-header,
	html.js:not(.is-ready) [data-reveal-up],
	html.js:not(.is-ready) [data-reveal-fade],
	html.js:not(.is-ready) .hero__meta::before {
		opacity: 0;
	}

	html.js:not(.is-ready) [data-reveal-line] {
		transform: translateY(110%);
	}

	html.js:not(.is-ready) .hero__curtain {
		opacity: 1;
	}

	.hero__meta::before {
		transition: opacity 1.2s var(--ease-soft) 1.5s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__scroll-line span {
		animation: none;
		transform: none;
		height: 100%;
		opacity: 0.4;
	}
}