/**
 * MHB Hero Slideshow — block styles.
 *
 * Theme-side structural CSS for .mhb-hero lives in the theme. This file
 * handles only the dynamic state styles (slide fade, video tag fit,
 * hidden state).
 */

.mhb-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 600ms ease;
	will-change: opacity;
}

.mhb-hero__slide.is-active {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.mhb-hero__slide {
		transition: none;
	}
}

.mhb-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 1;
	/* Starts invisible; the slide beneath (which we also set as the
	   video's poster) shows through during the load window. Once the
	   `playing` event fires, JS adds .is-ready and the video fades in. */
	opacity: 0;
	transition: opacity 1000ms ease-in-out;
}
.mhb-hero__video.is-ready {
	opacity: 1;
}
/* .is-fading wins because it comes later in the cascade, so adding it on
   top of .is-ready triggers the fade-out back to the slide stack. */
.mhb-hero__video.is-fading {
	opacity: 0;
}

.is-hidden {
	display: none !important;
}