Refine dashboard hero, mobile nav, animations and touch polish

- Stack the /me dashboard hero (avatar + info) on small screens instead of
  crowding them side by side; center the avatar and info on mobile
- Respect prefers-reduced-motion in the Reveal scroll animation
- Make the desktop pitch-in (NavDropdown) and mobile menu more consistent;
  give the mobile menu a max-height with overscroll containment so long
  navs scroll instead of overflowing on small phones
- Add safe-area insets for notched devices on header, nav and footer
- Polish whole-link content-cards (community tiles) with hover lift and a
  visible focus ring
- Enforce a comfortable min touch height on all .btn buttons

src/components/motion-reveal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { motion } from "motion/react";
+import { motion, useReducedMotion } from "motion/react";
 import type { ReactNode } from "react";
 
 interface RevealProps {
@@ -10,12 +10,14 @@ interface RevealProps {
 }
 
 export function Reveal({ children, className, delay = 0 }: RevealProps) {
+	const prefersReducedMotion = useReducedMotion();
+
 	return (
 		<motion.div
 			className={className}
-			initial={{ opacity: 0, y: 24 }}
+			initial={{ opacity: 0, y: prefersReducedMotion ? 0 : 24 }}
 			whileInView={{ opacity: 1, y: 0 }}
-			viewport={{ once: true, margin: "-50px" }}
+			viewport={{ once: true, margin: "-40px" }}
 			transition={{ duration: 0.45, delay, ease: [0.25, 0.1, 0.25, 1] }}
 		>
 			{children}