/*
 * Felgenforum — Saison-Wechsel (Sommer ↔ Winter)
 * Nur Akzentfarbe + kurze Viewport-Transition — keine Karten-Overlays
 * (::before-Frost erzeugte sichtbare Rand-Artefakte an border-radius).
 */

:root {
	--ff-season-sommer: #e8941a;
	--ff-season-winter: #2563eb;
	--ff-season-glow: var(--ff-season-sommer);
}

html[data-season="sommer"] {
	--ff-season-glow: var(--ff-season-sommer);
}

html[data-season="winter"] {
	--ff-season-glow: var(--ff-season-winter);
}

/* ── Transition: Viewport-Glow beim S/W-Klick ─────── */
body.ff-season-transitioning::before,
body.ff-season-transitioning::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9997;
	opacity: 0;
}

body.ff-season-transitioning::before {
	background:
		radial-gradient(
			ellipse 110% 70% at var(--ff-season-origin-x, 50%) var(--ff-season-origin-y, 8%),
			color-mix(in srgb, var(--ff-season-glow) 24%, transparent) 0%,
			transparent 55%
		);
	animation: ff-season-vignette-in 1.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.ff-season-transitioning::after {
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--ff-season-glow) 10%, transparent) 0%,
		transparent 18%
	);
	mix-blend-mode: soft-light;
	animation: ff-season-vignette-soft 1.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

[data-theme="dark"] body.ff-season-transitioning::before {
	background:
		radial-gradient(
			ellipse 120% 85% at var(--ff-season-origin-x, 50%) var(--ff-season-origin-y, 6%),
			color-mix(in srgb, var(--ff-season-glow) 32%, transparent) 0%,
			transparent 50%
		);
}

[data-theme="dark"] body.ff-season-transitioning::after {
	background:
		radial-gradient(
			ellipse 100% 100% at 50% 50%,
			transparent 50%,
			color-mix(in srgb, var(--ff-season-glow) 12%, #000) 100%
		);
	mix-blend-mode: normal;
}

@keyframes ff-season-vignette-in {
	0% { opacity: 0; transform: scale(1.02); }
	20% { opacity: 0.75; }
	100% { opacity: 0; transform: scale(1); }
}

@keyframes ff-season-vignette-soft {
	0% { opacity: 0; }
	25% { opacity: 0.45; }
	100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	body.ff-season-transitioning::before,
	body.ff-season-transitioning::after {
		animation: none !important;
	}
}