/*!*************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/features/images/image-placeholders.css ***!
  \*************************************************************************************************************************************/
/**
 * Image Placeholders
 *
 * Provides smooth loading placeholders for images using dominant color
 * and shimmer effects. Works with the data attributes generated by
 * ImagePlaceholders.php.
 *
 * @package Mustard\Assets\CSS\Features\Images
 */

/* ==========================================================================
   Image Container Base Styles
   ========================================================================== */

/* Containers maintain their own backgrounds - placeholder effects are on img only */

/* ==========================================================================
   Image Element Styles
   ========================================================================== */

/* Ensure images have proper transitions */
/* Don't set z-index - let themes control stacking with their pseudo-elements */
.wp-block-image:not(figure) img,
figure.wp-block-image img {
	transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hide images with dominant color data until loaded */
/* Exclude SVGs */
.wp-block-image:not(figure) img[data-dominant-color]:not([src$='.svg']),
figure.wp-block-image img[data-dominant-color]:not([src$='.svg']) {
	opacity: 0;
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Show images when loaded */
.wp-block-image:not(figure) img.loaded,
figure.wp-block-image img.loaded {
	opacity: 1;
}

/* Clear background when image is loaded */
img[data-dominant-color].loaded {
	background: none;
	animation: none;
}

/* ==========================================================================
   Shimmer Effect (Background-based, YouTube-style)
   ========================================================================== */

/* Apply placeholder background and shimmer directly to img elements */
/* Exclude SVGs and loaded images */
img[data-dominant-color]:not([src$='.svg']):not(.loaded) {
	display: block; /* Ensure background is visible */
	background: linear-gradient(90deg, var(--dominant-color, #f0f0f0) 0%, rgb(255 255 255 / 40%) 50%, var(--dominant-color, #f0f0f0) 100%);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite linear;
	transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced shimmer for images with transparency data */
/* Exclude SVGs */
img.has-transparency[data-dominant-color]:not(.loaded):not([src$='.svg']) {
	background: linear-gradient(90deg, var(--dominant-color, #f0f0f0) 0%, rgb(255 255 255 / 50%) 33%, rgb(255 255 255 / 50%) 66%, var(--dominant-color, #f0f0f0) 100%);
	background-size: 200% 100%;
	animation: shimmer 1.8s infinite linear; /* Slightly slower for transparency */
}

/* ==========================================================================
   Shimmer Animation (YouTube-style)
   ========================================================================== */

@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}

	100% {
		background-position: 200% 0;
	}
}

/* ==========================================================================
   Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	/* Disable shimmer animation for all images */
	/* Exclude SVGs */
	img[data-dominant-color]:not([src$='.svg']):not(.loaded) {
		background: var(--dominant-color, #f0f0f0);
		animation: none;
	}

	/* Faster transitions for reduced motion */
	.wp-block-image:not(figure) img,
	figure.wp-block-image img {
		transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	}
}

/* ==========================================================================
   Fallback for browsers without :has() support
   ========================================================================== */

/* Modern browsers with :has() support will use the rules above */

/* For older browsers, we'll fall back to the previous overlay approach */
@supports not (selector(:has(*))) {
	@keyframes shimmer-legacy {
		0% {
			transform: translateX(-100%);
		}

		100% {
			transform: translateX(100%);
		}
	}

	/* Disable legacy shimmer for reduced motion */
	@media (prefers-reduced-motion: reduce) {
		.mu-image-shimmer {
			animation: none;
		}
	}
	/* Legacy shimmer element (only created if needed) */
	.mu-image-shimmer {
		width: 200%;
		height: 100%;
		position: absolute;
		top: 0;
		left: -100%;
		z-index: 1;
		background: linear-gradient(90deg, transparent 0%, transparent 10%, rgb(255 255 255 / 40%) 50%, transparent 90%, transparent 100%);
		pointer-events: none;
		animation: shimmer-legacy 2s infinite ease-in-out;
	}

	/* Hide shimmer when image is loaded */
	.image-loaded .mu-image-shimmer {
		display: none;
	}
}

/*!**********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./assets/src/css/mu-image-placeholders.css ***!
  \**********************************************************************************************************************************************************************************************/
/**
 * Image Placeholders (front-end)
 *
 * Loaded only when the image placeholders feature is enabled.
 * Uses real values; no dependency on Mustard variables.
 *
 * @package Mustard
 */


/*# sourceMappingURL=mu-image-placeholders-style.min.css.map*/