/*
 * Page-load preloader (components/preloader.ejs): navy overlay, white logo wipes into the gradient logo.
 * Background: the homepage's 40px navy grid drifting slowly, two brand-blue glows and a pulse behind the logo.
 */
.site-preloader {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: linear-gradient(160deg, #0F1B2D 0%, #16294A 100%);
	transition: opacity 0.8s ease, visibility 0.8s ease;
	/* CSS-only fallback: if the script never runs, still get out of the way */
	animation: site-preloader-fallback 0s linear 7s forwards;
}

/* Already shown earlier in this visit (flag set by the script in head.ejs) */
.preloader-seen .site-preloader {
	display: none;
}

.site-preloader.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.site-preloader__bg,
.site-preloader__bg > span {
	position: absolute;
	pointer-events: none;
}

.site-preloader__bg {
	inset: 0;
}

/* Grid is 80px oversized so it can drift one full cell and loop seamlessly; faded out towards the edges */
.site-preloader__grid {
	inset: -80px;
	background-image:
		linear-gradient(rgba(140, 170, 230, 0.1) 1px, transparent 1px),
		linear-gradient(90deg, rgba(140, 170, 230, 0.1) 1px, transparent 1px);
	background-size: 40px 40px;
	-webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 0%, transparent 100%);
	mask-image: radial-gradient(closest-side at 50% 50%, #000 0%, transparent 100%);
	animation: site-preloader-grid 6s linear infinite;
}

.site-preloader__orb {
	width: 60vmax;
	height: 60vmax;
	border-radius: 50%;
	filter: blur(40px);
	opacity: 0.55;
	will-change: transform;
}

.site-preloader__orb--a {
	top: -30vmax;
	left: -20vmax;
	background: radial-gradient(circle, rgba(34, 217, 252, 0.45) 0%, transparent 65%);
	animation: site-preloader-orb-a 7s ease-in-out infinite alternate;
}

.site-preloader__orb--b {
	bottom: -32vmax;
	right: -22vmax;
	background: radial-gradient(circle, rgba(80, 104, 188, 0.6) 0%, transparent 65%);
	animation: site-preloader-orb-b 8s ease-in-out infinite alternate;
}

/* Soft ring that swells out from behind the logo as it turns gradient */
.site-preloader__pulse {
	top: 50%;
	left: 50%;
	width: 340px;
	height: 340px;
	margin: -170px 0 0 -170px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(27, 172, 241, 0.28) 0%, rgba(27, 172, 241, 0) 65%);
	opacity: 0;
	transform: scale(0.4);
	animation: site-preloader-pulse 2.6s ease-out 0.9s infinite;
}

.site-preloader__logo {
	position: relative;
	z-index: 1;
	width: min(260px, 64vw);
	aspect-ratio: 174 / 35;
	animation: site-preloader-in 0.7s ease-out both;
}

.site-preloader__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Gradient logo is revealed from the left as the white one is clipped away; the script drives both clips as load progress */
.site-preloader__svg--gradient {
	clip-path: inset(0 100% 0 0);
}

.site-preloader__svg--white {
	clip-path: inset(0 0 0 0);
}

/* Tagline fades up and settles its letter-spacing as the wipe finishes */
.site-preloader__text {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0 16px;
	font-family: var(--font-display, "Manrope", system-ui, sans-serif);
	font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-align: center;
	color: rgba(214, 226, 245, 0.8);
	opacity: 0;
	animation: site-preloader-text 0.9s ease-out 1.8s forwards;
}

@keyframes site-preloader-text {
	from { opacity: 0; transform: translateY(8px); letter-spacing: 0.2em; }
	to { opacity: 1; transform: translateY(0); letter-spacing: 0.08em; }
}

@keyframes site-preloader-in {
	from { opacity: 0; transform: scale(0.96); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes site-preloader-grid {
	to { transform: translate3d(40px, 40px, 0); }
}

@keyframes site-preloader-orb-a {
	to { transform: translate3d(14vmax, 10vmax, 0) scale(1.15); }
}

@keyframes site-preloader-orb-b {
	to { transform: translate3d(-12vmax, -9vmax, 0) scale(1.1); }
}

@keyframes site-preloader-pulse {
	0% { opacity: 0; transform: scale(0.4); }
	30% { opacity: 1; }
	100% { opacity: 0; transform: scale(1.6); }
}

@keyframes site-preloader-fallback {
	to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
	.site-preloader__logo,
	.site-preloader__bg > span { animation: none; }
	.site-preloader__pulse { display: none; }
	.site-preloader__text { animation: none; opacity: 1; }
	.site-preloader__svg--gradient,
	.site-preloader__svg--white { clip-path: none; }
	.site-preloader__svg--white { opacity: 0; }
}