feat: wave greeting animation on chat button to attract clicks

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

@@ -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);

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">