/********************************************************/
/*
/*      View transition CSS
/*
/********************************************************/
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--accent);
	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;
	}
	
	&::after {
		content: '';
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		background-image: var(--wp--custom--effects--noise);
		background-size: auto;
		background-repeat: repeat;
		z-index: -1;
	}
	
	& > * {
		height: 100%;
		object-fit: contain;
		margin: auto;
		user-select: none;
		pointer-events: none;
		filter: var(--wp--custom--color--spring-wood-white--filter);
	}
	
	& > .logo {
		grid-row: 1;
		width: min(500px, calc(100% * (2/3)));
		max-height: 50svh;
	}
	
	& > .loading {
		grid-row: 2;
		width: min(120px, 50vw);
		max-height: 30svh;
		z-index: 21;
	}
}