website: Add micro-animations including scroll progress bar, nav logo entrance spin, and button shine sweeps

website/style.css

@@ -4061,3 +4061,70 @@ header[id] {
     0%, 100% { transform: translateY(0); }
     50% { transform: translateY(-16px); }
 }
+
+/* --- High Fidelity Micro-Animations & Identity additions --- */
+
+/* Scroll progress bar glowing line at the top */
+.scroll-progress-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 3px;
+    background: linear-gradient(90deg, var(--accent), #a855f7, #ec4899);
+    z-index: 9999;
+    width: 0%;
+    transition: width 0.1s ease-out;
+    box-shadow: 0 0 8px var(--accent-glow);
+}
+
+/* Navigation logo pop & spin */
+.nav-logo-img {
+    animation: logo-entrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+    transform-origin: center;
+    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+    will-change: transform, opacity;
+}
+
+.nav-logo-img:hover {
+    transform: scale(1.15) rotate(360deg);
+}
+
+@keyframes logo-entrance {
+    0% {
+        transform: scale(0) rotate(-180deg);
+        opacity: 0;
+    }
+    100% {
+        transform: scale(1) rotate(0deg);
+        opacity: 1;
+    }
+}
+
+/* Glowing reflection sweep on buttons */
+.btn-primary, .btn-firefox, .btn-secondary {
+    position: relative;
+    overflow: hidden;
+}
+
+.btn-primary::after, .btn-firefox::after, .btn-secondary::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(255, 255, 255, 0.25) 50%,
+        rgba(255, 255, 255, 0) 100%
+    );
+    transform: skewX(-25deg);
+    transition: none;
+    pointer-events: none;
+}
+
+.btn-primary:hover::after, .btn-firefox:hover::after, .btn-secondary:hover::after {
+    left: 100%;
+    transition: left 0.8s ease-in-out;
+}