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/lib/motion.ts

@@ -0,0 +1,115 @@
+import type { Variants } from "framer-motion";
+
+export const fadeIn: Variants = {
+	hidden: { opacity: 0 },
+	visible: { opacity: 1, transition: { duration: 0.4 } },
+};
+
+export const fadeInUp: Variants = {
+	hidden: { opacity: 0, y: 20 },
+	visible: { opacity: 1, y: 0, transition: { duration: 0.4 } },
+};
+
+export const fadeInDown: Variants = {
+	hidden: { opacity: 0, y: -12 },
+	visible: { opacity: 1, y: 0, transition: { duration: 0.3 } },
+};
+
+export const fadeInLeft: Variants = {
+	hidden: { opacity: 0, x: -20 },
+	visible: { opacity: 1, x: 0, transition: { duration: 0.35 } },
+};
+
+export const fadeInRight: Variants = {
+	hidden: { opacity: 0, x: 20 },
+	visible: { opacity: 1, x: 0, transition: { duration: 0.35 } },
+};
+
+export const scaleIn: Variants = {
+	hidden: { opacity: 0, scale: 0.95 },
+	visible: { opacity: 1, scale: 1, transition: { duration: 0.25 } },
+};
+
+export const slideUp: Variants = {
+	hidden: { opacity: 0, y: 30 },
+	visible: {
+		opacity: 1,
+		y: 0,
+		transition: { duration: 0.4, ease: [0.25, 0.1, 0.25, 1] },
+	},
+};
+
+export const staggerContainer: Variants = {
+	hidden: {},
+	visible: {
+		transition: {
+			staggerChildren: 0.07,
+			delayChildren: 0.1,
+		},
+	},
+};
+
+export const staggerItem: Variants = {
+	hidden: { opacity: 0, y: 16 },
+	visible: { opacity: 1, y: 0, transition: { duration: 0.35 } },
+};
+
+export const pageTransition: Variants = {
+	initial: { opacity: 0, y: 8 },
+	enter: {
+		opacity: 1,
+		y: 0,
+		transition: { duration: 0.35, ease: [0.25, 0.1, 0.25, 1] },
+	},
+	exit: { opacity: 0, y: -8, transition: { duration: 0.2 } },
+};
+
+export const dropdownVariants: Variants = {
+	hidden: { opacity: 0, y: -6, scale: 0.97 },
+	visible: {
+		opacity: 1,
+		y: 0,
+		scale: 1,
+		transition: { duration: 0.18, ease: "easeOut" },
+	},
+	exit: { opacity: 0, y: -4, scale: 0.97, transition: { duration: 0.12 } },
+};
+
+export const mobileMenuVariants: Variants = {
+	hidden: { opacity: 0, scale: 0.96, y: -8 },
+	visible: {
+		opacity: 1,
+		scale: 1,
+		y: 0,
+		transition: { duration: 0.2, ease: "easeOut" },
+	},
+	exit: { opacity: 0, scale: 0.96, y: -6, transition: { duration: 0.15 } },
+};
+
+export const modalOverlayVariants: Variants = {
+	hidden: { opacity: 0 },
+	visible: { opacity: 1, transition: { duration: 0.2 } },
+	exit: { opacity: 0, transition: { duration: 0.15 } },
+};
+
+export const modalContentVariants: Variants = {
+	hidden: { opacity: 0, scale: 0.95, y: 10 },
+	visible: {
+		opacity: 1,
+		scale: 1,
+		y: 0,
+		transition: { duration: 0.25, ease: [0.25, 0.1, 0.25, 1] },
+	},
+	exit: { opacity: 0, scale: 0.95, y: 10, transition: { duration: 0.15 } },
+};
+
+export const hoverScale = {
+	whileHover: { scale: 1.03 },
+	whileTap: { scale: 0.97 },
+	transition: { type: "spring" as const, stiffness: 400, damping: 17 },
+};
+
+export const hoverLift = {
+	whileHover: { y: -3, transition: { duration: 0.2 } },
+	whileTap: { y: 0 },
+};