/*
 * Home: About (pages/home/about.php).
 *
 * Base = the light look (kept so the profile look can be switched off by
 * removing one class). .gb-about--profile = the company profile's dark page
 * (D-45): navy → almost black, turquoise sub-headings, white text, the Saudi
 * constellation map.
 *
 * Parts:
 * 1. Intro: text column (head + three pillars on a vertical Growth Line with
 *    the orange seed) beside the map.
 * 2. Vision / mission with a turquoise curve between them (profile page 5).
 *
 * Motion hooks set by assets/js/pages/home/about.js (FULL / OPTIMIZED):
 * - [data-gb-scrub] on the pillar list and the curve wrapper = scroll-linked;
 * - --gb-seed-y on the list (seed centre, px from the list top);
 * - [data-gb-reached] on each pillar the seed has passed;
 * - translate on .gb-about__curve-point and stroke-dashoffset on the curve.
 * Without them (no JS, LIGHT, reduced motion) everything is at rest: seed on
 * the first node, all pillars lit, the curve drawn.
 */

.gb-about {
	padding-block: var(--gb-space-3xl);
	background-color: var(--gb-bg);
	color: var(--gb-text);
}

/* ---------- Intro: text + map ---------- */

.gb-about__intro {
	display: grid;
	align-items: center;
	gap: var(--gb-space-xl);
}

@media (min-width: 64rem) {
	.gb-about__intro {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	}
}

.gb-about__head {
	margin-block-end: var(--gb-space-l);
}

.gb-about__kicker {
	color: var(--gb-primary-strong, var(--gb-color-navy));
	font-weight: var(--gb-weight-bold);
}

/* The light look has no map (the constellation needs the dark sky). */
.gb-about__map {
	display: none;
}

/* ---------- Pillars on the Growth Line, with the seed ---------- */

.gb-about__pillars {
	/*
	 * Revision 6 (owner, 2026-10-05 15:20: «النقط تتظبط»): every node sits on
	 * the CENTRE OF ITS TITLE'S FIRST LINE, and the line runs from the first
	 * node to the last one — no further. --gb-pillar-lh is one title line
	 * (the title's own font size × its line height, set below), so the same
	 * number places the nodes, the line pieces and the resting seed.
	 */
	--gb-pillar-lh: calc(var(--gb-step-2) * 1.4);
	--gb-node-y: calc(var(--gb-pillar-lh) / 2);
	/* Seed centre on the line, px from the list top; at rest = the first node. */
	--gb-seed-y: var(--gb-node-y);
	--gb-line-lit: var(--gb-primary);
	--gb-line-unlit: var(--gb-color-turquoise-a10);

	position: relative;
	display: grid;
	gap: var(--gb-space-l);
	margin: 0;
	padding: 0;
	padding-inline-start: var(--gb-space-l);
	list-style: none;
}

/* The seed: the orange start point, centred on the line at --gb-seed-y. */
.gb-about__pillars::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: calc(1px - 0.55rem);
	z-index: 1;
	inline-size: 1.1rem;
	block-size: 1.1rem;
	border-radius: 50%;
	background-color: var(--gb-seed);
	box-shadow: 0 0 0 0.3rem var(--gb-seed-glow), 0 0 1.2rem var(--gb-seed-glow);
	translate: 0 calc(var(--gb-seed-y) - 0.55rem);
	pointer-events: none;
}

.gb-about__pillar {
	/* How much of the piece of line below this pillar is lit (0…1); about.js sets it while scrolling. */
	--gb-seg: 1;

	position: relative;
	transition: opacity var(--gb-duration-base) linear;
}

/* A node on the line for each pillar, on its title's first line. */
.gb-about__pillar::before {
	content: "";
	position: absolute;
	inset-block-start: calc(var(--gb-node-y) - 0.375rem);
	/* Centre the 0.75rem node on the 2px line (logical inset, direction-neutral). */
	inset-inline-start: calc(var(--gb-space-l) * -1 - 0.375rem + 1px);
	z-index: 1;
	inline-size: 0.75rem;
	block-size: 0.75rem;
	border: 2px solid var(--gb-primary);
	border-radius: 50%;
	background-color: var(--gb-bg);
	transition: background-color var(--gb-duration-base) linear;
}

