From e865e0d9e0f16d835e6f361139e2f81d07891baa Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Thu, 9 Apr 2026 13:59:31 +0100
Subject: [PATCH] feat: hover animations on all floating buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Rotate 90°: PDF, leaf, info, theme, chat (symmetric icons)
- Wiggle: email envelope (notification feel)
- Scale pulse: keyboard shortcut (key press feel)
- Bounce up: back-to-top arrow (reinforces direction)
---
 static/css/04-interactive/_chat.css           |  5 ++
 .../css/04-interactive/_scroll-behavior.css   | 65 +++++++++++++++++++
 2 files changed, 70 insertions(+)

diff --git a/static/css/04-interactive/_chat.css b/static/css/04-interactive/_chat.css
index a17d3c5..4e5540c 100644
--- a/static/css/04-interactive/_chat.css
+++ b/static/css/04-interactive/_chat.css
@@ -37,6 +37,11 @@
     background: var(--accent-green, #27ae60);
 }
 
+.chat-toggle-btn:hover iconify-icon {
+    transform: rotate(90deg);
+    transition: transform 0.3s ease;
+}
+
 /* Icon swap: show mascot by default, close when active */
 .chat-toggle-btn .chat-icon-close {
     display: none;
diff --git a/static/css/04-interactive/_scroll-behavior.css b/static/css/04-interactive/_scroll-behavior.css
index 93d7f36..6c330c6 100644
--- a/static/css/04-interactive/_scroll-behavior.css
+++ b/static/css/04-interactive/_scroll-behavior.css
@@ -122,6 +122,71 @@
     font-size: 24px;
 }
 
+/* ==========================================================================
+   Floating Button Icon Hover Animations
+   - Rotate: PDF, leaf, info, theme, close (symmetric icons)
+   - Wiggle: email (envelope notification feel)
+   - Pulse: keyboard (key press feel)
+   - Bounce up: back-to-top arrow (reinforces direction)
+   ========================================================================== */
+
+/* All floating icons: smooth transition */
+.download-btn iconify-icon,
+.print-friendly-btn iconify-icon,
+.fixed-btn.contact-btn iconify-icon,
+.shortcuts-btn iconify-icon,
+.info-button iconify-icon,
+.back-to-top iconify-icon,
+.color-theme-switcher iconify-icon,
+.chat-toggle-btn iconify-icon {
+    transition: transform 0.3s ease;
+}
+
+/* Rotate clockwise: PDF, leaf, info, theme, chat close */
+.download-btn:hover iconify-icon,
+.print-friendly-btn:hover iconify-icon,
+.info-button:hover iconify-icon,
+.color-theme-switcher:hover iconify-icon {
+    transform: rotate(90deg);
+}
+
+/* Wiggle: email envelope */
+.fixed-btn.contact-btn:hover iconify-icon {
+    animation: iconWiggle 0.5s ease;
+}
+
+@keyframes iconWiggle {
+    0%   { transform: rotate(0deg); }
+    20%  { transform: rotate(-12deg); }
+    40%  { transform: rotate(10deg); }
+    60%  { transform: rotate(-8deg); }
+    80%  { transform: rotate(5deg); }
+    100% { transform: rotate(0deg); }
+}
+
+/* Scale pulse: keyboard */
+.shortcuts-btn:hover iconify-icon {
+    animation: iconPulse 0.4s ease;
+}
+
+@keyframes iconPulse {
+    0%   { transform: scale(1); }
+    50%  { transform: scale(1.25); }
+    100% { transform: scale(1); }
+}
+
+/* Bounce up: back-to-top arrow */
+.back-to-top:hover iconify-icon {
+    animation: iconBounceUp 0.4s ease;
+}
+
+@keyframes iconBounceUp {
+    0%   { transform: translateY(0); }
+    40%  { transform: translateY(-4px); }
+    70%  { transform: translateY(1px); }
+    100% { transform: translateY(0); }
+}
+
 /* Hide keyboard shortcuts button on real mobile devices (no keyboard) */
 .is-mobile-device .shortcuts-btn,
 .is-mobile-device .zoom-toggle-btn,