[data-site-image-loader] {
	position: relative;
	--site-image-loader-fit: cover;
	--site-image-loader-position: 50% 50%;
	--site-image-loader-z: 1;
}

[data-site-image-loader] > img {
	opacity: 0;
}

[data-site-image-loader].is-image-loaded > img,
[data-site-image-loader].is-image-error > img {
	opacity: 1;
}

[data-site-image-loader].is-image-loaded > img {
	animation: site-image-loader-reveal 420ms cubic-bezier(.2, .72, .22, 1) both;
}

.site-image-loader__effect {
	position: absolute;
	inset: 0;
	z-index: var(--site-image-loader-z);
	display: grid;
	border-radius: inherit;
	place-items: center;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 180ms ease;
}

[data-site-image-loader].is-image-loading > .site-image-loader__effect {
	opacity: 1;
}

.site-image-loader__shine {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		108deg,
		transparent 27%,
		rgba(77, 204, 255, .045) 40%,
		rgba(153, 121, 255, .18) 49%,
		rgba(225, 218, 255, .25) 51%,
		rgba(126, 96, 255, .14) 55%,
		rgba(65, 207, 255, .035) 64%,
		transparent 75%
	);
	background-position: 180% 50%;
	background-size: 250% 100%;
	filter: drop-shadow(0 0 5px rgba(140, 108, 255, .12));
	-webkit-mask-image: var(--site-image-loader-mask, none);
	-webkit-mask-position: var(--site-image-loader-position);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: var(--site-image-loader-fit);
	mask-image: var(--site-image-loader-mask, none);
	mask-position: var(--site-image-loader-position);
	mask-repeat: no-repeat;
	mask-size: var(--site-image-loader-fit);
	animation: site-image-loader-shimmer 1.3s linear infinite;
}

.site-image-loader__spinner {
	position: relative;
	width: clamp(14px, 18%, 28px);
	aspect-ratio: 1;
	border: 1px solid rgba(213, 220, 247, .18);
	border-top-color: rgba(164, 140, 255, .72);
	border-right-color: rgba(65, 207, 255, .28);
	border-radius: 50%;
	box-shadow: 0 0 10px rgba(140, 108, 255, .08);
	animation: site-image-loader-spin 720ms linear infinite;
}

[data-site-background-loader] {
	background-image: var(--site-background-loader-image, none);
	opacity: 0;
	transition: opacity 720ms cubic-bezier(.2, .72, .22, 1);
}

[data-site-background-loader].is-image-loaded {
	opacity: 1;
}

@keyframes site-image-loader-shimmer {
	to { background-position: -180% 50%; }
}

@keyframes site-image-loader-spin {
	to { transform: rotate(360deg); }
}

@keyframes site-image-loader-reveal {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	[data-site-image-loader].is-image-loaded > img,
	.site-image-loader__shine,
	.site-image-loader__spinner {
		animation: none;
	}

	.site-image-loader__effect,
	[data-site-background-loader] {
		transition-duration: .01ms;
	}
}