/**
 * OMT Slide Layers — front end + editor.
 *
 * Layers live inside the stock Advanced Slider slide:
 *
 *   li.wp-block-omt-slide            position:relative
 *     .kb-advanced-slide             ratio box (padding-bottom:X%)
 *       .kb-advanced-slide-inner-wrap  absolute, fills the ratio box
 *         .kb-advanced-slide-inner       <- layers are inserted here
 *
 * .kb-advanced-slide-inner is normally a relative, content-sized, clipped box.
 * When it holds layers we take it out of the flow so the layers position
 * against the whole slide instead of against the text block.
 *
 * Responsive values arrive as custom properties (--sl-* desktop, --sl-*-t
 * tablet, --sl-*-m mobile). Breakpoints match OMT Blocks: <=1024px, <=767px.
 */

.kb-advanced-slide-inner:has( > .omt-sl-layer ) {
	position: static;
	overflow: visible;
	width: 100%;
}

.omt-sl-layer {
	position: absolute;
	box-sizing: border-box;
	display: var( --sl-disp, flex );
	left: var( --sl-x, 0% );
	top: var( --sl-y, 0% );
	width: var( --sl-w, auto );
	height: var( --sl-h, auto );
	justify-content: var( --sl-jc, center );
	align-items: var( --sl-ai, center );
	text-align: var( --sl-ta, center );
	z-index: var( --sl-z, 1 );
	opacity: var( --sl-op, 1 );
	background: var( --sl-bg, transparent );
	padding: var( --sl-pad, 0 );
	border-radius: var( --sl-rad, 0 );
	overflow: hidden;
	margin: 0;
}

/* Ken Burns needs its media clipped; a text layer with a shadow may not. */
.omt-sl-layer.omt-sl-no-clip {
	overflow: visible;
}

.omt-sl-layer-content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 100%;
}

.omt-sl-layer-content > :last-child {
	margin-bottom: 0;
}

.omt-sl-layer-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: var( --sl-ov, transparent );
}

.omt-sl-media {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: var( --sl-fit, cover );
	object-position: var( --sl-pos, center center );
	transform-origin: center center;
}

/* --- Sub-timeline ------------------------------------------------------
   Layers given a step number take turns inside their slide. Hidden from the
   very first frame rather than once view.js has run, so the slide never
   paints its whole stack and then dissolves down to one photograph. */
.omt-sl-layer[ data-sl-step ] {
	opacity: 0;
	transition: opacity 600ms ease;
}

/* The first stepped layer in the slide, shown until view.js takes the slide
   over — and permanently for a visitor without JavaScript, who then sees one
   photograph instead of a blank slide. :where() holds the :not() at zero
   specificity so the .is-step-on rule below is free to override it. */
.wp-block-omt-slide:not( [ data-omt-sl-steps ] ) .omt-sl-layer[ data-sl-step ]:not( :where( .omt-sl-layer[ data-sl-step ] ~ * ) ) {
	opacity: var( --sl-op, 1 );
}

.omt-sl-layer[ data-sl-step ].is-step-on {
	opacity: var( --sl-op, 1 );
}

/* Arming is a state change, not an animation: view.js holds this class while
   it commits step one, so nothing cross-fades on load. */
.wp-block-omt-slide.omt-sl-arming .omt-sl-layer[ data-sl-step ] {
	transition: none;
}

/* --- Ken Burns ---------------------------------------------------------
   Runs by default so the effect still works without JavaScript; view.js
   re-triggers it from frame zero each time its slide becomes active. */
.omt-sl-kb {
	animation-duration: var( --sl-kb-dur, 12s );
	animation-timing-function: ease-out;
	animation-fill-mode: both;
	animation-iteration-count: 1;
	will-change: transform;
}

