/* Listing hero gallery: Ken Burns + manual autoplay toggle */

.motorplug-gallery-showcase .motors-elementor-big-gallery {
	position: relative;
}

.motorplug-gallery-controls-rail {
	position: relative;
	z-index: 7;
	pointer-events: none;
	align-self: stretch;
	justify-self: stretch;
	width: 100%;
	height: 100%;
	min-height: 0;
}

.motorplug-gallery-autoplay-btn {
	position: absolute;
	left: 12px;
	right: auto;
	bottom: 0;
	z-index: 8;
	pointer-events: auto;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	color: #fff;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, opacity 0.2s ease;
}

.motorplug-gallery-autoplay-btn:hover,
.motorplug-gallery-autoplay-btn:focus-visible {
	background: rgba(0, 0, 0, 0.65);
	outline: none;
}

.motorplug-gallery-autoplay-btn__icon {
	display: block;
	width: 18px;
	height: 18px;
	background: currentColor;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}

.motorplug-gallery-autoplay-btn__icon--play {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}

.motorplug-gallery-autoplay-btn__icon--pause {
	display: none;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 5h4v14H6zm8 0h4v14h-4z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 5h4v14H6zm8 0h4v14h-4z'/%3E%3C/svg%3E");
}

.motorplug-gallery-autoplay-btn.is-playing .motorplug-gallery-autoplay-btn__icon--play {
	display: none;
}

.motorplug-gallery-autoplay-btn.is-playing .motorplug-gallery-autoplay-btn__icon--pause {
	display: block;
}

.motorplug-gallery-showcase.motorplug-gallery-showcase--single .motorplug-gallery-autoplay-btn {
	display: none;
}

.motorplug-gallery-showcase:not(.motorplug-gallery-showcase--autoplay-on) .motorplug-gallery-progress {
	opacity: 0 !important;
	pointer-events: none;
}

.motorplug-gallery-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	z-index: 6;
	pointer-events: none;
	background: rgba(0, 0, 0, 0.28);
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.motorplug-gallery-progress--active {
	opacity: 1;
}

.motorplug-gallery-progress__fill {
	display: block;
	width: 0;
	height: 100%;
	background: #a90707;
	transform-origin: left center;
}

.motorplug-gallery-progress--active .motorplug-gallery-progress__fill {
	animation: motorplug-gallery-progress var(--motorplug-gallery-progress-ms, 3800ms) linear forwards;
}

.motorplug-gallery-showcase.motorplug-gallery-showcase--paused .motorplug-gallery-progress__fill {
	animation-play-state: paused;
}

@keyframes motorplug-gallery-progress {
	from {
		width: 0%;
	}
	to {
		width: 100%;
	}
}

.motorplug-gallery-showcase .motors-elementor-big-gallery .stm-single-image:not(.video-preview) a {
	display: block;
	overflow: hidden;
	position: relative;
	line-height: 0;
	width: 100%;
	aspect-ratio: 796 / 466;
	max-height: 466px;
}

.motorplug-gallery-showcase .motors-elementor-big-gallery .stm-single-image:not(.video-preview) a img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	min-height: 0;
	object-fit: cover;
}

@media (max-width: 460px) {
	.motorplug-gallery-showcase .motors-elementor-big-gallery .stm-single-image:not(.video-preview) a {
		max-height: 220px;
	}
}

.motorplug-gallery-showcase .motors-elementor-big-gallery .stm-single-image.swiper-slide,
.motorplug-gallery-showcase .motors-elementor-big-gallery .stm-single-image {
	position: relative;
}

.motorplug-gallery-showcase .motors-elementor-big-gallery .stm-single-image:not(.video-preview) {
	display: grid;
	grid-template: 1fr / 1fr;
}

.motorplug-gallery-showcase .motors-elementor-big-gallery .stm-single-image:not(.video-preview) > a,
.motorplug-gallery-showcase .motors-elementor-big-gallery .stm-single-image:not(.video-preview) > .motorplug-gallery-controls-rail {
	grid-area: 1 / 1;
	min-width: 0;
}

.motorplug-gallery-showcase .motors-elementor-big-gallery .stm-single-image:not(.video-preview).swiper-slide {
	height: auto !important;
}

.motorplug-gallery-showcase .motors-elementor-big-gallery .stm-single-image a .image-overlay {
	z-index: 1;
}

.motorplug-gallery-showcase .motors-elementor-big-gallery .stm-single-image > .motorplug-gallery-controls-rail {
	z-index: 7;
}

.motorplug-gallery-showcase .motors-elementor-big-gallery .stm-single-image > .motorplug-gallery-controls-rail .motorplug-gallery-progress {
	z-index: 6;
}

