From 84d69fa8db23d480f6503296fdf53de39e22dae6 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Thu, 9 Apr 2026 11:35:21 +0100
Subject: [PATCH] feat: wave greeting animation on chat button to attract
 clicks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Emoji 👋 pops up 3 times with a waving motion (3s delay after page load),
then disappears. Hidden when chat is open.
---
 static/css/04-interactive/_chat.css         | 41 +++++++++++++++++++++
 templates/partials/widgets/chat-widget.html |  1 +
 2 files changed, 42 insertions(+)

diff --git a/static/css/04-interactive/_chat.css b/static/css/04-interactive/_chat.css
index fb97832..686d7dd 100644
--- a/static/css/04-interactive/_chat.css
+++ b/static/css/04-interactive/_chat.css
@@ -42,6 +42,47 @@
     display: none;
 }
 
+/* Wave greeting — pops up 3 times then stays hidden */
+.chat-wave {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    font-size: 0.85rem;
+    animation: chatWaveHello 6s ease-in-out 3s forwards;
+    opacity: 0;
+    pointer-events: none;
+}
+
+@keyframes chatWaveHello {
+    0%       { opacity: 0; transform: scale(0.5) rotate(0deg); }
+    5%       { opacity: 1; transform: scale(1) rotate(0deg); }
+    8%       { transform: scale(1) rotate(15deg); }
+    11%      { transform: scale(1) rotate(-10deg); }
+    14%      { transform: scale(1) rotate(15deg); }
+    17%      { transform: scale(1) rotate(0deg); }
+    25%      { opacity: 0; transform: scale(0.5); }
+    35%      { opacity: 0; transform: scale(0.5) rotate(0deg); }
+    40%      { opacity: 1; transform: scale(1) rotate(0deg); }
+    43%      { transform: scale(1) rotate(15deg); }
+    46%      { transform: scale(1) rotate(-10deg); }
+    49%      { transform: scale(1) rotate(15deg); }
+    52%      { transform: scale(1) rotate(0deg); }
+    60%      { opacity: 0; transform: scale(0.5); }
+    70%      { opacity: 0; transform: scale(0.5) rotate(0deg); }
+    75%      { opacity: 1; transform: scale(1) rotate(0deg); }
+    78%      { transform: scale(1) rotate(15deg); }
+    81%      { transform: scale(1) rotate(-10deg); }
+    84%      { transform: scale(1) rotate(15deg); }
+    87%      { transform: scale(1) rotate(0deg); }
+    95%      { opacity: 0; transform: scale(0.5); }
+    100%     { opacity: 0; }
+}
+
+/* Hide wave when chat is open */
+.chat-toggle-btn.mascot-active .chat-wave {
+    display: none;
+}
+
 .chat-toggle-btn.mascot-active {
     opacity: 1;
     background: var(--accent-green, #27ae60);
diff --git a/templates/partials/widgets/chat-widget.html b/templates/partials/widgets/chat-widget.html
index bbac6c6..1899075 100644
--- a/templates/partials/widgets/chat-widget.html
+++ b/templates/partials/widgets/chat-widget.html
@@ -9,6 +9,7 @@
     onclick="toggleChatPanel()">
     <iconify-icon icon="mdi:robot-happy-outline" class="chat-icon-open"></iconify-icon>
     <iconify-icon icon="mdi:close" class="chat-icon-close"></iconify-icon>
+    <span class="chat-wave">👋</span>
 </button>
 
 <div id="chat-panel" class="chat-panel no-print">