.omt-sl-kb-zoom-in {
	animation-name: omt-sl-zoom-in;
}
.omt-sl-kb-zoom-out {
	animation-name: omt-sl-zoom-out;
}
.omt-sl-kb-pan-left {
	animation-name: omt-sl-pan-left;
}
.omt-sl-kb-pan-right {
	animation-name: omt-sl-pan-right;
}
.omt-sl-kb-pan-up {
	animation-name: omt-sl-pan-up;
}
.omt-sl-kb-pan-down {
	animation-name: omt-sl-pan-down;
}

@keyframes omt-sl-zoom-in {
	from { transform: scale( 1 ); }
	to { transform: scale( var( --sl-kb-scale, 1.15 ) ); }
}
@keyframes omt-sl-zoom-out {
	from { transform: scale( var( --sl-kb-scale, 1.15 ) ); }
	to { transform: scale( 1 ); }
}
@keyframes omt-sl-pan-left {
	from { transform: scale( var( --sl-kb-scale, 1.15 ) ) translateX( 3% ); }
	to { transform: scale( var( --sl-kb-scale, 1.15 ) ) translateX( -3% ); }
}
@keyframes omt-sl-pan-right {
	from { transform: scale( var( --sl-kb-scale, 1.15 ) ) translateX( -3% ); }
	to { transform: scale( var( --sl-kb-scale, 1.15 ) ) translateX( 3% ); }
}
@keyframes omt-sl-pan-up {
	from { transform: scale( var( --sl-kb-scale, 1.15 ) ) translateY( 3% ); }
	to { transform: scale( var( --sl-kb-scale, 1.15 ) ) translateY( -3% ); }
}
@keyframes omt-sl-pan-down {
	from { transform: scale( var( --sl-kb-scale, 1.15 ) ) translateY( -3% ); }
	to { transform: scale( var( --sl-kb-scale, 1.15 ) ) translateY( 3% ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.omt-sl-kb {
		animation: none !important;
		transform: none !important;
	}

	/* Steps still take their turns — only the cross-fade goes. */
	[ data-omt-sl-steps ] .omt-sl-layer[ data-sl-step ] {
		transition: none;
	}
}

/* Tablet */
@media ( max-width: 1024px ) {
	.omt-sl-layer {
		display: var( --sl-disp-t, var( --sl-disp, flex ) );
		left: var( --sl-x-t, var( --sl-x, 0% ) );
		top: var( --sl-y-t, var( --sl-y, 0% ) );
		width: var( --sl-w-t, var( --sl-w, auto ) );
		height: var( --sl-h-t, var( --sl-h, auto ) );
		justify-content: var( --sl-jc-t, var( --sl-jc, center ) );
		align-items: var( --sl-ai-t, var( --sl-ai, center ) );
		text-align: var( --sl-ta-t, var( --sl-ta, center ) );
		padding: var( --sl-pad-t, var( --sl-pad, 0 ) );
	}
	.omt-sl-media {
		object-position: var( --sl-pos-t, var( --sl-pos, center center ) );
	}
}

/* Mobile */
@media ( max-width: 767px ) {
	.omt-sl-layer {
		display: var( --sl-disp-m, var( --sl-disp-t, var( --sl-disp, flex ) ) );
		left: var( --sl-x-m, var( --sl-x-t, var( --sl-x, 0% ) ) );
		top: var( --sl-y-m, var( --sl-y-t, var( --sl-y, 0% ) ) );
		width: var( --sl-w-m, var( --sl-w-t, var( --sl-w, auto ) ) );
		height: var( --sl-h-m, var( --sl-h-t, var( --sl-h, auto ) ) );
		justify-content: var( --sl-jc-m, var( --sl-jc-t, var( --sl-jc, center ) ) );
		align-items: var( --sl-ai-m, var( --sl-ai-t, var( --sl-ai, center ) ) );
		text-align: var( --sl-ta-m, var( --sl-ta-t, var( --sl-ta, center ) ) );
		padding: var( --sl-pad-m, var( --sl-pad-t, var( --sl-pad, 0 ) ) );
	}
	.omt-sl-media {
		object-position: var( --sl-pos-m, var( --sl-pos-t, var( --sl-pos, center center ) ) );
	}
}