@layer components {
	.hero-section {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 75dvh;
		overflow: hidden;
		background-color: var(--color-primary);
	}

	.hero-section__img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		object-position: center top;
	}

	/* Slider slides — each slide is a group wrapper, stacked, crossfade via opacity */
	.hero-section__slide {
		position: absolute;
		inset: 0;
		opacity: 0;
	}

	.hero-section__slide.is-active {
		opacity: 1;
	}

	/* Enable transitions only after JS signals ready — prevents fade-in flicker on load */
	.hero-section--ready .hero-section__slide {
		transition: opacity 1s ease;
	}

	/* First slide never transitions — always instant to prevent decode flash */
	.hero-section__slide:first-child {
		opacity: 1;
	}

	.hero-section--ready .hero-section__slide:first-child:not(.is-active) {
		opacity: 0;
		transition: opacity 1s ease;
	}

}