/**
 * Intro Slideshow Styles
 * Ken Burns Effekt & Fade Transitions
 */

:root {
	--kb-duration: 4s;
	--kb-scale: 1.12;
}

.intro-slideshow {
	position: relative;
	overflow: hidden;
}

.intro-slideshow .slideshow-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.8s ease-in-out;
	transform-origin: center center;
}

.intro-slideshow .slideshow-img.active {
	opacity: 1;
}

/* Ken Burns Animationen */
.intro-slideshow .slideshow-img.kenburns {
	animation-duration: var(--kb-duration);
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

.intro-slideshow .slideshow-img.kb-zoom-in {
	transform: scale(1);
	animation-name: kbZoomIn;
}

.intro-slideshow .slideshow-img.kb-zoom-out {
	transform: scale(var(--kb-scale));
	animation-name: kbZoomOut;
}

.intro-slideshow .slideshow-img.kb-pan-left {
	transform: scale(var(--kb-scale)) translateX(3%);
	animation-name: kbPanLeft;
}

.intro-slideshow .slideshow-img.kb-pan-right {
	transform: scale(var(--kb-scale)) translateX(-3%);
	animation-name: kbPanRight;
}

@keyframes kbZoomIn {
	from { transform: scale(1); }
	to { transform: scale(var(--kb-scale)); }
}

@keyframes kbZoomOut {
	from { transform: scale(var(--kb-scale)); }
	to { transform: scale(1); }
}

@keyframes kbPanLeft {
	from { transform: scale(var(--kb-scale)) translateX(3%); }
	to { transform: scale(var(--kb-scale)) translateX(-3%); }
}

@keyframes kbPanRight {
	from { transform: scale(var(--kb-scale)) translateX(-3%); }
	to { transform: scale(var(--kb-scale)) translateX(3%); }
}