Some icons and basic tweaks for the visuals

src/lib/components/Navigation.svelte

@@ -51,17 +51,17 @@
         background-color: var(--color-bg);
         background-color: var(--color-bg);
         border-bottom: 1px solid var(--color-border);
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
-        padding: var(--space-md) 0;
+        padding-top: var(--space-sm);
         position: sticky;
         text-align: center;
         top: 0;
         z-index: 100;
 
         @media (max-width: 768px) {
+            align-items: stretch;
             display: flex;
             flex-direction: column;
-            align-items: stretch;
+            padding: var(--space-md) 0;
         }
     }
 
@@ -281,29 +281,56 @@
     }
 
     @supports (animation-timeline: scroll()) {
+        /* Shadow on pseudo-element; only opacity is animated (composited) */
+        .nav::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+            pointer-events: none;
+            opacity: 0;
+            animation: nav-shadow-on-scroll linear;
+            animation-timeline: scroll(root block);
+            animation-range: 0 100px;
+            animation-fill-mode: both;
+            will-change: opacity;
+        }
+
+        @keyframes nav-shadow-on-scroll {
+            from {
+                opacity: 0;
+            }
+
+            to {
+                opacity: 1;
+            }
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            .nav::after {
+                animation: none;
+                opacity: 1;
+            }
+        }
+
+        /* Composited-only animation: opacity only (visibility/pointer-events not animated) */
         .nav-back-to-top,
         .nav-header-logo {
             opacity: 0;
-            visibility: hidden;
-            pointer-events: none;
             animation: nav-reveal-on-scroll linear;
             animation-timeline: scroll(root block);
             animation-range: 300px 400px;
             animation-fill-mode: both;
-            will-change: opacity, visibility;
+            will-change: opacity;
         }
 
         @keyframes nav-reveal-on-scroll {
             from {
                 opacity: 0;
-                visibility: hidden;
-                pointer-events: none;
             }
 
             to {
                 opacity: 1;
-                visibility: visible;
-                pointer-events: auto;
             }
         }