.motorplug-gallery-showcase .motors-elementor-big-gallery .stm-single-image > .motorplug-gallery-controls-rail .motorplug-gallery-autoplay-btn {
	z-index: 8;
	bottom: 0;
	left: 12px;
	right: auto;
}

.motorplug-gallery-showcase.motorplug-gallery-showcase--autoplay-on .motors-elementor-big-gallery .stm-single-image > .motorplug-gallery-controls-rail .motorplug-gallery-autoplay-btn {
	bottom: 5px;
}

.motorplug-gallery-showcase .motors-elementor-big-gallery .stm-single-image a img {
	transform-origin: center center;
	will-change: transform;
}

.motorplug-gallery-showcase.no-thumbnails .motors-elementor-big-gallery.swiper-initialized .stm-single-image,
.motorplug-gallery-showcase.no-thumbnails .motors-elementor-big-gallery.swiper-initialized .swiper-slide {
	height: auto !important;
}

.motorplug-gallery-showcase .motors-elementor-big-gallery .swiper-slide-active:not(.video-preview) a img,
.motorplug-gallery-showcase.motorplug-gallery-showcase--single .motors-elementor-big-gallery .stm-single-image:not(.video-preview):first-child a img {
	animation-duration: 11s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-fill-mode: both;
	animation-play-state: paused;
}

.motorplug-gallery-showcase.motorplug-gallery-showcase--autoplay-on:not(.motorplug-gallery-showcase--paused) .motors-elementor-big-gallery .swiper-slide-active:not(.video-preview) a img {
	animation-play-state: running;
}

.motorplug-gallery-showcase .motors-elementor-big-gallery .swiper-slide[data-kenburns="1"] a img,
.motorplug-gallery-showcase.motorplug-gallery-showcase--single .motors-elementor-big-gallery .stm-single-image[data-kenburns="1"] a img {
	animation-name: motorplug-kenburns-1;
}

.motorplug-gallery-showcase .motors-elementor-big-gallery .swiper-slide[data-kenburns="2"] a img,
.motorplug-gallery-showcase.motorplug-gallery-showcase--single .motors-elementor-big-gallery .stm-single-image[data-kenburns="2"] a img {
	animation-name: motorplug-kenburns-2;
}

.motorplug-gallery-showcase .motors-elementor-big-gallery .swiper-slide[data-kenburns="3"] a img,
.motorplug-gallery-showcase.motorplug-gallery-showcase--single .motors-elementor-big-gallery .stm-single-image[data-kenburns="3"] a img {
	animation-name: motorplug-kenburns-3;
}

@keyframes motorplug-kenburns-1 {
	0% {
		transform: scale(1) translate3d(0, 0, 0);
	}
	100% {
		transform: scale(1.14) translate3d(-2.5%, -1.5%, 0);
	}
}

@keyframes motorplug-kenburns-2 {
	0% {
		transform: scale(1.04) translate3d(-1%, 0.5%, 0);
	}
	100% {
		transform: scale(1.16) translate3d(2%, -2%, 0);
	}
}

@keyframes motorplug-kenburns-3 {
	0% {
		transform: scale(1) translate3d(1%, 1%, 0);
	}
	100% {
		transform: scale(1.12) translate3d(-2%, 1.5%, 0);
	}
}

/* Theme hides extra slides when thumbnails are off; showcase uses Swiper instead */
.motorplug-gallery-showcase.no-thumbnails .motors-elementor-big-gallery:not(.swiper-initialized) .stm-single-image:not(:first-child) {
	display: none !important;
}

.motorplug-gallery-showcase .motors-elementor-big-gallery.swiper-fade .swiper-slide {
	pointer-events: none;
}

.motorplug-gallery-showcase .motors-elementor-big-gallery.swiper-fade .swiper-slide-active {
	pointer-events: auto;
}

.motorplug-gallery-showcase.motorplug-gallery-showcase--paused .motors-elementor-big-gallery .swiper-slide a img,
.motorplug-gallery-showcase.motorplug-gallery-showcase--paused.motorplug-gallery-showcase--single .motors-elementor-big-gallery .stm-single-image a img,
.motorplug-gallery-showcase:not(.motorplug-gallery-showcase--autoplay-on) .motors-elementor-big-gallery .swiper-slide a img {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.motorplug-gallery-progress {
		display: none;
	}

	.motorplug-gallery-showcase .motors-elementor-big-gallery .swiper-slide a img,
	.motorplug-gallery-showcase.motorplug-gallery-showcase--single .motors-elementor-big-gallery .stm-single-image a img {
		animation: none !important;
		transform: none !important;
	}
}
