/*
Created: 05/27/2026.
*/

.carousel {
	padding: 20px 0;
	width: 100vw; /* Forces the width to exactly match the browser window */
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw; /* Pulls the left edge perfectly to the screen edge */
	margin-right: -50vw; /* Pulls the right edge perfectly to the screen edge */
	overflow: hidden;
	display: flex;

	/* Mask to fade the left and right edges. */
	-webkit-mask-image: linear-gradient( to right, transparent 0%, black 15%, black 85%, transparent 100% );
	mask-image: linear-gradient( to right, transparent 0%, black 15%, black 85%, transparent 100% );
}

.card {
	display: flex;

	width: 400px; /* Give it a solid width (adjust this number to make the images larger or smaller) */
	height: 312px;

	color: white;
	border-radius: 24px;
	box-shadow: rgba( 0, 0, 0, 10% ) 5px 5px 20px 0;
	padding: 0; /* Removed padding so the image can touch the edges */
	overflow: hidden; /* Ensures the image doesn't bleed outside the rounded corners */
	font-size: xx-large;
	justify-content: center;
	align-items: center;
	min-height: 200px;

	&:nth-child( 1 ) {
		background: #7958ff;
	}

	&:nth-child( 2 ) {
		background: #5d34f2;
	}

	&:nth-child( 3 ) {
		background: #4300da;
	}
}

.card img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Forces the image to completely fill the space */
}

.carousel {
	> * {
		flex: 0 0 100%;
	}
}

/* Group the cards for better structure. */
.group {
	display: flex;
	gap: 20px;
	/* Add padding to the right to create a gap between the last and first card. */
	padding-right: 20px;
}

.group {
	will-change: transform; /* We should be nice to the browser - let it know what we're going to animate. */
	animation: scrolling 30s linear infinite;
}

@keyframes scrolling {
	0% {
		transform: translateX( 0 );
	}
	100% {
		transform: translateX( -100% );
	}
}

/* Modifier class to apply the reverse animation */
.group.reverse {
	animation: scrolling-reverse 30s linear infinite;
}

/* The reverse keyframes */
@keyframes scrolling-reverse {
	0% {
		transform: translateX( -100% );
	}
	100% {
		transform: translateX( 0 );
	}
}