/* =====================================================================
   Warleek — Motion. Budget: Desktop (hover-fähig, ≥ 782px) bekommt Smoke-Wipe,
   Smoke-Drift, Header-Blur, Logo-Glow. Touch/Mobile bekommt nur Fades — GPU-Last
   (Blur, Blend-Modes, Masken) ist dort der Grund für träge Bedienung.
   Masken/Texturen sind vorgerasterte PNGs (kein SVG-Filter → kein Re-Rasterizing).
   ===================================================================== */

@view-transition { navigation: auto; }
:root { --wl-vt-dur: 420ms; }

/* Basis (alle Geräte): schlichter Crossfade */
::view-transition-old(root) { animation: wl-fade-out 200ms ease-out both; }
::view-transition-new(root) { animation: wl-fade-in 260ms ease-out both; }
@keyframes wl-fade-out { to { opacity: 0; } }
@keyframes wl-fade-in { from { opacity: 0; } }
@keyframes wl-rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.wl-hero__inner { animation: wl-rise-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.wl-reveal { will-change: opacity, transform; }
.wl-reveal.is-in { will-change: auto; }

/* Video-Pause-Button (WCAG 2.2.2) */
.wl-video-toggle {
	position: absolute; right: 1rem; bottom: 1rem; z-index: 3;
	display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.75rem;
	background: rgba(13, 17, 15, 0.7); color: var(--wp--preset--color--leek-light); border: var(--wl-border); border-radius: 999px;
	font-family: var(--wp--preset--font-family--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
}
.wl-video-toggle:hover, .wl-video-toggle:focus-visible { border-color: var(--wp--preset--color--leek); color: var(--wp--preset--color--leek); }
.wl-video-toggle svg { width: 0.9em; height: 0.9em; fill: currentColor; }

/* Flare-Balken – leichtgewichtig (nur background-position), auf allen Geräten */
.wl-flare-bar {
	position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 9999; pointer-events: none;
	background: linear-gradient(90deg, transparent 0%, #9be15d 50%, #eef5e6 60%, transparent 100%);
	background-size: 50% 100%; background-repeat: no-repeat;
	animation: wl-flare-sweep 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) both; opacity: 0;
}
@keyframes wl-flare-sweep { 0% { background-position: -60% 0; opacity: 0; } 10%, 85% { opacity: 1; } 100% { background-position: 160% 0; opacity: 0; } }

/* ------------------------------------------------ Desktop-Extras (hover + breit) */
@media (hover: hover) and (min-width: 782px) {
	/* Smoke-Wipe beim Seitenwechsel: PNG-Maske, nur mask-position/-size + opacity animiert */
	::view-transition-old(root) {
		animation: wl-smoke-out var(--wl-vt-dur) cubic-bezier(0.5, 0, 0.75, 0) both;
		mask-image: url("../img/smoke-mask.png"); -webkit-mask-image: url("../img/smoke-mask.png");
		mask-repeat: repeat; -webkit-mask-repeat: repeat; mask-size: 60% 60%; -webkit-mask-size: 60% 60%;
	}
	::view-transition-new(root) { animation: wl-rise-in 380ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
	@keyframes wl-smoke-out {
		0%   { opacity: 1; mask-size: 60% 60%; -webkit-mask-size: 60% 60%; mask-position: 0 0; -webkit-mask-position: 0 0; }
		100% { opacity: 0; mask-size: 180% 180%; -webkit-mask-size: 180% 180%; mask-position: 40% -30%; -webkit-mask-position: 40% -30%; }
	}
	/* Smoke-Drift im Hero (eine Lage, PNG, nur transform) */
	.wl-smoke {
		position: absolute; inset: -15% -10%; z-index: 0; pointer-events: none;
		background: rgb(190, 205, 180); opacity: 0.28; /* PNG mit Alpha-Kanal → mask-mode alpha (Default) */
		mask-image: url("../img/smoke-tex.png"); -webkit-mask-image: url("../img/smoke-tex.png"); mask-repeat: repeat; -webkit-mask-repeat: repeat; mask-size: 640px 640px; -webkit-mask-size: 640px 640px;
		animation: wl-drift 70s linear infinite alternate; will-change: transform; contain: strict;
	}
	@keyframes wl-drift { from { transform: translate3d(-3%, 2%, 0); } to { transform: translate3d(3%, -2%, 0); } }
	/* Header-Blur */
	.site-header::before { backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); background: rgba(13, 17, 15, 0.8); }
	/* Logo-Glow */
	.site-brand .wp-block-site-logo::before {
		content: ""; position: absolute; inset: -30%; z-index: -1; border-radius: 50%;
		background: radial-gradient(closest-side, rgba(155, 225, 93, 0.45), transparent 75%);
		animation: wl-pulse 4s ease-in-out infinite;
	}
	@keyframes wl-pulse { 0%, 100% { opacity: 0.5; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } }
	/* Hover-Effekte nur auf Hover-Geräten (kein „klebender“ Hover beim Tippen) */
	.wp-element-button::after, .wl-chat__btn:not(.is-pending)::after {
		content: ""; position: absolute; top: -50%; bottom: -50%; left: -30%; width: 30%;
		background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
		transform: skewX(-20deg) translateX(-100%); transition: transform 0.55s ease; pointer-events: none;
	}
	.wp-element-button:hover::after, .wl-chat__btn:hover::after { transform: skewX(-20deg) translateX(480%); }
	.wl-card:hover, .wl-archive-list .wp-block-post:hover { transform: translateY(-4px); }
	.wl-card:hover .wl-card__img img { transform: scale(1.04); }
}
.site-brand .wp-block-site-logo { position: relative; }
.wl-chat__btn { position: relative; overflow: hidden; }

/* Reduced Motion: nur Fades, keine Layer */
@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root), ::view-transition-new(root) { animation: wl-fade-in 200ms ease both; mask-image: none; -webkit-mask-image: none; }
	::view-transition-old(root) { animation-direction: reverse; }
	.wl-smoke, .wl-flare-bar { display: none !important; }
	.site-brand .wp-block-site-logo::before { animation: none; }
	.wl-hero__inner { animation: wl-fade-in 300ms ease both; }
	.wl-reveal { transition: opacity 0.3s ease; transform: none; }
	.wp-element-button::after, .wl-chat__btn::after { display: none; }
	.wl-card, .wl-card:hover, .wl-chat__btn:hover, .wl-archive-list .wp-block-post:hover { transform: none; transition: none; }
	html { scroll-behavior: auto; }
}