.larq-splash {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: #FAFAF7;
	display: grid;
	place-items: center;
	pointer-events: none;
	will-change: opacity;
}

.larq-splash[hidden] {
	display: none;
}

.larq-splash__logo {
	width: clamp(180px, 22vw, 260px);
	height: auto;
	opacity: 0;
	transform: scale(0.92);
	mask-image: linear-gradient(90deg, #000 0%, #000 var(--reveal, 0%), transparent var(--reveal, 0%));
	-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 var(--reveal, 0%), transparent var(--reveal, 0%));
	animation: larq-logo-in 1.4s cubic-bezier(.2,.7,.2,1) forwards;
}

@property --reveal {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 0%;
}

@keyframes larq-logo-in {
	0%   { opacity: 0; transform: scale(0.94); --reveal: 0%; }
	15%  { opacity: 1; }
	100% { opacity: 1; transform: scale(1);    --reveal: 100%; }
}

.larq-splash.is-out {
	opacity: 0;
	transition: opacity 500ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.larq-splash__logo {
		animation: none;
		opacity: 1;
		transform: none;
		mask-image: none;
		-webkit-mask-image: none;
	}
	.larq-splash.is-out {
		transition: opacity 200ms linear;
	}
}

body.larq-splash-locked {
	overflow: hidden;
}