/*
 * FG Datum — home "about + mission / vision / values" section.
 *
 * Markup: FgCore\Widgets\Home\DatumWidget (`fg-home-datum`).
 * Loaded after fg-home.css, so it reuses the shared primitives (.fg-section,
 * .fg-section__head, .fg-eyebrow, .fg-btn) and only adds what this section needs.
 *
 * THE IDEA — the section sets itself out the way a site does.
 * One continuous gold hairline (the datum) spans the full width and three sheets
 * hang from it. Because the cards drop their own block-start border, that
 * hairline IS their shared top edge, and it carries on across the gutters, so the
 * trio reads as one instrument rather than three tiles. Ruler graduations rise
 * off the line, each sheet is pinned by a station node, and a plumb line drops
 * from the node into the card. Card 1 carries the filled node: on a survey
 * drawing the benchmark station is solid and the rest are hollow.
 *
 * MOTION — purposeful, not decorative (PRODUCT.md forbids the latter).
 * On entry the section is staked out in order: ground grid → datum drawn from the
 * reading-start → sheets → station nodes → plumb lines. Then one ambient move: a
 * slow gold sweep travels the datum, the way a laser level re-establishes a line
 * on site. Precision is the brand claim, so the section demonstrates it instead
 * of asserting it.
 *
 * Engine: pure CSS on the existing fg-sections contract — hidden states live
 * under `html.fg-anim`, and fg-sections.js adds `.is-in` when the band scrolls
 * into view. It only ever adds `.is-in`, and never at all when motion is
 * disallowed, so `html.fg-anim .fg-datum.is-in` is exactly "motion allowed AND
 * on screen". The default (unprefixed) state below is the finished, static
 * layout, which is what no-JS and reduced-motion visitors get. No new JS, and
 * deliberately not the GSAP engine — this choreography is a fixed sequence, not
 * a per-element reveal.
 *
 * RTL-first: logical properties throughout, plus two direction tokens for the
 * two things logical CSS cannot express (a transform origin and a travel
 * direction), flipped once for LTR at the bottom of section 0.
 *
 * Design laws: Rare-Gold (gold is the datum, graduations, nodes and plumb lines
 * only), Gold-Never-Body (code labels are teal, so no gold type at body size on
 * light), Earned-Shadow (flat at rest, and no hover lift either since these are
 * statements, not links), ease-out-expo, no animated layout properties,
 * reduced-motion safe.
 */

/* ============================================================
   0. Tokens
   ============================================================ */
.fg-datum {
	--fg-datum-line: rgba(217, 160, 67, 0.55);
	--fg-datum-line-strong: var(--fg-color-primary);
	--fg-datum-grid: rgba(11, 85, 101, 0.07);
	--fg-datum-pad: clamp(1.3rem, 1rem + 1.35vw, 2.1rem);
	--fg-datum-node: 9px;
	--fg-spine-gap: 1.9rem;

	/* Reveal tempo. */
	--fg-datum-dur: 0.7s;
	--fg-datum-step: 90ms;

	/* Direction tokens — the two things logical properties cannot carry. */
	--fg-datum-origin: 100%; /* RTL: the datum is drawn from the right */
	--fg-datum-run: -1;      /* RTL: the sweep travels right → left */

	position: relative;
	isolation: isolate;
	background: var(--fg-color-bg-alt);
}

html[dir="ltr"] .fg-datum {
	--fg-datum-origin: 0%;
	--fg-datum-run: 1;
}

/* The drawing sheet the section is set out on. Concentrated behind the
   masthead and faded away before it reaches the cards, so it reads as ground
   texture rather than a pattern laid over the content. */
