fix: black page after logout — remove conflicting page-motion--enter animation

Root cause: PageTransition wrapper div had page-motion--enter direction
class after exit phase, which started from opacity:0. This conflicted
with the child component's own page-motion entrance animation, causing
the page to remain invisible after logout/view switch.

Fix: Remove page-motion--enter direction classes from the wrapper. The
child's own page-motion animation handles entrance. Direction is only
applied to the exit phase (slide-out-forward/backward).

Also: redirect to login instead of workbench on logout/session expiry,
and respect prefers-reduced-motion by skipping exit delay.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/components/PageTransition.tsx

@@ -6,6 +6,7 @@ interface PageTransitionProps {
 }
 
 const EXIT_DURATION_MS = 180;
+const REDUCED_MOTION_EXIT_MS = 0;
 
 const NAV_ORDER: string[] = [
   "home",
@@ -37,10 +38,14 @@ function getNavIndex(key: string): number {
   return NAV_ORDER.indexOf(key);
 }
 
+const prefersReducedMotion = typeof window !== "undefined"
+  ? window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  : false;
+
 export default function PageTransition({ viewKey, children }: PageTransitionProps) {
   const [displayedChildren, setDisplayedChildren] = useState(children);
   const [phase, setPhase] = useState<"idle" | "exit">("idle");
-  const [direction, setDirection] = useState<"forward" | "backward" | "neutral">("neutral");
+  const [exitDirection, setExitDirection] = useState<"forward" | "backward" | "neutral">("neutral");
   const prevKeyRef = useRef(viewKey);
   const timerRef = useRef<ReturnType<typeof setTimeout>>();
 
@@ -52,25 +57,33 @@ export default function PageTransition({ viewKey, children }: PageTransitionProp
     const prevIndex = getNavIndex(prevKeyRef.current);
     const nextIndex = getNavIndex(viewKey);
     if (prevIndex < nextIndex) {
-      setDirection("forward");
+      setExitDirection("forward");
     } else if (prevIndex > nextIndex) {
-      setDirection("backward");
+      setExitDirection("backward");
     } else {
-      setDirection("neutral");
+      setExitDirection("neutral");
     }
     prevKeyRef.current = viewKey;
+
+    if (prefersReducedMotion) {
+      setDisplayedChildren(children);
+      setPhase("idle");
+      return;
+    }
+
     setPhase("exit");
+    const duration = prefersReducedMotion ? REDUCED_MOTION_EXIT_MS : EXIT_DURATION_MS;
     timerRef.current = setTimeout(() => {
       setDisplayedChildren(children);
       setPhase("idle");
-    }, EXIT_DURATION_MS);
+    }, duration);
     return () => clearTimeout(timerRef.current);
   }, [viewKey, children]);
 
-  const dirClass = direction === "forward" ? " is-forward" : direction === "backward" ? " is-backward" : "";
+  const dirClass = exitDirection === "forward" ? " is-forward" : exitDirection === "backward" ? " is-backward" : "";
 
   return (
-    <div className={phase === "exit" ? `page-transition-wrap page-motion--exit${dirClass}` : `page-transition-wrap${phase === "idle" && direction !== "neutral" ? ` page-motion--enter${dirClass}` : ""}`}>
+    <div className={phase === "exit" ? `page-transition-wrap page-motion--exit${dirClass}` : "page-transition-wrap"}>
       {displayedChildren}
     </div>
   );

src/styles/components/page-transition.css

@@ -16,15 +16,7 @@
   }
 }
 
-/* Directional page transitions */
-.page-motion--enter.is-forward {
-  animation: page-slide-in-forward 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
-}
-
-.page-motion--enter.is-backward {
-  animation: page-slide-in-backward 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
-}
-
+/* Directional exit transitions only — entrance is handled by child's page-motion */
 .page-motion--exit.is-forward {
   animation: page-slide-out-forward 180ms ease both;
 }
@@ -33,28 +25,6 @@
   animation: page-slide-out-backward 180ms ease both;
 }
 
-@keyframes page-slide-in-forward {
-  from {
-    opacity: 0;
-    transform: translateX(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes page-slide-in-backward {
-  from {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
 @keyframes page-slide-out-forward {
   to {
     opacity: 0;
@@ -67,4 +37,4 @@
     opacity: 0;
     transform: translateX(16px);
   }
-}
+}