/**
 * Animierter Hero-Hintergrund v2.0 — CSS-Animationen + Layer-Atmosphäre.
 * Wird nur auf der Startseite geladen (is_front_page()).
 *
 * @package MHLOldtimerVintage
 */

/* ── Container ──────────────────────────────────────────────────────────────── */
.mhl-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background:
		radial-gradient(ellipse at 30% 60%, rgba(22,43,28,.48) 0%, transparent 55%),
		radial-gradient(ellipse at 70% 30%, rgba(130,88,38,.14) 0%, transparent 50%),
		radial-gradient(ellipse at 50% 40%, rgba(16,11,7,1) 0%, rgba(6,4,2,1) 100%);
}

/* ── Parallax-Wrapper (JS setzt transform darauf) ───────────────────────────── */
.mhl-hero-bg__parallax {
	position: absolute;
	inset: -5%;
	will-change: transform;
	pointer-events: none;
}

/* ── Layer-SVGs füllen ihren Wrapper ────────────────────────────────────────── */
.mhl-hero-bg__layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* ── Partikel-Container ─────────────────────────────────────────────────────── */
.mhl-hero-bg__particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* ── Lichtstrahlen: Additive Überlagerung ───────────────────────────────────── */
.mhl-hero-bg__parallax--rays {
	mix-blend-mode: screen;
	opacity: 0.75;
}

/* ── Staubpartikel ──────────────────────────────────────────────────────────── */
.mhl-dust {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(225,178,98,0.92) 0%, rgba(225,178,98,0) 70%);
	animation: mhl-dust-drift linear infinite;
	filter: blur(0.35px);
}

/* ── Museum-Rahmen-Beschriftungen ───────────────────────────────────────────── */
.mhl-chrome {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: 'Courier New', Courier, monospace;
	font-size: 10px;
	letter-spacing: 0.32em;
	color: #b6904a;
	opacity: 0.7;
	z-index: 2;
	text-transform: uppercase;
	pointer-events: none;
}
.mhl-chrome--top    { top: 22px; left: 24px; }
.mhl-chrome--bottom { bottom: 14px; right: 24px; font-size: 9px; opacity: 0.55; }
.mhl-chrome-dot {
	width: 4px;
	height: 4px;
	background: #b6904a;
	border-radius: 50%;
	opacity: 0.6;
	flex-shrink: 0;
}

/* ── Fahrzeug-Gruppen: Messing-Glow + subtile Glimmer-Animation ─────────────── */
.mhl-vehicle {
	filter: drop-shadow(0 0 2px rgba(182,144,74,0.18)) drop-shadow(0 0 8px rgba(182,144,74,0.08));
}

/* Jedes Fahrzeug bekommt leicht versetzten Glow-Puls */
.mhl-vehicle--1886 { animation: mhl-vehicle-glow 14s ease-in-out 0s   infinite alternate; }
.mhl-vehicle--1908 { animation: mhl-vehicle-glow 14s ease-in-out 3.5s infinite alternate; }
.mhl-vehicle--1935 { animation: mhl-vehicle-glow 14s ease-in-out 7s   infinite alternate; }
.mhl-vehicle--1962 { animation: mhl-vehicle-glow 14s ease-in-out 10.5s infinite alternate; }

/* Zahnräder: dezenter eigener Glimmer */
.mhl-gear-group {
	filter: drop-shadow(0 0 3px rgba(182,144,74,0.12));
}

/* ── Keyframe: Fahrzeug-Messing-Glow ────────────────────────────────────────── */
@keyframes mhl-vehicle-glow {
	0%   { filter: drop-shadow(0 0 2px rgba(182,144,74,0.14)) drop-shadow(0 0 6px rgba(182,144,74,0.06)); }
	50%  { filter: drop-shadow(0 0 3px rgba(182,144,74,0.28)) drop-shadow(0 0 12px rgba(182,144,74,0.12)); }
	100% { filter: drop-shadow(0 0 2px rgba(182,144,74,0.16)) drop-shadow(0 0 7px rgba(182,144,74,0.07)); }
}

/* ── Keyframe: Lichtstrahlen-Schwenk ────────────────────────────────────────── */
@keyframes mhl-ray-sweep {
	0%   { transform: translateX(-28px) rotate(-1.2deg); opacity: 0.82; }
	50%  { transform: translateX(18px)  rotate(0.5deg);  opacity: 1; }
	100% { transform: translateX(-8px)  rotate(1.1deg);  opacity: 0.72; }
}