/*
 * The line, one piece per pillar: from this pillar's node down to the next
 * one's (the same offset, one gap lower). The last pillar has none, so the
 * line ends on the last node. Lit down to the seed (--gb-seg).
 */
.gb-about__pillar:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-block-start: var(--gb-node-y);
	inset-inline-start: calc(var(--gb-space-l) * -1);
	inline-size: 2px;
	block-size: calc(100% + var(--gb-space-l));
	background-image: linear-gradient(
		to bottom,
		var(--gb-line-lit) 0,
		var(--gb-line-lit) calc(var(--gb-seg) * 100%),
		var(--gb-line-unlit) calc(var(--gb-seg) * 100%)
	);
}

/* Scroll-linked: pillars ahead of the seed wait, dimmed; reached ones light up. */
.gb-about__pillars[data-gb-scrub] .gb-about__pillar:not([data-gb-reached]) {
	opacity: 0.45;
}

.gb-about__pillars[data-gb-scrub] .gb-about__pillar[data-gb-reached]::before {
	background-color: var(--gb-primary);
}

.gb-about__pillar-title {
	margin: 0;
	font-size: var(--gb-step-2);
	line-height: 1.4; /* = --gb-pillar-lh above */
	color: var(--gb-color-navy);
}

.gb-about__pillar-text {
	margin-block-start: var(--gb-space-3xs);
	color: var(--gb-text-muted);
}

/* ---------- Vision / mission ---------- */

.gb-about__compass {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto clamp(5rem, 9vw, 8rem) auto;
	gap: 0 var(--gb-space-xl);
	margin-block-start: var(--gb-space-3xl);
}

/* Vision above the curve on the reading-end side… */
.gb-about__statement--vision {
	grid-column: 2;
	grid-row: 1;
}

/* …mission below it, next to the start point. */
.gb-about__statement--mission {
	grid-column: 1;
	grid-row: 3;
}

.gb-about__statement {
	display: grid;
	gap: var(--gb-space-2xs);
	max-inline-size: 34rem;
}

.gb-about__statement-title {
	font-family: var(--gb-font-display);
	font-size: var(--gb-step-4);
	color: var(--gb-primary-strong, var(--gb-color-navy));
}

.gb-about__statement-text {
	font-size: var(--gb-step-1);
	color: var(--gb-text);
}

.gb-about__curve-wrap {
	position: relative;
	grid-column: 1 / -1;
	grid-row: 2;
}

.gb-about__curve {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	overflow: visible;
}

/* The curve is a decoration, so it may follow the reading direction. */
[dir="ltr"] .gb-about__curve {
	scale: -1 1;
}

.gb-about__curve-line {
	fill: none;
	stroke: var(--gb-primary);
	stroke-width: 3.5px;
	stroke-linecap: round;
	/*
	 * No vector-effect: non-scaling-stroke here — it would also measure the
	 * dash pattern in screen units and break the pathLength="1" drawing. The
	 * slight width change from the horizontal stretch is not visible.
	 */
}

/*
 * The orange seed sits on the curve's first point (x = 98.5%, y = 79%).
 * about.js moves it along the curve with translate (px offsets from here).
 */
.gb-about__curve-point {
	position: absolute;
	inset-block-start: calc(79% - 0.55rem);
	inset-inline-start: calc(1.5% - 0.55rem);
	inline-size: 1.1rem;
	block-size: 1.1rem;
	border-radius: 50%;
	background-color: var(--gb-seed);
	box-shadow: 0 0 0 0.35rem var(--gb-seed-glow), 0 0 1.4rem var(--gb-seed-glow);
	will-change: translate;
}

/* FULL / OPTIMIZED without scroll-linking: the curve draws itself when it appears. */
:root[data-gb-appear-ready]:is([data-gb-experience="FULL"], [data-gb-experience="OPTIMIZED"]) .gb-about__curve-wrap:not([data-gb-scrub]) .gb-draw {
	stroke-dasharray: 1;
	transition: stroke-dashoffset calc(var(--gb-duration-reveal) * 2.5) var(--gb-ease-organic);
}

