/* ==========================================================================
   Shared Hero Glass Overlay
   Applied via .sdh-hero-glass class on any hero element with a background image.
   Provides iridescent colour-play (animated) + dark readability fade via ::before,
   and specular rim + radial light catch via ::after.
   ========================================================================== */

@keyframes sdh-glass-drift {
	0%   { background-position: 0%   0%,   0% 0%; }
	100% { background-position: 100% 100%, 0% 0%; }
}

.sdh-hero-glass {
	position: relative;
	overflow: hidden;
}

.sdh-hero-glass::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(145deg,
			rgba(120, 200, 255, 0.18) 0%,
			rgba(180, 120, 255, 0.08) 30%,
			rgba(255, 180,  80, 0.05) 55%,
			rgba( 80, 200, 180, 0.08) 75%,
			rgba(120, 200, 255, 0.12) 100%
		),
		linear-gradient(180deg,
			rgba(0, 0, 0, 0.45)  0%,
			rgba(0, 0, 0, 0.25) 35%,
			rgba(0, 0, 0, 0.60) 65%,
			rgba(0, 0, 0, 0.85) 100%
		);
	background-size: 300% 300%, 100% 100%;
	animation: sdh-glass-drift 22s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
	.sdh-hero-glass::before {
		animation: none;
		background-position: 50% 50%, 0% 0%;
	}
}

.sdh-hero-glass::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg,
			rgba(120, 200, 255, 0.20) 0%,
			rgba(255, 255, 255, 0.85) 35%,
			rgba(255, 200, 120, 0.60) 65%,
			rgba(120, 200, 255, 0.30) 100%
		) top / 100% 2px no-repeat,
		radial-gradient(ellipse at 28% 0%,
			rgba(255, 255, 255, 0.12) 0%,
			transparent 55%
		);
}