/**
 * Hero atmosphere – smoke, sparks, lightning (theme-built).
 * FX sit behind text and hero image (centered on the hero).
 */

.wpl-hero {
	isolation: isolate;
}

.wpl-hero__decor {
	z-index: 0;
}

.wpl-hero__fx {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	overflow: hidden;
}

/* Effekt-Cluster: über Container-Bühne zentriert */
.wpl-hero__fx-inner {
	position: absolute;
	top: 0;
	left: 50%;
	width: var(--wpl-content-width, min(calc(100% - 2.5rem), 1280px));
	height: var(--wpl-hero-height, 560px);
	max-height: 100%;
	transform: translateX(-50%);
	pointer-events: none;
}

.wpl-hero__fx-smoke {
	position: absolute;
	inset: 0;
	opacity: calc(0.12 + var(--wpl-fx-smoke, 0.7) * 0.38);
}

.wpl-smoke {
	position: absolute;
	border-radius: 50%;
	filter: blur(48px);
	background: radial-gradient(
		circle,
		rgba(200, 169, 106, 0.22) 0%,
		rgba(120, 100, 70, 0.12) 35%,
		transparent 70%
	);
	animation: wpl-smoke-drift 18s ease-in-out infinite;
}

.wpl-smoke--a {
	width: 70%;
	height: 55%;
	left: 50%;
	bottom: -8%;
	transform: translateX(-50%);
	animation-duration: 22s;
}

.wpl-smoke--b {
	width: 58%;
	height: 62%;
	left: 50%;
	top: 8%;
	transform: translateX(-50%);
	background: radial-gradient(
		circle,
		rgba(180, 160, 120, 0.18) 0%,
		rgba(80, 70, 55, 0.1) 40%,
		transparent 72%
	);
	animation-duration: 26s;
	animation-delay: -6s;
}

.wpl-smoke--c {
	width: 48%;
	height: 48%;
	left: 50%;
	top: 42%;
	transform: translate(-50%, -50%);
	opacity: 0.7;
	animation-duration: 20s;
	animation-delay: -12s;
}

@keyframes wpl-smoke-drift {
	0%,
	100% {
		transform: translateX(-50%) translate(0, 0) scale(1);
		opacity: 0.75;
	}
	33% {
		transform: translateX(-50%) translate(3%, -2%) scale(1.05);
		opacity: 0.9;
	}
	66% {
		transform: translateX(-50%) translate(-2%, 2%) scale(0.97);
		opacity: 0.6;
	}
}

.wpl-smoke--c {
	animation-name: wpl-smoke-drift-center;
}

@keyframes wpl-smoke-drift-center {
	0%,
	100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0.7;
	}
	50% {
		transform: translate(-50%, -52%) scale(1.04);
		opacity: 0.85;
	}
}

.wpl-hero__fx-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: calc(0.18 + var(--wpl-fx-sparks, 0.75) * 0.55);
}

/* Blitz – hinter dem Bild, im FX-Zentrum */
.wpl-hero__fx-flash {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse 75% 55% at 50% 42%,
		rgba(255, 248, 220, 0.5) 0%,
		rgba(200, 169, 106, 0.18) 38%,
		transparent 72%
	);
	opacity: 0;
	mix-blend-mode: screen;
}

.wpl-hero__fx-flash.is-active {
	animation: wpl-lightning-flash 0.45s ease-out forwards;
}

@keyframes wpl-lightning-flash {
	0% {
		opacity: 0;
	}
	8% {
		opacity: 0.9;
	}
	25% {
		opacity: 0.3;
	}
	100% {
		opacity: 0;
	}
}

/* Blitze mobil über die ganze Website */
.wpl-lightning-global {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 45;
	pointer-events: none;
	overflow: hidden;
}

.wpl-lightning-global__flash {
	position: fixed;
	inset: 0;
	--wpl-flash-x: 50%;
	--wpl-flash-y: 35%;
	opacity: 0;
	background: radial-gradient(
		ellipse 130% 90% at var(--wpl-flash-x) var(--wpl-flash-y),
		rgba(255, 248, 220, 0.42) 0%,
		rgba(200, 169, 106, 0.16) 42%,
		transparent 72%
	);
	mix-blend-mode: screen;
}

.wpl-lightning-global__flash.is-active {
	animation: wpl-lightning-flash 0.45s ease-out forwards;
}

@media (max-width: 1024px) {
	.wpl-lightning-global {
		display: block;
	}

	.wpl-hero__fx-flash {
		display: none;
	}
}

@media (max-width: 768px) {
	.wpl-hero__fx-inner {
		width: calc(100% - 2.5rem);
	}

	.wpl-hero__fx-smoke {
		opacity: calc(0.08 + var(--wpl-fx-smoke, 0.7) * 0.28);
	}

	.wpl-hero__fx-canvas {
		opacity: calc(0.12 + var(--wpl-fx-sparks, 0.75) * 0.35);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpl-smoke {
		animation: none;
	}

	.wpl-hero__fx-flash.is-active {
		animation: none;
		opacity: 0 !important;
	}
}