/*
 * Page loader (components/page-loader/, backlog B-11).
 *
 * Pure CSS so it starts drawing the instant it is shown, even while the
 * browser is busy fetching the next page. The class .is-on (set by
 * page-loader.js after 300 ms) starts everything; removing and re-adding it
 * restarts the drawing.
 *
 * The drawing: hairline arrow → its head → the open diamond → both thicken
 * into the logo's turquoise band → the dash slides in → the seed drops onto
 * it → then one soft ring every 1.2 s until the next page arrives.
 * Logo colours are the brand's own and never change.
 */

.gb-loader {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	background: radial-gradient(60% 50% at 50% 45%, #10284A, #071224 75%);
	opacity: 0;
}

.gb-loader[hidden] {
	display: none;
}

.gb-loader.is-on {
	animation: gb-loader-in 0.22s ease-out forwards;
}

@keyframes gb-loader-in {
	to {
		opacity: 1;
	}
}

/* A glass plate behind the logo (the same seat as in the entrance). */
.gb-loader__plate {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: clamp(120px, 18vmin, 170px);
	aspect-ratio: 1;
}

.gb-loader__plate::before {
	content: "";
	position: absolute;
	inset: 7%;
	rotate: 45deg;
	border: 1px solid rgb(255 255 255 / 0.12);
	border-radius: 24%;
	background: rgb(255 255 255 / 0.04);
}

.gb-loader__mark {
	position: relative;
	inline-size: 76%;
	block-size: 76%;
	overflow: visible;
	filter: drop-shadow(0 0 6px rgb(0 202 190 / 0.45));
}

.gb-loader__band {
	fill: none;
	stroke: #E8FFFD;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.gb-loader__head {
	fill: #E8FFFD;
	opacity: 0;
}

.gb-loader__dash {
	fill: #004888;
	opacity: 0;
}

.gb-loader__seed {
	fill: #00A3C4;
	opacity: 0;
}

.gb-loader__ring {
	fill: none;
	stroke: #00A3C4;
	stroke-width: 1.5;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

.is-on .gb-loader__band {
	animation:
		gb-ld-draw 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.1s forwards,
		gb-ld-become 0.3s ease-in-out 1.05s forwards;
}

.is-on .gb-loader__band--frame {
	animation-duration: 0.6s, 0.3s;
	animation-delay: 0.45s, 1.05s;
}

.is-on .gb-loader__head {
	animation:
		gb-ld-head 0.25s ease-out 0.4s forwards,
		gb-ld-head-become 0.3s ease-in-out 1.05s forwards;
}

.is-on .gb-loader__dash {
	animation: gb-ld-dash 0.3s ease-out 1.15s forwards;
}

.is-on .gb-loader__seed {
	animation: gb-ld-seed 0.4s cubic-bezier(0.22, 1, 0.36, 1) 1.25s forwards;
}

.is-on .gb-loader__ring {
	animation: gb-ld-ring 1.2s ease-out 1.65s infinite;
}

@keyframes gb-ld-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes gb-ld-become {
	to {
		stroke: #00CABE;
		stroke-width: 19.8;
	}
}

@keyframes gb-ld-head {
	from {
		opacity: 0;
		translate: 0 8px;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes gb-ld-head-become {
	to {
		fill: #00CABE;
	}
}

@keyframes gb-ld-dash {
	from {
		opacity: 0;
		translate: 16px 0;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes gb-ld-seed {
	from {
		opacity: 0;
		translate: 0 -90px;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes gb-ld-ring {
	from {
		opacity: 0.8;
		scale: 1;
	}

	to {
		opacity: 0;
		scale: 3;
	}
}

/* Reduced motion, or the footer switch «إيقاف الحركة»: the finished logo, still. */
@media (prefers-reduced-motion: reduce) {
	.gb-loader.is-on,
	.gb-loader.is-on * {
		animation-duration: 1ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
	}

	.gb-loader__ring {
		display: none;
	}
}

:root[data-gb-experience="STATIC_ACCESSIBLE"] .gb-loader.is-on,
:root[data-gb-experience="STATIC_ACCESSIBLE"] .gb-loader.is-on * {
	animation-duration: 1ms !important;
	animation-delay: 0s !important;
	animation-iteration-count: 1 !important;
}

:root[data-gb-experience="STATIC_ACCESSIBLE"] .gb-loader__ring {
	display: none;
}