/* Stack every .bg image inside the target section on top of each other */
.acf-hero-bg .section-bg img.bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1);
	/* transform duration kept close to heroBgSlides.interval (6s in the JS)
	   so a slide's zoom-in has time to read before it swaps out, and the
	   zoom-back-down eases smoothly instead of snapping if it's cut short */
	transition: opacity 1.4s ease, transform 6s ease-out;
	z-index: 0;
}

/* Progressive enhancement: the original (first) image stays visible
   even if JS is slow to load or fails, so there's no blank flash */
.acf-hero-bg .section-bg img.bg:first-of-type {
	opacity: 1;
}

/* The active slide fades in and slowly zooms for the whole time it's showing */
.acf-hero-bg .section-bg img.bg.is-active {
	opacity: 1;
	transform: scale(1.15);
}