/* Image optimize: lazy preload effects */
.itm-io-img.itm-io-effect-fade,
.itm-io-embed.itm-io-effect-fade {
	opacity: 0;
	transition: opacity 0.45s ease;
}
.itm-io-img.itm-io-effect-fade.itm-io-loaded,
.itm-io-embed.itm-io-effect-fade.itm-io-loaded {
	opacity: 1;
}

.itm-io-img.itm-io-effect-placeholder.itm-io-loading,
.itm-io-embed.itm-io-effect-placeholder.itm-io-loading {
	background: linear-gradient(90deg, #e8e8e8 0%, #f5f5f5 50%, #e8e8e8 100%);
	background-size: 200% 100%;
	animation: itm-io-shimmer 1.2s ease-in-out infinite;
	min-height: 2rem;
}
.itm-io-img.itm-io-effect-placeholder.itm-io-loaded {
	animation: none;
	background: none;
}

.itm-io-img.itm-io-effect-spinner.itm-io-loading,
.itm-io-embed.itm-io-effect-spinner.itm-io-loading {
	position: relative;
}
.itm-io-img.itm-io-effect-spinner.itm-io-loading::after,
.itm-io-embed.itm-io-effect-spinner.itm-io-loading::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.25rem;
	height: 1.25rem;
	margin: -0.625rem 0 0 -0.625rem;
	border: 2px solid rgba(0, 0, 0, 0.15);
	border-top-color: rgba(0, 0, 0, 0.55);
	border-radius: 50%;
	animation: itm-io-spin 0.7s linear infinite;
	pointer-events: none;
}
.itm-io-img.itm-io-effect-spinner.itm-io-loaded::after,
.itm-io-embed.itm-io-effect-spinner.itm-io-loaded::after {
	display: none;
}

@keyframes itm-io-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}
@keyframes itm-io-spin {
	to { transform: rotate(360deg); }
}