/*
|--------------------------------------------------------------------------
| NM Site Loader
|--------------------------------------------------------------------------
|
| Initial-document loader only.
|
| The loader masks first-paint FOUC while the WordPress / NM stylesheet
| stack finishes loading. Internal NM SPA transitions do not recreate it.
|
*/


.nm-site-loader {
	position: fixed;
	inset: 0;
	z-index: 2147483000;

	display: flex;
	align-items: center;
	justify-content: center;

	background: #000;

	opacity: 1;
	visibility: visible;

	transition:
		opacity 320ms ease,
		visibility 320ms ease;
}


.nm-site-loader.is-leaving {
	opacity: 0;
	visibility: hidden;

	pointer-events: none;
}


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

.nm-site-loader__mark {
	position: relative;

	width: clamp(118px, 13vw, 190px);
	aspect-ratio: 1.65 / 1;

	background: #fff;

	-webkit-mask-image:
		url("../images/nmLogo.svg");
	mask-image:
		url("../images/nmLogo.svg");

	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;

	-webkit-mask-position: center;
	mask-position: center;

	-webkit-mask-size: contain;
	mask-size: contain;

	opacity: 0;

	transform: scale(0.96);

	animation:
		nm-loader-enter 520ms
			cubic-bezier(0.22, 1, 0.36, 1)
			100ms
			forwards,
		nm-loader-pulse 1200ms
			ease-in-out
			620ms
			infinite;
}


/*
|--------------------------------------------------------------------------
| Scan
|--------------------------------------------------------------------------
*/

.nm-site-loader__mark::after {
	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			90deg,
			transparent 0%,
			rgba(0, 0, 0, 0.35) 42%,
			rgba(0, 0, 0, 0.9) 50%,
			rgba(0, 0, 0, 0.35) 58%,
			transparent 100%
		);

	content: "";

	transform: translateX(-160%);

	animation:
		nm-loader-scan 1450ms
			cubic-bezier(0.65, 0, 0.35, 1)
			400ms
			infinite;
}


/*
|--------------------------------------------------------------------------
| Animation
|--------------------------------------------------------------------------
*/

@keyframes nm-loader-enter {

	from {
		opacity: 0;
		transform: scale(0.94);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}

}


@keyframes nm-loader-pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.78;
	}

}


@keyframes nm-loader-scan {

	0% {
		transform: translateX(-160%);
	}

	60%,
	100% {
		transform: translateX(160%);
	}

}


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

@media (prefers-reduced-motion: reduce) {

	.nm-site-loader {
		transition-duration: 120ms;
	}


	.nm-site-loader__mark {
		opacity: 1;
		transform: none;

		animation: none;
	}


	.nm-site-loader__mark::after {
		display: none;
	}

}