feat: add smooth site-wide animations with framer-motion

- Add framer-motion and tailwindcss-animate for transitions
- Add page transitions via AnimatePresence in the site layout
- Convert nav dropdown and mobile menu to animated motion components
- Add entry animation to the radio player widget
- Add reveal/stagger animations to the home page views
- Add shared motion utilities and reusable animated components

src/components/motion-elements.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import type { HTMLMotionProps } from "framer-motion";
+import { motion } from "framer-motion";
+import {
+	fadeIn,
+	fadeInUp,
+	hoverLift,
+	hoverScale,
+	scaleIn,
+	staggerContainer,
+	staggerItem,
+} from "@/lib/motion";
+
+type DivProps = HTMLMotionProps<"div">;
+
+export function AnimatedSection({ children, className, ...props }: DivProps) {
+	return (
+		<motion.div
+			className={className}
+			variants={staggerContainer}
+			initial="hidden"
+			animate="visible"
+			{...props}
+		>
+			{children}
+		</motion.div>
+	);
+}
+
+export function AnimatedChild({ children, className, ...props }: DivProps) {
+	return (
+		<motion.div className={className} variants={staggerItem} {...props}>
+			{children}
+		</motion.div>
+	);
+}
+
+export function FadeIn({ children, className, ...props }: DivProps) {
+	return (
+		<motion.div
+			className={className}
+			variants={fadeIn}
+			initial="hidden"
+			animate="visible"
+			{...props}
+		>
+			{children}
+		</motion.div>
+	);
+}
+
+export function FadeInUp({ children, className, ...props }: DivProps) {
+	return (
+		<motion.div
+			className={className}
+			variants={fadeInUp}
+			initial="hidden"
+			animate="visible"
+			{...props}
+		>
+			{children}
+		</motion.div>
+	);
+}
+
+export function ScaleIn({ children, className, ...props }: DivProps) {
+	return (
+		<motion.div
+			className={className}
+			variants={scaleIn}
+			initial="hidden"
+			animate="visible"
+			{...props}
+		>
+			{children}
+		</motion.div>
+	);
+}
+
+export function HoverCard({ children, className, ...props }: DivProps) {
+	return (
+		<motion.div
+			className={className}
+			{...hoverLift}
+			whileHover={{ y: -4, transition: { duration: 0.2 } }}
+			{...props}
+		>
+			{children}
+		</motion.div>
+	);
+}
+
+export function HoverButton({ children, className, ...props }: DivProps) {
+	return (
+		<motion.div className={className} {...hoverScale} {...props}>
+			{children}
+		</motion.div>
+	);
+}