/* Base styles for the slideshow container */
.hero-slideshow {
	position: relative;
	overflow: hidden;
	/* Explicitly set to 'contain' to show entire image */
	background-size: contain;
	/* Center the contained image */
	background-position: center;
	background-repeat: no-repeat;
	background-color: black;
	/* Fills empty spaces with black */
	z-index: -1;
	/* Ensures it's behind elements with higher z-index like headers */
}

.hero-container {
	position: relative;
	width: 100%;
}

/* Keyframe animations for various transition types */
@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes slideInLeft {
	from {
		transform: translateX(-100%);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slideInRight {
	from {
		transform: translateX(100%);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes zoomIn {
	from {
		transform: scale(1.1);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes rotateIn {
	from {
		transform: rotate(-5deg);
		opacity: 0;
	}

	to {
		transform: rotate(0deg);
		opacity: 1;
	}
}

@keyframes slideInTop {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes slideInBottom {
	from {
		transform: translateY(100%);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes skewIn {
	from {
		transform: skewX(-30deg);
		opacity: 0;
	}

	to {
		transform: skewX(0deg);
		opacity: 1;
	}
}

@keyframes blurIn {
	from {
		filter: blur(10px);
		opacity: 0;
	}

	to {
		filter: blur(0px);
		opacity: 1;
	}
}

@keyframes scaleAndFade {
	from {
		transform: scale(0.8);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* Classes to apply animations */
.animate-fade {
	animation: fadeIn 1s ease-out forwards;
}

.animate-slide-left {
	animation: slideInLeft 1s ease-out forwards;
}

.animate-slide-right {
	animation: slideInRight 1s ease-out forwards;
}

.animate-zoom {
	animation: zoomIn 1.2s ease-out forwards;
}

.animate-rotate {
	animation: rotateIn 1s ease-out forwards;
}

.animate-slide-top {
	animation: slideInTop 1s ease-out forwards;
}

.animate-slide-bottom {
	animation: slideInBottom 1s ease-out forwards;
}

.animate-skew {
	animation: skewIn 1s ease-out forwards;
}

.animate-blur {
	animation: blurIn 1.2s ease-out forwards;
}

.animate-scale-fade {
	animation: scaleAndFade 1.1s ease-out forwards;
}

/* Ensure text overlays correctly during animations */
.hero-slideshow h2 {
	position: relative;
	/* Ensure it stays above animation */
	z-index: 10;
}

.hero-slideshow {
	position: relative;
	overflow: hidden;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-color: black;
	/* Change this line */
	z-index: 0;
	/* Or any positive value like 1, 10, etc. */
}