@layer base, demo;
@import url(https://fonts.bunny.net/css?family=abel:400);

/* === CARRUSEL === */
@layer demo {
	.carousel {
		--items: 6;
		--carousel-duration: 40s;
		@media (width > 600px) {
			--carousel-duration: 30s;
		}
		--carousel-width: min(80vw, 1200px);
		--carousel-item-width: 280px;
		--carousel-item-height: 450px;
		--carousel-item-gap: 2rem;
		--clr-cta: rgb(0, 132, 209);

		position: relative;
		width: var(--carousel-width);
		height: var(--carousel-item-height);
		overflow: clip;
		margin-inline: auto; /* Centrado horizontal */
	}

	.carousel[mask] {
		mask-image: linear-gradient(
			to right,
			transparent,
			black 10% 90%,
			transparent
		);
	}

	.carousel[reverse] > article {
		animation-direction: reverse;
	}

	.carousel:hover > article {
		animation-play-state: paused;
	}

	.carousel > article {
		position: absolute;
		top: 0;
		left: calc(100% + var(--carousel-item-gap));
		width: var(--carousel-item-width);
		height: var(--carousel-item-height);
		overflow: hidden;
		border-radius: 10px;

		animation-name: marquee;
		animation-duration: var(--carousel-duration);
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		animation-delay: calc(
			var(--carousel-duration) / var(--items) * 1 * var(--i) * -1
		);
		will-change: transform;

		&:nth-child(1) { --i: 0; }
		&:nth-child(2) { --i: 1; }
		&:nth-child(3) { --i: 2; }
		&:nth-child(4) { --i: 3; }
		&:nth-child(5) { --i: 4; }
		&:nth-child(6) { --i: 5; }
		&:nth-child(7) { --i: 6; }
		&:nth-child(8) { --i: 7; }
	}

	.carousel article img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		border-radius: 10px;
	}

	@keyframes marquee {
		100% {
			transform: translateX(
				calc(
					(var(--items) * (var(--carousel-item-width) + var(--carousel-item-gap))) * -1
				)
			);
		}
	}
}

/* === ESTILOS GENERALES BASE === */
@layer base {
	* {
		box-sizing: border-box;
	}
	:root {
		color-scheme: light dark;
		--bg-dark: rgb(2, 6, 24);
		--bg-light: rgb(229, 229, 229);
		--txt-light: rgb(10, 10, 10);
		--txt-dark: rgb(245, 245, 245);
	}
	body {
		background-color: light-dark(var(--bg-light), var(--bg-dark));
		color: light-dark(var(--txt-light), var(--txt-dark));
		margin: 0;
		padding: 0;
		font-size: 1rem;
		font-family: "Abel", sans-serif;
		line-height: 1.5;
	}
}