/* Cover Background Rotator — frontend styles */

.wp-block-cover.has-cbr-rotator {
	/* core/cover already has position: relative; this is just defensive. */
	position: relative;
	overflow: hidden;
	/* Contain this block's own stacking order in one self-sufficient layer,
	   so the negative z-index layers below can't bleed into other blocks
	   on the page (and so this stays a single shared context for blend
	   modes used on text inside the cover). */
	isolation: isolate;
}

.cbr-rotator {
	position: absolute;
	inset: 0;
	/* Negative z-index pulls this behind ordinary in-flow content (the
	   inner-container) in paint order, without the inner-container ever
	   needing position/z-index of its own. That matters for mix-blend-mode:
	   any element with an explicit z-index becomes a new stacking context,
	   and elements can only blend with what's painted in their *own*
	   stacking context. Keep the inner-container un-stacked so text inside
	   it can still blend against these images. */
	z-index: -2;
	pointer-events: none;
	overflow: hidden;
}

.cbr-rotator .cbr-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	opacity: 0;
	transition: opacity var(--cbr-fade, 1500ms) ease-in-out;
	will-change: opacity;
}

/* "Contain" fit: show the whole image, uncropped, centered both
   horizontally and vertically within the Cover block. Any leftover
   space reveals whatever sits behind the rotator (the Cover block's
   placeholder image/color, then its dim overlay on top of that). */
.cbr-rotator.cbr-fit-contain .cbr-slide {
	object-fit: contain;
	object-position: center center;
}

.cbr-rotator .cbr-slide.is-active {
	opacity: 1;
}

/* No position/z-index override on .wp-block-cover__inner-container here on
   purpose: giving it an explicit z-index would make it its own stacking
   context and break mix-blend-mode on any text inside it (blend modes can
   only see other elements within the same stacking context). It stays
   plain in-flow content, which paints after the negative z-index layers
   below — so it's still visually on top, just without isolating itself. */

/* Keep the dim overlay (.wp-block-cover__background) above the rotator
   so the cover's overlayColor / dimRatio still applies on top of the
   rotating images — but still behind the (un-stacked) inner-container. */
.wp-block-cover.has-cbr-rotator > .wp-block-cover__background,
.wp-block-cover.has-cbr-rotator > .has-background-dim {
	z-index: -1;
}

/* Hide the cover block's *own* static background image when the rotator
   is active — otherwise it would peek through the fades. */
.wp-block-cover.has-cbr-rotator > img.wp-block-cover__image-background,
.wp-block-cover.has-cbr-rotator > video.wp-block-cover__video-background {
	display: none;
}

/* Respect users who don't want motion: just show the first image. */
@media ( prefers-reduced-motion: reduce ) {
	.cbr-rotator .cbr-slide {
		transition: none;
	}
}