Add user-controlled animation preferences and reduce motion support

- Persist prefersReducedMotion and animationSpeedMultiplier in user
profile - Provide UI controls to toggle reduce motion and adjust
animation speed globally - Centralize animation preferences via provider
and useAnimationPreferences hook - Apply preferences to charts’
animations (duration, enabled/disabled) - Inline script in layout to
apply preferences early and avoid FOUC - Update CSS to respect user
preference with reduced motion overrides and variable animation speeds

src/app/dashboard/_components/revenue-chart.tsx

@@ -10,6 +10,7 @@ import {
 } from "recharts";
 import { getEffectiveInvoiceStatus } from "~/lib/invoice-status";
 import type { StoredInvoiceStatus } from "~/types/invoice";
+import { useAnimationPreferences } from "~/components/providers/animation-preferences-provider";
 
 interface Invoice {
   id: string;
@@ -99,6 +100,8 @@ export function RevenueChart({ invoices }: RevenueChartProps) {
     return null;
   };
 
+  const { prefersReducedMotion, animationSpeedMultiplier } =
+    useAnimationPreferences();
   if (chartData.length === 0) {
     return (
       <div className="flex h-64 items-center justify-center">
@@ -147,6 +150,11 @@ export function RevenueChart({ invoices }: RevenueChartProps) {
             stroke="hsl(0, 0%, 60%)"
             strokeWidth={2}
             fill="url(#revenueGradient)"
+            isAnimationActive={!prefersReducedMotion}
+            animationDuration={Math.round(
+              600 / (animationSpeedMultiplier ?? 1),
+            )}
+            animationEasing="ease-out"
           />
         </AreaChart>
       </ResponsiveContainer>