fix: blur circle uses library defaults, animation originates from correct button

- Match library default specs: duration 750ms, blurAmount 2, ease-in-out
- Move toggleRef to mobile header button so animation originates from
  the visible button on mobile (was attached to hidden sidebar button)

Author: helliott-redactbox

client/src/components/Layout/Layout.tsx

@@ -15,7 +15,7 @@ interface LayoutProps {
 export default function Layout({ children }: LayoutProps) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const location = useLocation();
-  const { resolvedTheme, toggleTheme } = useTheme();
+  const { resolvedTheme, toggleTheme, toggleRef } = useTheme();
 
   // Swipe state refs (avoid re-renders during drag)
   const isDragging = useRef(false);
@@ -233,6 +233,7 @@ export default function Layout({ children }: LayoutProps) {
           <span className="text-lg font-display font-bold text-surface-50">Prunerr</span>
         </div>
         <button
+          ref={toggleRef}
           onClick={toggleTheme}
           className="ml-auto p-2 rounded-xl text-surface-400 hover:text-accent-text-hover hover:bg-surface-800/60 transition-colors"
           aria-label={resolvedTheme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}

client/src/components/Layout/Sidebar.tsx

@@ -46,7 +46,7 @@ const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(function Sidebar({ onCl
   const { data: unraidStats } = useUnraidStats();
   const { data: queueItems } = useDeletionQueue();
   const { data: version } = useVersion();
-  const { resolvedTheme, toggleTheme, toggleRef } = useTheme();
+  const { resolvedTheme, toggleTheme } = useTheme();
   const queueCount = queueItems?.length ?? 0;
 
   // Calculate storage display values
@@ -219,7 +219,6 @@ const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(function Sidebar({ onCl
       <div className="px-6 py-3 border-t border-surface-800/50">
         <div className="flex items-center justify-center gap-3 mb-2">
           <button
-            ref={toggleRef}
             onClick={toggleTheme}
             className="p-2.5 rounded-lg text-surface-500 hover:text-accent-text-hover hover:bg-surface-800/60 transition-all"
             title={resolvedTheme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}

client/src/contexts/ThemeContext.tsx

@@ -48,9 +48,9 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
   const { ref, toggleSwitchTheme, isDarkMode } = useModeAnimation({
     isDarkMode: resolvedTheme === 'dark',
     animationType: ThemeAnimationType.BLUR_CIRCLE,
-    duration: 600,
-    blurAmount: 6,
-    easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    duration: 750,
+    blurAmount: 2,
+    easing: 'ease-in-out',
     globalClassName: 'dark',
     onDarkModeChange: (isDark: boolean) => {
       setThemeState(isDark ? 'dark' : 'light');