Move the field guide into the docs section

components/BackNavigationTransition.tsx

@@ -1,36 +1,24 @@
 "use client";
 
-import { useEffect, useRef } from "react";
+import { useLayoutEffect, useRef } from "react";
 import { usePathname, useSearchParams } from "next/navigation";
 
-/** Animate the new content after browser history navigation, without delaying it. */
+/** Animate newly committed pages without delaying navigation. */
 export function BackNavigationTransition() {
   const pathname = usePathname();
   const search = useSearchParams();
-  const route = `${pathname}?${search.toString()}`;
-  const historyNavigation = useRef(false);
+  // Documentation pages share a pathname; other query changes are filters or
+  // state updates and should not animate the entire page.
+  const route =
+    pathname === "/docs"
+      ? `${pathname}?page=${search.get("page") ?? "welcome"}`
+      : pathname;
   const previousPath = useRef(route);
 
-  useEffect(() => {
-    const onPopState = () => {
-      historyNavigation.current =
-        `${window.location.pathname}?${new URLSearchParams(window.location.search).toString()}` !==
-        previousPath.current;
-    };
-    window.addEventListener("popstate", onPopState);
-    return () => window.removeEventListener("popstate", onPopState);
-  }, []);
-
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (previousPath.current === route) return;
     previousPath.current = route;
-    const fromHistory = historyNavigation.current;
-    historyNavigation.current = false;
-    if (
-      !fromHistory ||
-      window.matchMedia("(prefers-reduced-motion: reduce)").matches
-    )
-      return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
     const main = document.getElementById("main-content");
     if (!main || typeof main.animate !== "function") return;
     const animation = main.animate(