.fg-datum::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		repeating-linear-gradient(to right, var(--fg-datum-grid) 0 1px, transparent 1px 100%),
		repeating-linear-gradient(to bottom, var(--fg-datum-grid) 0 1px, transparent 1px 100%);
	background-size: 58px 58px;
	-webkit-mask-image: radial-gradient(ellipse 78% 62% at var(--fg-datum-origin) 24%, #000 0%, transparent 70%);
	mask-image: radial-gradient(ellipse 78% 62% at var(--fg-datum-origin) 24%, #000 0%, transparent 70%);
	pointer-events: none;
}

.fg-datum > .container {
	position: relative;
	z-index: 1;
}

/* ============================================================
   1. Head — an editorial masthead
   Two columns: the statement at the reading-start, the brief (description +
   CTA) at the reading-end, their block-end edges aligned. A single flowing
   column here would leave the counter-side empty and the CTA stranded.
   Overrides the flex .fg-section__head but keeps its block-end spacing.
   ============================================================ */
.fg-datum__head {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
	align-items: end;
	gap: clamp(1.5rem, 1rem + 2.4vw, 3.5rem);
}

/* The page's opening statement, so it earns a step above the standard section
   title. The column does the wrapping, not a ch cap. */
.fg-datum .fg-section__title {
	font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.fg-datum .fg-section__lead {
	max-width: 52ch;
	margin-block-start: 0;
}

.fg-datum__cta {
	margin-block-start: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
	text-decoration: none;
}

/* ============================================================
   2. The datum and the sheets hanging from it
   ============================================================ */
.fg-datum__plan {
	position: relative;
}

.fg-datum__rule {
	position: relative;
	block-size: 1px;
	background: var(--fg-datum-line);
	transform-origin: var(--fg-datum-origin) 50%;
}

/* Ruler graduations rising off the datum: minor ticks throughout, a taller
   major tick every fifth. They sit ABOVE the line, in the gap under the head —
   below it is card ground. */
.fg-datum__rule::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 9px;
	background-image:
		repeating-linear-gradient(to right, var(--fg-datum-line) 0 1px, transparent 1px 145px),
		repeating-linear-gradient(to right, var(--fg-datum-line) 0 1px, transparent 1px 29px);
	background-size: 100% 9px, 100% 4px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	opacity: 0.6;
	pointer-events: none;
}

/* The laser level: a soft gold puck that re-establishes the line. Sits on the
   datum, travels the full span, rests unseen between passes. Clipped by
   .fg-section's overflow. */
.fg-datum__rule::after {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline-start: 0;
	inline-size: 20%;
	block-size: 3px;
	background: linear-gradient(to left, transparent, var(--fg-datum-line-strong), transparent);
	filter: blur(1.5px);
	opacity: 0;
	pointer-events: none;
}

.fg-datum__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);
}

.fg-datum__card {
	position: relative;
	background: var(--fg-color-bg);
	border: 1px solid var(--fg-color-border);
	/* The datum above is the block-start edge — do not draw a second one. */
	border-block-start: 0;
	border-end-start-radius: var(--fg-radius-md);
	border-end-end-radius: var(--fg-radius-md);
	padding-block: calc(var(--fg-datum-pad) + 0.55rem) var(--fg-datum-pad);
	padding-inline: var(--fg-datum-pad);
	transition: border-color var(--fg-dur-normal) var(--fg-ease);
}

/* Plumb line — dropped from the station into the sheet, the way a dimension is
   carried down from a datum on a drawing. */
.fg-datum__card::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: calc(var(--fg-datum-pad) + (var(--fg-datum-node) - 1px) / 2);
	inline-size: 1px;
	block-size: 1.7rem;
	background: linear-gradient(to bottom, var(--fg-datum-line), transparent);
	transform-origin: 50% 0;
	pointer-events: none;
}

/* Station node — the survey mark where this sheet meets the datum. */
.fg-datum__station {
	position: absolute;
	inset-block-start: calc(var(--fg-datum-node) / -2);
	inset-inline-start: var(--fg-datum-pad);
	inline-size: var(--fg-datum-node);
	block-size: var(--fg-datum-node);
	border-radius: 50%;
	background: var(--fg-color-bg);
	border: 2px solid var(--fg-datum-line-strong);
}

/* The benchmark: the first station on a drawing is filled, the rest hollow. */
.fg-datum__card:first-child .fg-datum__station {
	background: var(--fg-datum-line-strong);
}

/* Hover ring — a survey target acquiring. Lives on its own pseudo-element so it
   never contends with the reveal transform on the node itself. */
.fg-datum__station::after {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 1px solid var(--fg-datum-line-strong);
	opacity: 0;
	transform: scale(0.55);
	transition: opacity var(--fg-dur-normal) var(--fg-ease),
		transform var(--fg-dur-normal) var(--fg-ease);
}

