@charset "UTF-8";
/**
 * GenieBuilder — listing photos while they load.
 *
 * A listing photo arrives from the MLS photo service, often a moment after
 * the page. Until it does, the browser prints the photo's description in
 * its place. Instead, the space shows a soft grey panel with a slow sweep,
 * the same loading look as mlsg-skeleton.css, and the photo fades in over
 * it. mlsg-gb-photo-fallback.js marks each photo once it has loaded
 * (data-mlsg-photo) and swaps in the stand-in image for one that fails.
 *
 * The selector list matches PHOTOS in mlsg-gb-photo-fallback.js.
 *
 * @package GenieBuilder
 * @since   2.1.1200
 */

@keyframes mlsg-gb-photo-sweep {
	0%   { background-position: 150% 0; }
	100% { background-position: -50% 0; }
}

/* The grey panel appears only once a photo has kept the visitor waiting.
   A photo the browser already has (most of them, once a search has run)
   lands in a frame or two, and a panel flashed in before it reads as a
   flicker. */
@keyframes mlsg-gb-photo-wait {
	from, to {
		background-color: var(--mlsg-gb-color-placeholder, #f2f4f7);
		background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%);
	}
}

@keyframes mlsg-gb-photo-in {
	from { opacity: 0; }
}

:is(
	.mlsg-gb-card img,
	.mlsg-rv__thumb img,
	.mlsg-gb-single__stage img,
	.mlsg-gb-single__thumb img,
	.mlsg-gb-listing-gallery img,
	.mlsg-gb-suggest__thumb,
	.mlsg-sold-card__img,
	.mlsg-sold__img,
	.mlsg-gb-discovery__img
):not([data-mlsg-photo]) {
	/* The description is still the photo's accessible name; it is only not drawn. */
	color: transparent;
	background-size: 60% 100%;
	background-repeat: no-repeat;
	animation:
		mlsg-gb-photo-wait 0s linear 0.15s forwards,
		mlsg-gb-photo-sweep 1.4s ease-in-out 0.15s infinite;
}

/* Arrived after the panel showed: fades in. No fill, so a photo a slider
   keeps hidden returns to its own opacity afterwards. One that came at
   once is marked "ready" and simply appears. */
[data-mlsg-photo="shown"] {
	animation: mlsg-gb-photo-in 0.25s ease-out;
}

@media (prefers-reduced-motion: reduce) {
	:is(
		.mlsg-gb-card img,
		.mlsg-rv__thumb img,
		.mlsg-gb-single__stage img,
		.mlsg-gb-single__thumb img,
		.mlsg-gb-listing-gallery img,
		.mlsg-gb-suggest__thumb,
		.mlsg-sold-card__img,
		.mlsg-sold__img,
		.mlsg-gb-discovery__img
	):not([data-mlsg-photo]) {
		animation: mlsg-gb-photo-wait 0s linear 0.15s forwards;
		background-size: 0 0;
	}

	[data-mlsg-photo="shown"] {
		animation: none;
	}
}