/**
 * Center-focus Fluid Carousel styling, modeled on Vanessa Joy's
 * Showit/Flickity filmstrip (scale 0.7 side slides, scale 1 active).
 *
 * Requires:
 * - Gallery Type: Fluid Carousel
 * - Carousel Center Mode: ON
 */

.kb-gallery-type-fluidcarousel .kt-blocks-carousel:not(.kb-carousel-mode-align-left) {
	--mueller-fluid-focus-scale: 0.7;
	--mueller-fluid-focus-gap: 20px;
	--mueller-fluid-track-duration: 0.45s;
	--mueller-fluid-enter-duration: 0.38s;
	--mueller-fluid-exit-duration: 0.2s;
	--mueller-fluid-focus-ease: cubic-bezier(0.25, 1, 0.5, 1);
	--mueller-fluid-exit-ease: cubic-bezier(0, 0, 0.2, 1);
	--mueller-fluid-reveal-duration: 0.45s;

	opacity: 0;
	transition: opacity var(--mueller-fluid-reveal-duration) var(--mueller-fluid-focus-ease);
}

.kb-gallery-type-fluidcarousel .kt-blocks-carousel:not(.kb-carousel-mode-align-left).mueller-fluid-focus-ready {
	opacity: 1;
}

.kb-gallery-type-fluidcarousel .kt-blocks-carousel:not(.kb-carousel-mode-align-left) .splide__list {
	align-items: center;
}

/*
 * Scale the media wrapper, not the Splide slide, so track motion and focus
 * scale can animate together without fighting each other.
 */
.kb-gallery-type-fluidcarousel .kt-blocks-carousel:not(.kb-carousel-mode-align-left) .splide__slide .kb-gal-image-radius {
	--mueller-fluid-focus-offset: 0px;
	transform: translate3d(var(--mueller-fluid-focus-offset), 0, 0) scale(var(--mueller-fluid-focus-scale));
	transform-origin: center center;
	transition: transform var(--mueller-fluid-track-duration) var(--mueller-fluid-focus-ease);
	backface-visibility: hidden;
	will-change: transform;
}

.kb-gallery-type-fluidcarousel .kt-blocks-carousel:not(.kb-carousel-mode-align-left) .splide__slide.mueller-fluid-focus-entering .kb-gal-image-radius {
	transition-duration: var(--mueller-fluid-enter-duration);
}

.kb-gallery-type-fluidcarousel .kt-blocks-carousel:not(.kb-carousel-mode-align-left) .splide__slide.mueller-fluid-focus-exiting .kb-gal-image-radius {
	transition-duration: var(--mueller-fluid-exit-duration);
	transition-timing-function: var(--mueller-fluid-exit-ease);
}

.kb-gallery-type-fluidcarousel .kt-blocks-carousel:not(.kb-carousel-mode-align-left) .splide__slide.mueller-fluid-focus {
	z-index: 2;
}

.kb-gallery-type-fluidcarousel .kt-blocks-carousel:not(.kb-carousel-mode-align-left) .splide__slide.mueller-fluid-focus .kb-gal-image-radius {
	transform: translate3d(var(--mueller-fluid-focus-offset), 0, 0) scale(1);
}

.kb-gallery-type-fluidcarousel .kt-blocks-carousel:not(.kb-carousel-mode-align-left):not(.mueller-fluid-focus-ready) .splide__slide .kb-gal-image-radius {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.kb-gallery-type-fluidcarousel .kt-blocks-carousel:not(.kb-carousel-mode-align-left),
	.kb-gallery-type-fluidcarousel .kt-blocks-carousel:not(.kb-carousel-mode-align-left) .splide__slide .kb-gal-image-radius {
		transition: none;
	}
}