/* Hover response is deliberately quiet: these are statements, not links.
   The border warms and the station acquires. No lift, no shadow. */
.fg-datum__card:hover {
	border-color: var(--fg-datum-line);
}
.fg-datum__card:hover .fg-datum__station::after {
	opacity: 0.75;
	transform: scale(1.9);
}

/* ============================================================
   3. Sheet contents
   ============================================================ */

/* Catalogue number. Teal, never gold — gold at body size on white fails AA and
   would spend the section's gold budget on an ornament. */
.fg-datum__code {
	margin: 0 0 0.75rem;
	font-family: var(--fg-font-heading);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	font-variant-numeric: tabular-nums;
	color: var(--fg-color-accent);
	opacity: 0.55;
}

.fg-datum__label {
	margin: 0 0 0.6rem;
	font-family: var(--fg-font-heading);
	font-weight: 700;
	font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
	line-height: 1.3;
	color: var(--fg-color-accent);
}

.fg-datum__text {
	margin: 0;
	color: var(--fg-color-muted);
	font-size: clamp(0.95rem, 0.92rem + 0.2vw, 1.03rem);
	line-height: 1.8;
	max-width: 44ch;
}

/* ============================================================
   4. Narrow screens — the datum stands up
   The line rotates into a spine running down the reading-start edge, threading
   all three sheets, stations riding it with a tick reaching into each card.
   Same instrument, turned through ninety degrees, rather than a plain stack.
   ============================================================ */
