feat: section open/close animations via ViewTransition and @starting-style

Enable experimental.viewTransition in Next.js config. Wrap active section
in ViewTransitionWrapper so the browser cross-fades between sections on
navigation. Replace animate-fadeIn keyframe with @starting-style + CSS
transition for the initial render enter animation.

src/shared/styles/theme.css

@@ -230,17 +230,49 @@
   border-right: var(--border-width) solid var(--blue);
 }
 
-/* Animations */
-@keyframes fadeIn {
+/* Section content enter animation (initial render, no navigation) */
+.section-content {
+  opacity: 1;
+  transform: translateY(0);
+  transition:
+    opacity 0.35s ease,
+    transform 0.35s ease;
+}
+
+@starting-style {
+  .section-content {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+}
+
+/* Cross-section view transition (navigation between sections) */
+::view-transition-old(section-content) {
+  animation: 200ms ease both section-fade-out;
+}
+
+::view-transition-new(section-content) {
+  animation: 300ms ease both section-fade-in;
+}
+
+@keyframes section-fade-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+}
+
+@keyframes section-fade-in {
   from {
     opacity: 0;
-    transform: translateY(10px);
+    transform: translateY(12px);
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
-.animate-fadeIn {
-  animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-}