/*
 * Brand mark styles (components/brand-mark/brand-mark.php) — the official logo
 * symbol rebuilt as SVG (D-36).
 *
 * Frame and shaft are ONE band width (19.8 units in the mark's 200×200 box),
 * with round ends and corners, exactly like the logo. Colours are tokens so a
 * scene can re-theme the mark (navy on the turquoise CTA panel, for example).
 *
 * No backdrop-filter and no blur filters anywhere: cheap to paint on every
 * device, including while it is being drawn.
 *
 * Never mirrored in RTL: nothing in this file (or anywhere else) may apply
 * scaleX(-1) to .gb-mark.
 */

.gb-mark {
	overflow: visible;
}

.gb-mark__frame,
.gb-mark__shaft {
	fill: none;
	stroke: var(--gb-mark-stroke);
	stroke-width: 19.8px;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* The arrow head: a filled triangle whose thin stroke rounds its corners like the logo. */
.gb-mark__head {
	fill: var(--gb-mark-stroke);
	stroke: var(--gb-mark-stroke);
	stroke-width: 3px;
	stroke-linejoin: round;
}

/* The dash under the seed: the printed logo's navy on every background (tokens.css). */
.gb-mark__dash {
	fill: var(--gb-mark-dash);
}

/* The seed: the logo's own colour on every background (never orange, owner 2026-10-05 / 10-06). */
.gb-mark__point {
	fill: var(--gb-mark-point);
}

/* A restrained highlight on the band (glass hint). Hidden where a scene sets it to transparent. */
.gb-mark__sheen {
	fill: none;
	stroke: var(--gb-mark-sheen);
	stroke-width: 2.4px;
	stroke-linecap: round;
}

/* ---------- Seed bounce (owner request 2026-10-04: «البذرة تتنطط ع الشريط») ---------- */

/*
 * The seed hops on the dash: up, down with a small squash on landing, a
 * smaller second hop, rest. Origin = the bottom of the seed (where it touches
 * the dash), so the squash looks like a landing. Lengths are the mark's own
 * user units (SVG). `translate` / `scale` compose with any `transform` the
 * journey scene (GSAP) writes, so the two never fight.
 */
.gb-mark__point {
	transform-box: fill-box;
	transform-origin: 50% 100%;
}

@keyframes gb-seed-bounce {
	0% {
		translate: 0 0;
		scale: 1 1;
		animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1);
	}

	26% {
		translate: 0 -26px;
		scale: 0.94 1.07;
		animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.4);
	}

	44% {
		translate: 0 0;
		scale: 1.2 0.78;
		animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1);
	}

	58% {
		translate: 0 -10px;
		scale: 0.98 1.03;
		animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.4);
	}

	70% {
		translate: 0 0;
		scale: 1.08 0.9;
	}

	80%,
	100% {
		translate: 0 0;
		scale: 1 1;
	}
}

/*
 * When it plays — never with reduced motion or in the static experience:
 * - [data-gb-bounce] on the mark: set by assets/js/components/brand-mark.js
 *   (the hero mark, twice, right after the intro; under 3 s in total);
 * - pointing at / focusing the header brand, the footer brand or the hero
 *   picture: once per hover.
 */
@media (prefers-reduced-motion: no-preference) {
	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-mark[data-gb-bounce] .gb-mark__point {
		animation: gb-seed-bounce 1.1s both;
		animation-iteration-count: var(--gb-bounce-count, 1);
	}

	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) :is(.gb-site-header__brand, .gb-site-footer__name, .gb-hero__art):is(:hover, :focus-visible) .gb-mark__point {
		animation: gb-seed-bounce 1.1s both;
	}
}

/* ---------- Heartbeat (owner request 2026-10-04: «اللوجو ينبض… ف كله») ---------- */