:root[data-gb-appear-ready]:is([data-gb-experience="FULL"], [data-gb-experience="OPTIMIZED"]) .gb-about__curve-wrap:not([data-gb-scrub]) .gb-about__curve:not([data-gb-appeared]) .gb-draw {
	stroke-dashoffset: 1;
}

/* Scroll-linked: about.js sets the offset every frame, so no transition. */
.gb-about__curve-wrap[data-gb-scrub] .gb-draw {
	stroke-dasharray: 1;
	transition: none;
}

/* The curve itself only draws (no rise). */
.gb-about__curve[data-gb-appear] {
	--gb-appear-shift: 0px;
}

/* ---------- Narrow screens: one column, a simple line instead of the curve ---------- */

@media (max-width: 46rem) {
	.gb-about__compass {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: var(--gb-space-l);
	}

	.gb-about__statement--vision,
	.gb-about__statement--mission {
		grid-column: 1;
		grid-row: auto;
		padding-inline-start: var(--gb-space-m);
		border-inline-start: 3px solid var(--gb-primary);
	}

	.gb-about__curve-wrap {
		display: none;
	}
}

/* =================================================================
 * Profile look (.gb-about--profile) — the profile's dark pages.
 * ================================================================= */

.gb-about--profile {
	--gb-focus: var(--gb-focus-inverse);
	--gb-section-text: var(--gb-scene-text);
	--gb-section-muted: var(--gb-scene-text);
	--gb-section-eyebrow: var(--gb-primary);
	--gb-bg: var(--gb-color-profile-deep);

	/* Values follows on the same background: no full gap between the two. */
	padding-block-end: var(--gb-space-xl);
	background-color: var(--gb-color-profile-deep);
	background-image: var(--gb-profile-bg);
	color: var(--gb-scene-text);
}

.gb-about--profile .gb-about__kicker,
.gb-about--profile .gb-about__pillar-title,
.gb-about--profile .gb-about__statement-title {
	color: var(--gb-primary);
}

.gb-about--profile .gb-about__pillar-text,
.gb-about--profile .gb-about__statement-text {
	color: var(--gb-scene-text);
}

.gb-about--profile .gb-about__pillars {
	--gb-line-unlit: var(--gb-color-turquoise-a20);
}

/* The constellation map (components/saudi-map). */
.gb-about--profile .gb-about__map {
	display: block;
	justify-self: center;
	inline-size: 100%;
	max-inline-size: 36rem;
}

@media (max-width: 63.99rem) {
	.gb-about--profile .gb-about__map {
		max-inline-size: 26rem;
	}
}

.gb-saudi-map {
	display: block;
	inline-size: 100%;
	block-size: auto;
	overflow: visible;
}

/* Fade only: a rising map would look like it is falling into place. */
.gb-saudi-map[data-gb-appear] {
	--gb-appear-shift: 0px;
}

.gb-saudi-map__land {
	fill: rgb(57 182 255 / 0.05);
	stroke: var(--gb-color-profile-glow);
	stroke-opacity: 0.75;
	stroke-width: 2.4;
	stroke-linejoin: round;
}

.gb-saudi-map__links {
	fill: none;
	stroke: var(--gb-color-profile-glow);
	stroke-opacity: 0.3;
	stroke-width: 1.4;
}

/* Stars are zero-length round-capped strokes: one path per group. */
.gb-saudi-map__stars {
	fill: none;
	stroke: var(--gb-color-profile-star);
	stroke-linecap: round;
	stroke-width: 7;
}

.gb-saudi-map__stars--dim {
	stroke-width: 4.5;
	stroke-opacity: 0.6;
}

.gb-saudi-map__glow {
	filter: drop-shadow(0 0 3px var(--gb-color-profile-glow)) drop-shadow(0 0 8px rgb(57 182 255 / 0.6));
}

