refactor: simplify menu and toast interactions with CSS-driven animations

- Moved menu hover logic from JavaScript to CSS selectors, reducing JS to minimal bridge code
- Replaced JavaScript-based toast timing with pure CSS animation lifecycle (slide in → stay → fade out)
- Removed unnecessary event handlers and legacy compatibility code for cleaner implementation

static/css/main.css

@@ -1579,24 +1579,38 @@ a:focus {
     border-radius: 8px;
     border-left: 4px solid #dc2626;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    display: flex;
+    display: none; /* Hidden by default */
     align-items: center;
     gap: 1rem;
     max-width: 400px;
     z-index: 1000;
-    animation: slideIn 0.3s ease-out;
     font-size: 0.95rem;
 }
 
-@keyframes slideIn {
-    from {
+/* Show toast with full animation cycle: slide in -> stay -> fade out */
+.error-toast.show {
+    display: flex;
+    animation: toastLifecycle 5.5s ease-out forwards;
+}
+
+/* Full lifecycle animation: slide in (0-0.3s), stay (0.3-5s), fade out (5-5.5s) */
+@keyframes toastLifecycle {
+    0% {
         transform: translateX(120%);
         opacity: 0;
     }
-    to {
+    5.5% { /* 0.3s / 5.5s = 5.5% */
         transform: translateX(0);
         opacity: 1;
     }
+    90.9% { /* 5s / 5.5s = 90.9% - stay visible */
+        transform: translateX(0);
+        opacity: 1;
+    }
+    100% { /* Final 0.5s - fade out and slide right */
+        transform: translateX(120%);
+        opacity: 0;
+    }
 }
 
 .error-icon {
@@ -2233,8 +2247,10 @@ text-align: center;
     transition: background-color 0.2s ease;
     border-radius: 4px;
     margin: 0 0.5rem;
+    position: relative; /* For CSS-only hover trigger */
 }
 
+
 .hamburger-btn:hover {
     background-color: rgba(255, 255, 255, 0.1);
 }
@@ -2259,21 +2275,20 @@ text-align: center;
     opacity: 0;
 }
 
-/* Show menu when hovering menu itself OR when it has the hover class */
+/* Pure CSS Menu Activation - Show menu when hovering hamburger OR menu */
+/* Show when hovering the hamburger button (adjacent in DOM after site-title-left) */
+.hamburger-btn:hover ~ .navigation-menu,
+.hamburger-btn:focus ~ .navigation-menu,
+/* Show when hovering the menu itself */
 .navigation-menu:hover,
-.navigation-menu.menu-hover {
+/* Legacy class for backward compatibility */
+.navigation-menu.menu-hover,
+.navigation-menu.menu-open {
     max-height: calc(100vh - 60px); /* Viewport height minus header + some spacing */
     pointer-events: auto; /* Enable pointer events when visible */
     opacity: 1;
 }
 
-/* Legacy class for JS compatibility - keep for backward compatibility */
-.navigation-menu.menu-open {
-    max-height: calc(100vh - 60px);
-    pointer-events: auto;
-    opacity: 1;
-}
-
 .menu-content {
     padding: 1rem 0;
 }