diff --git a/src/lib/components/home/StageAmbience.svelte b/src/lib/components/home/StageAmbience.svelte index 8d51337..386de94 100644 --- a/src/lib/components/home/StageAmbience.svelte +++ b/src/lib/components/home/StageAmbience.svelte @@ -147,13 +147,35 @@ .moon { position: absolute; - filter: drop-shadow(0 0 18px rgba(255, 233, 163, 0.85)); animation: moonpath 12s linear infinite; } + /* Leuchten als radialer Verlauf statt drop-shadow-Filter: + Safari/WebKit rendert animierte Filter ausgefranst, ein Gradient bleibt sauber. */ + .moon::before { + content: ''; + position: absolute; + inset: -45%; + border-radius: 50%; + background: radial-gradient( + circle, + rgba(255, 233, 163, 0.6) 0%, + rgba(255, 233, 163, 0.22) 45%, + transparent 70% + ); + z-index: -1; + pointer-events: none; + } + /* Parabel-Bogen: top folgt einer Kurve (kein Knick am Scheitel), left läuft gleichmäßig. */ @keyframes moonpath { - 0% { left: -16%; top: 36%; } - 50% { top: 14%; } - 100% { left: 112%; top: 36%; } + 0% { left: -16%; top: 36%; } + 12.5% { left: 0%; top: 26.4%; } + 25% { left: 16%; top: 19.5%; } + 37.5% { left: 32%; top: 15.4%; } + 50% { left: 48%; top: 14%; } + 62.5% { left: 64%; top: 15.4%; } + 75% { left: 80%; top: 19.5%; } + 87.5% { left: 96%; top: 26.4%; } + 100% { left: 112%; top: 36%; } } @media (prefers-reduced-motion: reduce) {