/********************************************************/
/*
/*      View transition CSS
/*
/********************************************************/
/* TODO: REMAKE LOADING TRANSITION USING THE VIEW TRANSITION API */
body:not(.wp-admin):not(.loaded, .hide-loading-overlay) {
	overflow-y: hidden;
}

.loading-overlay {
	display: grid;
	grid-template-rows: 2fr 1fr;
	grid-template-columns: 1fr;
	justify-content: center;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100vh;
	background-color: var(--wp--custom--color--default--text);
	padding: 12.5vh 0 7.5vh;
	box-sizing: border-box;
	opacity: 1;
	transition: opacity var(--wp--custom--speed--medium);
	pointer-events: all;
	z-index: 20;
	
	body:is(.loaded, .hide-loading-overlay) & {
		opacity: 0;
		pointer-events: none;
	}
	
	& > * {
		height: 100%;
		object-fit: contain;
		margin: auto;
		user-select: none;
		pointer-events: none;
		filter: var(--wp--custom--color--white--filter);
		/* Add theme-specific color filter here */
	}
	
	& > .logo {
		grid-row: 1;
		width: min(1000px, calc(100% * (2/3)));
		max-height: 50svh;
	}
	
	& > .loading {
		grid-row: 2;
		width: min(250px, 50vw);
		max-height: 30svh;
		z-index: 21;
	}
}