@media (max-width: 899px) {
	.fg-datum__head {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.fg-datum__grid {
		grid-template-columns: 1fr;
		padding-inline-start: var(--fg-spine-gap);
	}

	/* The rule becomes the spine: full height of the plan, one pixel wide. */
	.fg-datum__rule {
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		inline-size: 1px;
		block-size: auto;
		transform-origin: 50% 0;
	}

	/* Graduations turn with it. */
	.fg-datum__rule::before {
		inset-inline: auto 0;
		inset-block: 0;
		inline-size: 9px;
		block-size: 100%;
		background-image:
			repeating-linear-gradient(to bottom, var(--fg-datum-line) 0 1px, transparent 1px 145px),
			repeating-linear-gradient(to bottom, var(--fg-datum-line) 0 1px, transparent 1px 29px);
		background-size: 9px 100%, 4px 100%;
		background-position: 100% 0;
	}

	/* So does the sweep. */
	.fg-datum__rule::after {
		inset-block-start: 0;
		inset-inline-start: -1px;
		inline-size: 3px;
		block-size: 18%;
		background: linear-gradient(to top, transparent, var(--fg-datum-line-strong), transparent);
	}

	/* Sheets close up again: with no shared datum edge they are whole boxes. */
	.fg-datum__card {
		border-block-start: 1px solid var(--fg-color-border);
		border-radius: var(--fg-radius-md);
	}

	/* The station steps out of the card and onto the spine. */
	.fg-datum__station {
		inset-block-start: 1.75rem;
		inset-inline-start: calc((var(--fg-spine-gap) + var(--fg-datum-node) / 2) * -1);
	}

	/* The plumb line lies down into a tick joining spine to sheet. */
	.fg-datum__card::before {
		inset-block-start: calc(1.75rem + var(--fg-datum-node) / 2);
		inset-inline-start: calc(var(--fg-spine-gap) * -1);
		inline-size: var(--fg-spine-gap);
		block-size: 1px;
		background: linear-gradient(to left, var(--fg-datum-line), transparent);
		transform-origin: var(--fg-datum-origin) 50%;
	}
}

@media (max-width: 575px) {
	.fg-datum__cta {
		inline-size: 100%;
	}
}

/* ============================================================
   5. Set-out choreography
   Everything above is the finished state. Below: the hidden state under the
   pre-paint gate, then the transitions that run once the band is on screen.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
	html.fg-anim .fg-datum::before,
	html.fg-anim .fg-datum__masthead,
	html.fg-anim .fg-datum__brief,
	html.fg-anim .fg-datum__card,
	html.fg-anim .fg-datum__station {
		opacity: 0;
	}
	html.fg-anim .fg-datum__masthead,
	html.fg-anim .fg-datum__brief {
		transform: translateY(16px);
	}
	html.fg-anim .fg-datum__card {
		transform: translateY(20px);
	}
	html.fg-anim .fg-datum__station {
		transform: scale(0.2);
	}
	html.fg-anim .fg-datum__rule {
		transform: scaleX(0);
	}
	html.fg-anim .fg-datum__card::before {
		transform: scaleY(0);
	}

	/* 1 — the ground, 2 — the masthead */
	html.fg-anim .fg-datum.is-in::before {
		opacity: 1;
		transition: opacity 1.2s var(--fg-ease) 0.1s;
	}
	html.fg-anim .fg-datum.is-in .fg-datum__masthead,
	html.fg-anim .fg-datum.is-in .fg-datum__brief {
		opacity: 1;
		transform: none;
		transition: opacity var(--fg-datum-dur) var(--fg-ease),
			transform var(--fg-datum-dur) var(--fg-ease);
	}
	html.fg-anim .fg-datum.is-in .fg-datum__brief {
		transition-delay: 0.1s;
	}

	/* 3 — the datum is drawn from the reading-start */
	html.fg-anim .fg-datum.is-in .fg-datum__rule {
		transform: scaleX(1);
		transition: transform 0.95s var(--fg-ease) 0.18s;
	}

	/* 4 — the sheets land */
	html.fg-anim .fg-datum.is-in .fg-datum__card {
		opacity: 1;
		transform: none;
		transition: opacity var(--fg-datum-dur) var(--fg-ease),
			transform var(--fg-datum-dur) var(--fg-ease),
			border-color var(--fg-dur-normal) var(--fg-ease);
		transition-delay: calc(0.42s + var(--fg-i, 0) * var(--fg-datum-step));
	}

	/* 5 — stations are set */
	html.fg-anim .fg-datum.is-in .fg-datum__station {
		opacity: 1;
		transform: scale(1);
		transition: opacity 0.4s var(--fg-ease), transform 0.5s var(--fg-ease);
		transition-delay: calc(0.86s + var(--fg-i, 0) * var(--fg-datum-step));
	}

	/* 6 — plumb lines drop */
	html.fg-anim .fg-datum.is-in .fg-datum__card::before {
		transform: scaleY(1);
		transition: transform 0.5s var(--fg-ease);
		transition-delay: calc(0.96s + var(--fg-i, 0) * var(--fg-datum-step));
	}

	/* Ambient: the laser level re-establishes the line. */
	html.fg-anim .fg-datum.is-in .fg-datum__rule::after {
		animation: fg-datum-sweep 9s var(--fg-ease) 1.8s infinite;
	}

	@media (max-width: 899px) {
		html.fg-anim .fg-datum__rule {
			transform: scaleY(0);
		}
		html.fg-anim .fg-datum.is-in .fg-datum__rule {
			transform: scaleY(1);
		}
		html.fg-anim .fg-datum__card::before {
			transform: scaleX(0);
		}
		html.fg-anim .fg-datum.is-in .fg-datum__card::before {
			transform: scaleX(1);
		}
		html.fg-anim .fg-datum.is-in .fg-datum__rule::after {
			animation-name: fg-datum-sweep-v;
		}
	}
}

@keyframes fg-datum-sweep {
	0%,
	4% {
		opacity: 0;
		transform: translateX(0);
	}
	11%,
	44% {
		opacity: 0.85;
	}
	55%,
	100% {
		opacity: 0;
		transform: translateX(calc(var(--fg-datum-run) * 470%));
	}
}

@keyframes fg-datum-sweep-v {
	0%,
	4% {
		opacity: 0;
		transform: translateY(0);
	}
	11%,
	44% {
		opacity: 0.85;
	}
	55%,
	100% {
		opacity: 0;
		transform: translateY(480%);
	}
}

/* Belt and braces: the .fg-anim gate already withholds every hidden state under
   reduced motion, so nothing here needs undoing — but the resting transitions
   and the ambient sweep are declared outside that gate. */
@media (prefers-reduced-motion: reduce) {
	.fg-datum__card,
	.fg-datum__station::after {
		transition: none;
	}
	.fg-datum__rule::after {
		animation: none;
		opacity: 0;
	}
}