/* Ken Burns Hero — shared (frontend + editor canvas) */

.wp-block-volume-ken-burns-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	isolation: isolate; /* keep z-index layers self-contained */
	background: #111;
}

.wp-block-volume-ken-burns-hero .kbh__slides {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.wp-block-volume-ken-burns-hero .kbh__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition-property: opacity;
	transition-timing-function: ease-in-out;
	transition-duration: 1.5s; /* overridden per-block from data-fade */
	will-change: opacity;
}

.wp-block-volume-ken-burns-hero .kbh__slide.is-active {
	opacity: 1;
	z-index: 1;
}

.wp-block-volume-ken-burns-hero .kbh__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	max-width: none;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	will-change: transform;
}

/* Pan + zoom. Custom properties are set per-slide by view.js */
@keyframes kbh-move {
	from {
		transform: scale( var( --kbh-scale-from, 1 ) );
		transform-origin: var( --kbh-origin-from, 50% 50% );
	}
	to {
		transform: scale( var( --kbh-scale-to, 1.12 ) );
		transform-origin: var( --kbh-origin-to, 50% 50% );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-block-volume-ken-burns-hero .kbh__img {
		animation: none !important;
	}
}

.wp-block-volume-ken-burns-hero .kbh__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.wp-block-volume-ken-burns-hero .kbh__content {
	position: relative;
	z-index: 3;
	width: 100%;
	padding: clamp( 2rem, 5vw, 4rem ) clamp( 1rem, 4vw, 3rem );
}