diff --git a/static/css/04-interactive/_chat.css b/static/css/04-interactive/_chat.css index 8f52def..c0a8df1 100644 --- a/static/css/04-interactive/_chat.css +++ b/static/css/04-interactive/_chat.css @@ -43,36 +43,49 @@ } /* Wave greeting — pops up 3 times then stays hidden */ +/* Wave greeting — independent of button opacity */ .chat-wave { - position: absolute; - top: -8px; - left: -8px; - font-size: 1rem; - animation: chatWaveHello 3s ease-in-out 2s forwards; + position: fixed; + bottom: calc(6rem + 38px); + right: calc(2rem + 38px); + z-index: 1001; + font-size: 1.1rem; + animation: chatWaveHello 5s ease-in-out 2s forwards; opacity: 0; pointer-events: none; } @keyframes chatWaveHello { - /* Fade in */ + /* === First wave === */ 0% { opacity: 0; transform: rotate(0deg); } - 8% { opacity: 1; transform: rotate(0deg); } - /* Wave: clockwise → counter-clockwise, 3 swings */ - 14% { transform: rotate(20deg); } - 20% { transform: rotate(-15deg); } - 26% { transform: rotate(18deg); } - 32% { transform: rotate(-12deg); } - 38% { transform: rotate(15deg); } - 44% { transform: rotate(-8deg); } - 50% { transform: rotate(0deg); } - /* Hold still briefly */ - 65% { opacity: 1; transform: rotate(0deg); } - /* Fade out */ - 100% { opacity: 0; transform: rotate(0deg); } + 4% { opacity: 1; transform: rotate(0deg); } + 7% { transform: rotate(20deg); } + 10% { transform: rotate(-15deg); } + 13% { transform: rotate(18deg); } + 16% { transform: rotate(-12deg); } + 19% { transform: rotate(15deg); } + 22% { transform: rotate(-8deg); } + 25% { transform: rotate(0deg); } + 30% { opacity: 1; } + 35% { opacity: 0; } + /* === Pause === */ + 45% { opacity: 0; transform: rotate(0deg); } + /* === Second wave === */ + 49% { opacity: 1; transform: rotate(0deg); } + 52% { transform: rotate(20deg); } + 55% { transform: rotate(-15deg); } + 58% { transform: rotate(18deg); } + 61% { transform: rotate(-12deg); } + 64% { transform: rotate(15deg); } + 67% { transform: rotate(-8deg); } + 70% { transform: rotate(0deg); } + 78% { opacity: 1; } + 90% { opacity: 0; } + 100% { opacity: 0; } } /* Hide wave when chat is open */ -.chat-toggle-btn.mascot-active .chat-wave { +.chat-wave.chat-wave-hidden { display: none; } diff --git a/templates/partials/widgets/chat-widget.html b/templates/partials/widgets/chat-widget.html index 1899075..4eccf11 100644 --- a/templates/partials/widgets/chat-widget.html +++ b/templates/partials/widgets/chat-widget.html @@ -9,8 +9,8 @@ onclick="toggleChatPanel()"> - 👋 +👋
@@ -126,8 +126,10 @@ function pollChatStatus() { function toggleChatPanel() { var panel = document.getElementById('chat-panel'); var btn = document.getElementById('chat-toggle-btn'); + var wave = document.getElementById('chat-wave'); panel.classList.toggle('chat-open'); btn.classList.toggle('mascot-active'); + if (wave) wave.classList.add('chat-wave-hidden'); if (panel.classList.contains('chat-open')) { document.getElementById('chat-input').focus(); }