/*
 * FULL / OPTIMIZED: when the map appears, the outline draws, the links fade
 * in and the stars light up in three waves (≈2.5 s, once — no endless
 * twinkle, WCAG 2.2.2). Resting style = everything visible.
 */
:root[data-gb-appear-ready]:is([data-gb-experience="FULL"], [data-gb-experience="OPTIMIZED"]) .gb-saudi-map__land {
	stroke-dasharray: 1;
	transition: stroke-dashoffset calc(var(--gb-duration-reveal) * 3) var(--gb-ease-organic);
}

:root[data-gb-appear-ready]:is([data-gb-experience="FULL"], [data-gb-experience="OPTIMIZED"]) .gb-saudi-map:not([data-gb-appeared]) .gb-saudi-map__land {
	stroke-dashoffset: 1;
}

:root[data-gb-appear-ready]:is([data-gb-experience="FULL"], [data-gb-experience="OPTIMIZED"]) :is(.gb-saudi-map__links, .gb-saudi-map__stars) {
	transition: opacity var(--gb-duration-reveal) var(--gb-ease-out);
}

:root[data-gb-appear-ready]:is([data-gb-experience="FULL"], [data-gb-experience="OPTIMIZED"]) .gb-saudi-map:not([data-gb-appeared]) :is(.gb-saudi-map__links, .gb-saudi-map__stars) {
	opacity: 0;
}

:root[data-gb-appear-ready]:is([data-gb-experience="FULL"], [data-gb-experience="OPTIMIZED"]) .gb-saudi-map__links {
	transition-delay: 600ms;
}

:root[data-gb-appear-ready]:is([data-gb-experience="FULL"], [data-gb-experience="OPTIMIZED"]) .gb-saudi-map__stars--dim {
	transition-delay: 900ms;
}

:root[data-gb-appear-ready]:is([data-gb-experience="FULL"], [data-gb-experience="OPTIMIZED"]) .gb-saudi-map__stars--a {
	transition-delay: 1100ms;
}

:root[data-gb-appear-ready]:is([data-gb-experience="FULL"], [data-gb-experience="OPTIMIZED"]) .gb-saudi-map__stars--b {
	transition-delay: 1500ms;
}

:root[data-gb-appear-ready]:is([data-gb-experience="FULL"], [data-gb-experience="OPTIMIZED"]) .gb-saudi-map__stars--c {
	transition-delay: 1900ms;
}

/*
 * Scroll-lit map (assets/js/components/saudi-map.js sets data-gb-scrub and
 * --gb-map-r, the radius of the light wave from the heart of the kingdom).
 * Each star / line carries --d, its distance from the centre (0–1):
 * - lit when the wave has passed it (soft edge, ~0.1 wide);
 * - the stars right at the wave's front flare a little larger;
 * - not yet reached: a faint 10% so the constellation is still guessed.
 * The grouped paths (the no-JS / resting map) are hidden meanwhile.
 */
.gb-saudi-map[data-gb-scrub] :is(.gb-saudi-map__stars, .gb-saudi-map__links) {
	display: none;
}

.gb-saudi-map__star {
	--gb-lit: clamp(0, calc((var(--gb-map-r, 1.2) - var(--d, 0)) * 10), 1);

	fill: none;
	stroke: var(--gb-color-profile-star);
	stroke-linecap: round;
	stroke-width: calc(7px + 6px * clamp(0, calc(1 - (var(--gb-map-r, 1.2) - var(--d, 0)) * 12), 1) * clamp(0, calc((var(--gb-map-r, 1.2) - var(--d, 0)) * 40), 1));
	opacity: max(0.1, var(--gb-lit));
}

.gb-saudi-map__star--dim {
	stroke-width: 4.5px;
	opacity: max(0.06, calc(0.6 * var(--gb-lit)));
}

.gb-saudi-map__link {
	fill: none;
	stroke: var(--gb-color-profile-glow);
	stroke-width: 1.4;
	stroke-opacity: max(0.03, calc(0.3 * clamp(0, calc((var(--gb-map-r, 1.2) - var(--d, 0)) * 8), 1)));
}