:root {
	--site-image-skeleton-base: #e7efeb;
	--site-image-skeleton-surface: #eef4f1;
	--site-image-skeleton-highlight: rgba(255, 255, 255, 0.88);
	--site-image-skeleton-accent: rgba(80, 185, 100, 0.14);
	--site-image-skeleton-warm: rgba(255, 226, 183, 0.28);
	--site-image-skeleton-ink: rgba(8, 57, 74, 0.08);
	--site-image-skeleton-shadow: rgba(8, 57, 74, 0.16);
}

img.site-image-skeleton[data-image-loading-state="pending"] {
	background-color: var(--site-image-skeleton-base);
	background-image:
		linear-gradient(115deg,
			rgba(255, 255, 255, 0) 18%,
			rgba(255, 255, 255, 0.14) 28%,
			var(--site-image-skeleton-highlight) 40%,
			rgba(255, 255, 255, 0.18) 52%,
			rgba(255, 255, 255, 0) 64%),
		radial-gradient(circle at 16% 20%,
			var(--site-image-skeleton-accent) 0,
			rgba(80, 185, 100, 0) 34%),
		radial-gradient(circle at 84% 82%,
			var(--site-image-skeleton-warm) 0,
			rgba(255, 226, 183, 0) 38%),
		linear-gradient(135deg,
			var(--site-image-skeleton-surface) 0%,
			var(--site-image-skeleton-base) 42%,
			#f8f4ea 100%);
	background-size: 220% 100%, 100% 100%, 100% 100%, 100% 100%;
	background-repeat: no-repeat;
	background-position: 220% 0, 0 0, 0 0, 0 0;
	box-shadow:
		inset 0 0 0 1px var(--site-image-skeleton-ink),
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		0 14px 30px -24px var(--site-image-skeleton-shadow);
	opacity: 0.94;
	will-change: background-position;
	animation: site-image-skeleton-wave 1.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
	transition: opacity 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease;
}

img.site-image-skeleton[data-image-loading-state="loaded"],
img.site-image-skeleton[data-image-loading-state="error"] {
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	opacity: 1;
	animation: none;
}

@keyframes site-image-skeleton-wave {
	0% {
		background-position: 220% 0, 0 0, 0 0, 0 0;
	}

	100% {
		background-position: -40% 0, 0 0, 0 0, 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	img.site-image-skeleton[data-image-loading-state="pending"] {
		animation: none;
		background-position: 40% 0, 0 0, 0 0, 0 0;
	}
}