/*
 * CSS-only crossfade rotation for the homepage hero banner, replacing the
 * broken Essential-Addons "slideshow" background mode on section 3taujn5.
 * No JS, no carousel library — each .pu-hero-banner-slide shares one
 * @keyframes rule and is offset via animation-delay, so slides crossfade
 * in sequence purely through CSS. See
 * wp-content/PATCHES/2026-08-11-hero-banner.md
 */

.pu-hero-banner {
	position: relative;
	width: 100%;
	min-height: 70vh;
	overflow: hidden;
	background-color: #11142b; /* fallback while the first image loads */
}

.pu-hero-banner-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 0;
	animation-name: pu-hero-fade;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

/* Slide 1 is shown immediately on load instead of waiting for its first
   keyframe cycle, so the banner isn't blank on first paint. */
.pu-hero-banner-slide:first-child {
	opacity: 1;
}

.pu-hero-banner-overlay {
	position: absolute;
	inset: 0;
	background: rgba(5, 8, 30, 0.18);
	pointer-events: none;
}

@keyframes pu-hero-fade {
	0%    { opacity: 0; }
	1.5%  { opacity: 1; }
	6%    { opacity: 1; }
	7.5%  { opacity: 0; }
	100%  { opacity: 0; }
}

/* Respect reduced-motion preference: freeze on the first image instead of
   animating. */
@media (prefers-reduced-motion: reduce) {
	.pu-hero-banner-slide {
		animation: none;
		opacity: 0;
	}
	.pu-hero-banner-slide:first-child {
		opacity: 1;
	}
}