/* ==========================================================================
   Animated hero: four black-and-white live photos behind the headline.
   Loaded only on the homepage by wp-content/novamira-sandbox/acclaimed-hero-panels.php
   ========================================================================== */

.hero__media--panels { background: var(--black); overflow: hidden; }

.hero-panels {
	position: absolute;
	inset: 5% var(--gutter) 5%;
	display: grid;
	grid-template-columns: 1fr 1.35fr 1fr 1fr;
	gap: clamp(8px, 1.4vw, 22px);
	align-items: center;
}

.hero-panel {
	position: relative;
	height: 74%;
	margin: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	clip-path: inset(100% 0 0 0);
	animation: hero-reveal 1.3s cubic-bezier(.77, 0, .18, 1) forwards, hero-float 9s ease-in-out infinite alternate;
}

.hero-panel:nth-child(1) { --y: -6%; animation-delay: .15s, 1.4s; }
.hero-panel:nth-child(2) { --y: 3%; height: 92%; animation-delay: .35s, 1.6s; }
.hero-panel:nth-child(3) { --y: -2%; animation-delay: .55s, 1.8s; }
.hero-panel:nth-child(4) { --y: 8%; height: 64%; animation-delay: .75s, 2s; }

/* whole photo, never cropped: scaled to fit the panel in its own aspect ratio */
.hero-panel__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	filter: grayscale(1) contrast(1.08) brightness(.55);
	animation: hero-spot 8s ease-in-out infinite;
}

.hero-panel:nth-child(1) .hero-panel__img { animation-delay: 1.6s; }
.hero-panel:nth-child(2) .hero-panel__img { animation-delay: 3.6s; }
.hero-panel:nth-child(3) .hero-panel__img { animation-delay: 5.6s; }
.hero-panel:nth-child(4) .hero-panel__img { animation-delay: 7.6s; }

/* film grain */
.hero-grain {
	position: absolute;
	inset: -50%;
	pointer-events: none;
	opacity: .13;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	animation: hero-grain .9s steps(6) infinite;
}

@keyframes hero-reveal { to { clip-path: inset(0 0 0 0); } }
@keyframes hero-float {
	from { transform: translateY(var(--y)); }
	to { transform: translateY(calc(var(--y) * -1)); }
}
@keyframes hero-kenburns {
	from { transform: scale(1.18) translate3d(-2%, 1%, 0); }
	to { transform: scale(1.04) translate3d(2%, -1.5%, 0); }
}
/* stage-light sweep: each photo takes the spotlight in turn */
@keyframes hero-spot {
	0%, 100% { filter: grayscale(1) contrast(1.08) brightness(.55); }
	10%, 22% { filter: grayscale(1) contrast(1.2) brightness(1.05); }
	34% { filter: grayscale(1) contrast(1.08) brightness(.55); }
}
@keyframes hero-grain {
	0% { transform: translate(0, 0); }
	20% { transform: translate(-6%, 4%); }
	40% { transform: translate(5%, -7%); }
	60% { transform: translate(-3%, 8%); }
	80% { transform: translate(7%, 2%); }
	100% { transform: translate(-4%, -5%); }
}

/* desktop: photos are width-bound, so give them the side margin and most of the gap */
@media (min-width: 1024px) {
	.hero-panels {
		inset: 4% clamp(10px, 1vw, 20px);
		gap: clamp(6px, .55vw, 12px);
	}
}

@media (max-width: 767px) {
	.hero-panels {
		inset: 12px var(--gutter) 42%;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		gap: 8px;
	}
	.hero-panel, .hero-panel:nth-child(n) { height: 100%; --y: 0%; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-panel, .hero-panel__img, .hero-grain { animation: none; }
	.hero-panel { clip-path: none; }
	.hero-panel__img { transform: none; filter: grayscale(1) contrast(1.08) brightness(.8); }
}