/*
 * One beat = lub-dub: two ripples in the diamond's shape spread out from the
 * mark and fade (the second a moment later), the band flashes lighter twice,
 * and the seed hops on the dash (brand-mark.js). A composition with a line
 * (hero, CTA panel, service hero) also sends a light along it and gives a
 * small thump (data-gb-beating on its <svg>).
 *
 * Origin: the ripples are drawn in the mark's own 200 × 200 box and keep the
 * default transform box (view-box), so the centre is 100px 100px (N-19).
 * Colours: --gb-mark-ripple / --gb-mark-flash, re-themed per scene.
 */
.gb-mark__ripple {
	fill: none;
	stroke: var(--gb-mark-ripple, var(--gb-mark-stroke));
	stroke-width: 6px;
	stroke-linejoin: round;
	opacity: 0;
	transform-origin: 100px 100px;
	pointer-events: none;
}

@keyframes gb-mark-ripple {
	0% {
		opacity: 0.7;
		scale: 1;
		stroke-width: 8px;
	}

	100% {
		opacity: 0;
		scale: 1.6;
		stroke-width: 1px;
	}
}

@keyframes gb-mark-flash {
	0%,
	36%,
	100% {
		stroke: var(--gb-mark-stroke);
	}

	14%,
	50% {
		stroke: var(--gb-mark-flash, var(--gb-color-neutral-0));
	}
}

@keyframes gb-mark-flash-fill {
	0%,
	36%,
	100% {
		fill: var(--gb-mark-stroke);
		stroke: var(--gb-mark-stroke);
	}

	14%,
	50% {
		fill: var(--gb-mark-flash, var(--gb-color-neutral-0));
		stroke: var(--gb-mark-flash, var(--gb-color-neutral-0));
	}
}

/* The whole picture gives one small thump with each beat. */
@keyframes gb-thump {
	0%,
	52%,
	100% {
		scale: 1;
	}

	14% {
		scale: 1.025;
	}

	30% {
		scale: 0.995;
	}

	40% {
		scale: 1.015;
	}
}

/* The light that runs along a composition's line (a clone of the line, brand-mark.js). */
.gb-pulse-trail {
	fill: none;
	stroke: var(--gb-pulse-color, var(--gb-color-neutral-0));
	stroke-linecap: round;
	stroke-dasharray: 0.12 2;
	stroke-dashoffset: 0.12;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-mark[data-gb-beat] .gb-mark__ripple,
	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) :is(.gb-site-header__brand, .gb-site-footer__name, .gb-hero__art):is(:hover, :focus-visible) .gb-mark__ripple {
		animation: gb-mark-ripple 0.95s cubic-bezier(0.2, 0.6, 0.3, 1) both;
	}

	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-mark[data-gb-beat] .gb-mark__ripple--echo,
	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) :is(.gb-site-header__brand, .gb-site-footer__name, .gb-hero__art):is(:hover, :focus-visible) .gb-mark__ripple--echo {
		animation-delay: 0.24s;
	}

	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-mark[data-gb-beat] :is(.gb-mark__frame, .gb-mark__shaft) {
		animation: gb-mark-flash 0.9s linear both;
	}

	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-mark[data-gb-beat] .gb-mark__head {
		animation: gb-mark-flash-fill 0.9s linear both;
	}

	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) [data-gb-beating] {
		animation: gb-thump 0.9s ease-out both;
	}
}

/* ---------- The name in the logo's lettering (inc/brand-name.php, D-151) ---------- */

/*
 * The drawn name takes its height from the place's font size (1em = the
 * size the typed name had), its width from the lettering itself, and its
 * colour from the text around it (currentColor): white on the dark header and
 * footer, the logo's navy on light grounds. Never orange (owner 2026-10-06).
 */
.gb-wordmark {
	display: inline-flex;
	align-items: center;
}

.gb-wordmark__art {
	display: block;
	inline-size: auto;
	block-size: var(--gb-wordmark-size, 1em);
	fill: currentColor;
	overflow: visible;
}

/* The English line is a single, lower line of letters: a little smaller box for the same weight on the page. */
.gb-wordmark--en .gb-wordmark__art {
	block-size: var(--gb-wordmark-size-en, 0.62em);
}

@media (forced-colors: active) {
	.gb-wordmark__art {
		fill: CanvasText;
	}
}