feat(frontend): micro-interactions — page-enter transition + MetricTile lift

- Add animate-fade-up utility (reduced-motion aware) and a PageTransition
  wrapper; every dashboard view now rises + settles on mount/route change.
- MetricTile gains a subtle hover lift (-translate-y) + ring-focus glow.
- Theme toggle and command palette (⌘K) already existed and persist; no-op.

services/frontend/src/components/shared/index.ts

@@ -1,5 +1,6 @@
 export { GuildChannelPicker } from "./guild-picker";
 export { MarkdownLite } from "./markdown";
+export { PageTransition } from "./page-transition";
 export { MetricTile, SectionHeader } from "./section";
 export {
   EmptyState,

services/frontend/src/components/shared/page-transition.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils";
+
+/**
+ * Wraps a view's root so the whole panel stack rises + settles on mount.
+ * The animation is disabled under prefers-reduced-motion via globals.css.
+ */
+export function PageTransition({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return <div className={cn("animate-fade-up", className)}>{children}</div>;
+}

services/frontend/src/components/shared/section.tsx

@@ -55,7 +55,12 @@ export function MetricTile({
           ? "var(--color-signal)"
           : "var(--color-ink)";
   return (
-    <div className={cn("glass p-4", className)}>
+    <div
+      className={cn(
+        "glass p-4 ring-focus transition-transform duration-200 hover:-translate-y-0.5",
+        className,
+      )}
+    >
       <div className="flex items-center justify-between">
         <div className="eyebrow">{label}</div>
         {icon && <span className="text-ink-faint">{icon}</span>}