/********************************************************/
/*
/*      Loading transition CSS
/*
/********************************************************/
/* body:not(.wp-admin):not(.loaded, .hide-loading-overlay) {
	overflow-y: hidden;
} */

.loading-overlay {
	display: grid;
	grid-template-rows: 1.5fr 1fr;
	grid-template-columns: 1fr 1.5fr;
	grid-template-areas:
		'logo-text logo-icon'
		'loader	   loader';
	justify-content: center;
	align-items: center;
	column-gap: var(--wp--preset--spacing--3);
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100vh;
	background-color: var(--wp--preset--color--noir);
	padding: 12.5vh var(--wp--custom--outer-pad) 7.5vh;
	box-sizing: border-box;
	opacity: 1;
	transition: opacity .3s;
	pointer-events: all;
	z-index: 101;
	
	& > * {
		user-select: none;
		pointer-events: none;
	}
	
	& > .logo-text {
		grid-area: logo-text;
		justify-self: end;
		width: 100%;
		max-width: 500px;
		filter: var(--wp--custom--color--filter--blanc);
	}
	
	& > .logo-icon {
		grid-area: logo-icon;
		justify-self: center;
		width: 100%;
		max-width: 600px;
	}
	
	& > .loader {
		grid-area: loader;
		justify-self: center;
		z-index: 21;
		
		animation-name: loader-out;
		animation-duration: .3s;
		animation-play-state: paused;
		animation-fill-mode: forwards;
		
		&::before  {
			--scale: 2.5;
			
			content: '';
			display: block;
			width: calc(70px * var(--scale));
			height: calc(26px * var(--scale));
			background:  var(--wp--preset--color--blanc);
			border-radius: calc(50px * var(--scale));
			
			--c: no-repeat radial-gradient(farthest-side,#000 92%,#0000);
			--s: calc(18px * var(--scale)) calc(18px * var(--scale));
			
			mask: var(--c) left calc(4px * var(--scale)) top 50%, var(--c) center, var(--c) right calc(4px * var(--scale)) top 50%, linear-gradient(#000 0 0);
			mask-composite: exclude;
			
			animation: loader-anim 1.5s infinite;
		}
	}
}

body:is(.loaded, .hide-loading-overlay) .loading-overlay {
	opacity: 0;
	pointer-events: none;
}

@media (width <= 1400px) {
	.loading-overlay {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		
		& > .logo-text {
			justify-self: center;
		}
	}
}

@media (width <= 900px) {
	.loading-overlay {
		display: flex;
		flex-direction: column;
		justify-content: start;
		gap: var(--wp--preset--spacing--3);
		
		& > .logo-icon {
			order: -1;
			max-width: 300px;
			translate: -100px;
		}
		
		& > .loader {
			margin-block-start: auto;
		}
	}
}

@media (width <= 600px) {
	.loading-overlay {
		& > .logo-text {
			max-width: min(90%, 400px);
		}
		
		& > .logo-icon {
			max-width: min(90%, 250px);
			translate: unset;
		}
		
		& > .loader {
			align-self: center;
		}
	}
}

@media (height <= 620px) {
	.loading-overlay {
		& > .logo-icon {
			display: none;
		}
	}
}

@media (height <= 420px) {
	.loading-overlay {
		& > .logo-text {
			display: none;
		}
	}
}