feat: Add peeking Bongo Cat Easter Egg with micro-animations

app.js

@@ -232,3 +232,67 @@ loadConfig()
     dashboardSections.innerHTML = '<p class="empty-state">Dashboard-Konfiguration konnte nicht geladen werden.</p>';
     onlineCount.textContent = '--';
   });
+
+// ==========================================================================
+// Peeking Bongo Cat Easter Egg Logic
+// ==========================================================================
+(function initPeekingCat() {
+  const peekingCat = document.querySelector('#peekingCat');
+  const searchInput = document.querySelector('#serviceSearch');
+  
+  if (!peekingCat) return;
+
+  let tapTimeout = null;
+
+  // Function to trigger heart popup on click
+  function createHeart(x, y) {
+    const heart = document.createElement('div');
+    heart.className = 'cat-heart';
+    heart.innerHTML = '❤️';
+    heart.style.left = `${x - 12}px`;
+    heart.style.top = `${y - 20}px`;
+    
+    // Set random rotation angle in CSS custom variable
+    const randomRot = Math.random() * 40 - 20;
+    heart.style.setProperty('--rot', `${randomRot}deg`);
+    
+    document.body.appendChild(heart);
+    
+    // Cleanup heart after animation completes
+    setTimeout(() => heart.remove(), 800);
+  }
+
+  // Focus search box triggers peeking active state
+  if (searchInput) {
+    searchInput.addEventListener('focus', () => {
+      peekingCat.classList.add('is-active');
+    });
+
+    searchInput.addEventListener('blur', () => {
+      peekingCat.classList.remove('is-active');
+      peekingCat.classList.remove('is-tapping');
+    });
+
+    // Keyboard typing triggers tapping animation!
+    searchInput.addEventListener('input', () => {
+      peekingCat.classList.add('is-active');
+      peekingCat.classList.add('is-tapping');
+
+      if (tapTimeout) clearTimeout(tapTimeout);
+      tapTimeout = setTimeout(() => {
+        peekingCat.classList.remove('is-tapping');
+      }, 350); // Stop tapping 350ms after typing stops
+    });
+  }
+
+  // Click on cat triggers tapping + heart animation!
+  peekingCat.addEventListener('click', (e) => {
+    peekingCat.classList.add('is-tapping');
+    createHeart(e.clientX, e.clientY);
+
+    if (tapTimeout) clearTimeout(tapTimeout);
+    tapTimeout = setTimeout(() => {
+      peekingCat.classList.remove('is-tapping');
+    }, 800);
+  });
+})();