From 64614d49e7d5d46142348749661a0c29a0328c8c Mon Sep 17 00:00:00 2001
From: Ferdinand <ferdinand@pigmento.local>
Date: Fri, 3 Apr 2026 17:14:26 +0200
Subject: [PATCH] feat: Logo-Animation synchronisiert Farben mit aktueller
 Farbe
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

hue-rotate verschiebt die Palette (Gelb/Pink/Lila) synchron zum
Farbton der identifizierten Farbe. Sanfter 0.8s Übergang.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 js/app.js | 4 +++-
 style.css | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/js/app.js b/js/app.js
index 13561ef..db3e2aa 100644
--- a/js/app.js
+++ b/js/app.js
@@ -44,11 +44,13 @@ document.querySelectorAll('.tab-btn').forEach(btn => {
 // Every color change goes into history
 document.addEventListener('colorChanged', (e) => addToHistory(e.detail));
 
-// Hintergrundfarbe als extrem helles Pastell der aktuellen Farbe
+// Hintergrundfarbe als extrem helles Pastell + Logo-Animation synchron einfärben
 document.addEventListener('colorChanged', (e) => {
   const { h, s } = e.detail;
   const pastelS = Math.round(Math.min(s * 0.5, 45));
   document.body.style.background = `hsl(${h}, ${pastelS}%, 92%)`;
+  const logo = document.getElementById('lottie-logo');
+  if (logo) logo.style.filter = `hue-rotate(${h - 52}deg)`;
 });
 
 initEingabe(addFavorit, addColorToSchema);
diff --git a/style.css b/style.css
index da42ccc..8d40fed 100644
--- a/style.css
+++ b/style.css
@@ -10,6 +10,8 @@ body {
   transition: background 0.8s ease;
 }
 
+#lottie-logo { transition: filter 0.8s ease; }
+
 #lottie-bg {
   position: fixed;
   inset: 0;