/**
 * =================================================================
 * High-Speed Performance - Lazy Load Frontend Styles
 *
 * This file handles the appearance of images before and during
 * the lazy loading process.
 *
 * @version 1.0.0
 * =================================================================
 */

/*
 * The initial state for any image that is set to be lazy-loaded.
 *
 * 1. `opacity: 0;` makes the image initially invisible.
 * 2. `transition` prepares for a smooth fade-in effect.
 * 3. `background-color` provides a subtle placeholder, reserving the space.
 * 4. `height: auto;` works with the width/height attributes on the <img> tag
 * to let the browser calculate the aspect ratio and prevent content jump.
 * 5. `min-height` is a fallback for rare cases where an image might not have
 * dimensions, preventing it from collapsing to zero height.
*/
img.hsp-lazy {
	opacity: 0;
	transition: opacity 400ms ease-in-out;

	background-color: #f0f0f1; /* A light gray placeholder */
	height: auto;
	min-height: 50px;
}

/*
 * The loaded state for the image.
 *
 * Our JavaScript will add this 'is-loaded' class after setting the
 * image's 'src' attribute. This change in opacity from 0 to 1
 * triggers the fade-in animation defined above.
*/
img.hsp-lazy.is-loaded {
	opacity: 1;
}

/*
 * You can also apply this to iframes for lazy-loaded videos.
 */
iframe.hsp-lazy {
	opacity: 0;
	transition: opacity 400ms ease-in-out;
	background-color: #f0f0f1;
}

iframe.hsp-lazy.is-loaded {
	opacity: 1;
}