/*
 * بالعربي: خلفية هادية بتتحرك ببطء على طول في كل صفحات الموقع: بقع فاتحة بألوان اللوجو؛ الحركة نفسها من ambient.js.
 * English: A calm background that drifts slowly on every page: pale washes in the logo's colours; the drift itself is ambient.js.
 *
 * The markup is in footer.php (.gb-ambient, three washes), after the page,
 * fixed to the screen: very pale colours laid over the page, so they read as
 * the background of every light section without changing any section's CSS.
 * Clicks go through it (pointer-events: none), screen readers skip it
 * (aria-hidden).
 *
 * Made to cost (almost) nothing: one layer for the three washes (no blend
 * mode, no will-change, a 2D transform only), and no CSS animation — a CSS
 * animation redraws the screen 60 times a second for ever, which made the
 * site feel heavy. assets/js/ambient.js moves the washes a few pixels about
 * eight times a second instead (invisible steps on such soft colours),
 * starting from these places once the page and the intro are done, and not
 * at all while the page scrolls, is hidden or is being left.
 *
 * Still (the washes stay where they are): no capability level, the
 * STATIC_ACCESSIBLE level, the system's reduced motion, the footer's
 * «إيقاف الحركة» switch — ambient.js checks the same. Hidden in print and in
 * forced colours.
 */

.gb-ambient {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	contain: strict;
}

.gb-ambient__wash {
	position: absolute;
	inline-size: 64vmax;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, var(--gb-ambient-colour), transparent);
}

/* Turquoise, top corner. */
.gb-ambient__wash--a {
	--gb-ambient-colour: rgb(0 202 190 / 0.12);

	inset-block-start: -24vmax;
	inset-inline-start: -18vmax;
}

/* The seed's blue, bottom corner. */
.gb-ambient__wash--b {
	--gb-ambient-colour: rgb(0 163 196 / 0.10);

	inset-block-end: -28vmax;
	inset-inline-end: -22vmax;
}

/* The logo's navy, faint, in the middle. */
.gb-ambient__wash--c {
	--gb-ambient-colour: rgb(0 72 136 / 0.05);

	inline-size: 50vmax;
	inset-block-start: 20%;
	inset-inline-start: 30%;
}

@media print, (forced-colors: active) {
	.gb-ambient {
		display: none;
	}
}