/**
 * Shared product and service image loading state for Build.Voto projects.
 */

.image-loading-skeleton {
	background-color: #e8edf3;
	background-image: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0) 20%,
		rgba(255, 255, 255, 0.72) 50%,
		rgba(255, 255, 255, 0) 80%
	);
	background-position: 180% 0;
	background-repeat: no-repeat;
	background-size: 55% 100%;
	animation: image-skeleton-shimmer 1.15s ease-in-out infinite;
}

.image-loading-complete {
	animation: image-load-settle 180ms cubic-bezier(.22, 1, .36, 1) both;
}

.image-load-failed {
	opacity: 0;
}

.image-load-failed-shell {
	position: relative;
	min-height: 120px;
	background: #e8edf3;
	color: #475569;
}

.image-load-failed-shell::after {
	content: attr(data-image-fallback);
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 16px;
	font: 600 14px/1.4 system-ui, sans-serif;
	text-align: center;
}

@keyframes image-load-settle {
	from { opacity: .72; }
	to { opacity: 1; }
}

@keyframes image-skeleton-shimmer {
	to {
		background-position: -180% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.image-loading-skeleton {
		animation: none;
		background-image: none;
	}

	.image-loading-complete {
		animation: none;
	}
}

/* EOF */