/* CS Slider – Zoom+Slide Animation */

/* Default directional offset (overridable per-slider) */
[data-animation="zoom-slide"] {
	--cs-zoom-offset: 140px;
}

/* Stack all slides in the same grid area — no translateX track needed */
[data-animation="zoom-slide"] .cs-slide-wrapper {
	/* Override the column-flow from slider-core.css */
	 display:grid;
	grid-auto-flow: row;
	grid-auto-columns: auto;
}

/*
 * Non-active slides: invisible, positioned at the zoom + direction start state.
 * --cs-zoom-from-x / --cs-zoom-from-y are set by zoom-slide.js just before .is-active
 * is toggled; default (0px, 0px) keeps the slide centred when no direction is set.
 *
 * Outgoing transition: only opacity, quick fade-out (no directional movement out).
 */
[data-animation="zoom-slide"] .slide-item {
	grid-row: 1;
	grid-column: 1;
	opacity: 0;
	z-index: 0;
	transform:
		scale( var( --cs-zoom-factor, 1.06 ) )
		translate( var( --cs-zoom-from-x, 0px ), var( --cs-zoom-from-y, 0px ) );
	transition:
		opacity   calc( var( --cs-anim-duration, .6s ) * 0.4 ) var( --cs-ease, cubic-bezier( 0.22, 1, 0.36, 1 ) ) 0s,
		transform var( --cs-anim-duration, .6s )               var( --cs-ease, cubic-bezier( 0.22, 1, 0.36, 1 ) ) 0s;
}

/*
 * Incoming / active slide: fades in AND zooms + settles from direction start state.
 * Transition is defined HERE (on the new state) so it triggers when .is-active is added.
 * .is-active has higher specificity (0,2,0) than .zoom-from-* (0,1,0), so the settled
 * transform always wins once active, regardless of inline CSS vars.
 */
[data-animation="zoom-slide"] .slide-item.is-active {
	opacity: 1;
	z-index: 1;
	transform: scale( 1 ) translate( 0, 0 );
	transition:
		opacity   var( --cs-anim-duration, .6s ) var( --cs-ease, cubic-bezier( 0.22, 1, 0.36, 1 ) ),
		transform var( --cs-anim-duration, .6s ) var( --cs-ease, cubic-bezier( 0.22, 1, 0.36, 1 ) );
}

/* Reduced motion: plain crossfade only — no zoom, no directional movement */
@media ( prefers-reduced-motion: reduce ) {
	[data-animation="zoom-slide"] .slide-item,
	[data-animation="zoom-slide"] .slide-item.is-active {
		transform: none !important;
		transition: opacity var( --cs-anim-duration, .6s ) ease !important;
	}
}