/* Site preloader — brief logo hold, then parallel fade + curtain. */

.site-preloader {
	/* Mobile (Figma 426) */
	--site-preloader-logo-start: 100px;
	--site-preloader-logo-end: 282px;
	--site-preloader-logo-scale: 0.35461;
	--site-preloader-logo-in-ease: ease-out;
	--site-preloader-duration: 2.1s;
	--site-preloader-logo-in: 1.2s;
	--site-preloader-logo-out: 0.32s;
	--site-preloader-logo-out-delay: 1.4s;
	--site-preloader-logo-out-ease: ease-in;
	--site-preloader-curtain-delay: 1.4s;
	--site-preloader-curtain-duration: 0.7s;
	--site-preloader-curtain-ease: ease-in;
	--site-preloader-top-cover: max(env(safe-area-inset-top, 0px), 52px);
	--site-preloader-bottom-cover: env(safe-area-inset-bottom, 0px);

	position: fixed;
	inset: 0;
	z-index: 100000;
	overflow: hidden;
	pointer-events: auto;
	background: transparent;
}

html.site-preloader-ready .site-preloader {
	animation: site-preloader-pointer-off 0s linear var(--site-preloader-curtain-delay) forwards;
}

@keyframes site-preloader-pointer-off {
	to {
		pointer-events: none;
	}
}

.site-preloader__curtain {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000000;
	box-shadow: 0 calc(-1 * var(--site-preloader-top-cover)) 0 var(--site-preloader-top-cover) #000000;
	will-change: transform;
}

html.site-preloader-ready .site-preloader__curtain {
	animation: site-preloader-curtain-up var(--site-preloader-curtain-duration) var(--site-preloader-curtain-ease) var(--site-preloader-curtain-delay) forwards;
}

.site-preloader__logo {
	display: block;
	width: var(--site-preloader-logo-end);
	max-width: 82vw;
	height: auto;
	opacity: 0;
	transform: scale3d(var(--site-preloader-logo-scale), var(--site-preloader-logo-scale), 1);
	transform-origin: center center;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	will-change: transform, opacity;
}

html.site-preloader-ready .site-preloader__logo {
	animation:
		site-preloader-logo-in var(--site-preloader-logo-in) var(--site-preloader-logo-in-ease) forwards,
		site-preloader-logo-out var(--site-preloader-logo-out) var(--site-preloader-logo-out-ease) var(--site-preloader-logo-out-delay) forwards;
}

@keyframes site-preloader-logo-in {
	from {
		opacity: 0;
		transform: scale3d(var(--site-preloader-logo-scale), var(--site-preloader-logo-scale), 1);
	}

	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}

@keyframes site-preloader-logo-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes site-preloader-curtain-up {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(0, calc(-100% - var(--site-preloader-top-cover)), 0);
	}
}

/* Tablet — Figma iPad Pro 12.9 (22:923) */
@media (min-width: 768px) {
	.site-preloader {
		--site-preloader-logo-start: 130px;
		--site-preloader-logo-end: 244px;
		--site-preloader-logo-scale: 0.35519;
		--site-preloader-top-cover: env(safe-area-inset-top, 0px);
	}
}

/* Laptop — Figma 1440 (22:922) */
@media (min-width: 1200px) {
	.site-preloader {
		--site-preloader-logo-start: 152px;
		--site-preloader-logo-end: 306px;
		--site-preloader-logo-scale: 0.49673;
	}
}

/* Desktop — Figma 1920 (22:921) */
@media (min-width: 1600px) {
	.site-preloader {
		--site-preloader-logo-start: 173px;
		--site-preloader-logo-end: 489px;
		--site-preloader-logo-scale: 0.35378;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-preloader,
	.site-preloader__curtain,
	.site-preloader__logo {
		animation: none !important;
	}
}