.mhl-ray-group {
	animation: mhl-ray-sweep 28s ease-in-out infinite alternate;
	transform-origin: 50% 0%;
}

/* ── Keyframe: Blueprint-Glimmer (Pulsieren) ────────────────────────────────── */
@keyframes mhl-glimmer {
	0%, 100% { filter: drop-shadow(0 0 0 transparent); opacity: 0.94; }
	50%      { filter: drop-shadow(0 0 5px rgba(225,178,98,0.28)); opacity: 1; }
}

.mhl-hero-bg__parallax--blueprint .mhl-hero-bg__layer {
	animation: mhl-glimmer 11s ease-in-out infinite;
}

/* ── Keyframe: Fahrzeug-Timeline horizontale Drift ──────────────────────────── */
@keyframes mhl-vehicle-pan {
	0%   { transform: translateX(-14px); }
	100% { transform: translateX(14px); }
}

.mhl-hero-bg__layer--timeline {
	animation: mhl-vehicle-pan 320s ease-in-out infinite alternate;
}

/* ── Keyframe: Staub-Drift ──────────────────────────────────────────────────── */
@keyframes mhl-dust-drift {
	0%   { transform: translate(0, 0); opacity: 0; }
	10%  { opacity: 1; }
	90%  { opacity: 1; }
	100% { transform: translate(var(--mhl-drift), -130px); opacity: 0; }
}

/* ── Keyframe: Blueprint-Linie langsam driftend ─────────────────────────────── */
@keyframes mhl-grid-drift {
	0%   { transform: translate(0, 0); }
	100% { transform: translate(6px, 4px); }
}

.mhl-hero-bg__parallax--grid .mhl-hero-bg__layer {
	animation: mhl-grid-drift 120s ease-in-out infinite alternate;
}

/* ── Vignette (::after am Hero-Container) ───────────────────────────────────── */
.hero-vintage::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse at 50% 50%,
			transparent 30%,
			rgba(0,0,0,0.38) 65%,
			rgba(0,0,0,0.76) 100%);
	z-index: 1;
}

/* Hero-Content und Ornament über den Effekten halten */
.hero-vintage .hero-content { z-index: 2; }
.hero-vintage .hero-ornament { z-index: 2; }
.hero-vintage .mhl-chrome { z-index: 3; }

/* Vorhandenes statisches hero-bg ausblenden wenn Animation aktiv */
.mhl-hero-bg ~ .hero-bg { display: none; }

/* ── Reduzierte Bewegung: alle Animationen deaktivieren ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.mhl-hero-bg *,
	.mhl-hero-bg *::before,
	.mhl-hero-bg *::after {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}
	.mhl-hero-bg__parallax--rays { opacity: 0.38; }
	.mhl-vehicle { filter: drop-shadow(0 0 2px rgba(182,144,74,0.18)); }
}

/* ── Tablet: Details reduzieren ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
	/* Rad-Schema + Chassis-Schema leicht abdunkeln */
	.mhl-hero-bg__parallax--blueprint { opacity: 0.85; }
}

/* ── Mobile: Performance-Reduktion ──────────────────────────────────────────── */
@media (max-width: 768px) {
	/* Grid und Portraits ausblenden */
	.mhl-hero-bg__parallax--grid,
	.mhl-hero-bg__parallax--portraits {
		display: none;
	}
	/* Partikel ausblenden */
	.mhl-hero-bg__particles { display: none; }
	/* Blueprint dezenter */
	.mhl-hero-bg__parallax--blueprint { opacity: 0.38; }
	/* Timeline dezenter */
	.mhl-hero-bg__parallax--timeline { opacity: 0.48; }
	/* Lichtstrahlen dezenter */
	.mhl-hero-bg__parallax--rays { opacity: 0.42; }
	/* Chrome-Leisten ausblenden */
	.mhl-chrome { display: none; }
	/* Fahrzeug-Glow reduzieren */
	.mhl-vehicle--1886,
	.mhl-vehicle--1908,
	.mhl-vehicle--1935,
	.mhl-vehicle--1962 {
		animation-duration: 20s;
	}
}

@media (max-width: 480px) {
	.mhl-hero-bg__parallax--blueprint { display: none; }
	.mhl-hero-bg__parallax--timeline  { opacity: 0.34; }
	.mhl-hero-bg__parallax--rays      { opacity: 0.28; }
}