/**
 * Something to look at while a full-size photo loads.
 *
 * Envira's lightbox loads the photo first and only then builds the frame, so
 * clicking a picture on a slow connection does nothing visible at all for as
 * long as the download takes. This covers that gap.
 */

.sgp-lbload {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 12, 12, 12, 0.92 );

	/*
	 * Above the page, and above envirabox's own overlay if it has already put
	 * one up. Nothing else on the site goes near this range.
	 */
	z-index: 999999990;

	opacity: 1;
	transition: opacity 220ms ease;
}

.sgp-lbload.is-going {
	opacity: 0;
	pointer-events: none;
}

/*
 * A fixed box with object-fit does the letterboxing, rather than leaving the
 * sizing to the constraint rules for replaced elements. The photo is only ever
 * a blurred stand-in, so being exact matters less than being predictable.
 */
.sgp-lbload-shell {
	position: relative;
	width: 88vw;
	height: 86vh;
	overflow: hidden;
}

.sgp-lbload-thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;

	/*
	 * The gallery thumbnail, blown up and blurred hard. It is already in the
	 * browser cache, so it paints immediately and costs nothing to show.
	 *
	 * Blur bleeds past the edges of what it is applied to and fades to
	 * transparent there, so the picture is scaled up slightly and the overflow
	 * clipped by the shell, leaving a solid edge.
	 */
	filter: blur( 26px );
	filter: blur( 4vmin );
	transform: scale( 1.08 );
	opacity: 0.82;
}

/* No thumbnail was available, so there is nothing to blur. */
.sgp-lbload.is-bare .sgp-lbload-shell {
	display: none;
}

.sgp-lbload-spin {
	position: absolute;
	width: 54px;
	height: 54px;
	border: 4px solid rgba( 255, 255, 255, 0.28 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: sgp-lbload-turn 900ms linear infinite;
}

@keyframes sgp-lbload-turn {
	to {
		transform: rotate( 360deg );
	}
}

/*
 * A spinner is motion for its own sake to anyone who has asked for less of it.
 * The ring stays, and breathes instead of turning, so it still reads as work
 * in progress.
 */
@media ( prefers-reduced-motion: reduce ) {
	.sgp-lbload-spin {
		animation: sgp-lbload-breathe 1600ms ease-in-out infinite;
		border-top-color: rgba( 255, 255, 255, 0.28 );
		border-color: rgba( 255, 255, 255, 0.7 );
	}

	@keyframes sgp-lbload-breathe {
		0%, 100% { opacity: 0.35; }
		50%      { opacity: 1; }
	}

	.sgp-lbload {
		transition: none;
	}
}

.sgp-lbload-said {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}