/**
 * Standards FM preloader — "Logo and wordmark" (c4) concept.
 *
 * Sequence (single pass, 2.4s):
 *   0–28%  navy shape rises (scaleY)
 *   28–50% green check wipes in
 *   45–75% wordmark tracks in from loose letterspacing
 *   55–85% green underline grows
 * then the overlay fades out (JS adds .sfm-preloader--done).
 */

.sfm-preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.55s ease, visibility 0s linear 0s;
}

.sfm-preloader--done {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.55s ease, visibility 0s linear 0.55s;
}

html.sfm-is-loading,
html.sfm-is-loading body {
	overflow: hidden;
	height: 100%;
}

.sfm-preloader__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 24px;
}

/* Logo -------------------------------------------------------------- */

.sfm-preloader__logo {
	width: clamp(84px, 18vw, 120px);
	height: auto;
	overflow: visible;
}

.sfm-preloader__path {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	animation: sfmPlRise 2.4s cubic-bezier(0.65, 0, 0.25, 1) both;
}

@keyframes sfmPlRise {
	0% {
		transform: scaleY(0);
	}
	28%,
	100% {
		transform: scaleY(1);
	}
}

.sfm-preloader__check {
	animation: sfmPlWipe 2.4s cubic-bezier(0.65, 0, 0.25, 1) both;
}

@keyframes sfmPlWipe {
	0%,
	28% {
		clip-path: inset(100% 0 0 0);
	}
	50%,
	100% {
		clip-path: inset(0);
	}
}

/* Wordmark ---------------------------------------------------------- */

.sfm-preloader__wordmark {
	margin-top: 18px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.32em;
	color: #001357;
	text-transform: uppercase;
	white-space: nowrap;
	animation: sfmPlWord 2.4s ease both;
}

@keyframes sfmPlWord {
	0%,
	45% {
		opacity: 0;
		letter-spacing: 0.7em;
	}
	75%,
	100% {
		opacity: 1;
		letter-spacing: 0.32em;
	}
}

/* Green underline --------------------------------------------------- */

.sfm-preloader__line {
	width: 0;
	height: 1px;
	margin-top: 8px;
	background: #70cf17;
	animation: sfmPlLine 2.4s ease both;
}

@keyframes sfmPlLine {
	0%,
	55% {
		width: 0;
		opacity: 1;
	}
	85%,
	100% {
		width: 70px;
		opacity: 1;
	}
}

/* Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sfm-preloader__path,
	.sfm-preloader__check,
	.sfm-preloader__wordmark,
	.sfm-preloader__line {
		animation-duration: 0.01s;
	}
}