feat: add sliding tab indicator and content crossfade animations

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/sites/[id]/SiteLayoutShell.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import { usePathname } from 'next/navigation'
+import { AnimatePresence, motion } from 'framer-motion'
 import SiteNav from '@/components/dashboard/SiteNav'
 
 export default function SiteLayoutShell({
@@ -9,12 +11,24 @@ export default function SiteLayoutShell({
   siteId: string
   children: React.ReactNode
 }) {
+  const pathname = usePathname()
+
   return (
     <>
       <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pt-8">
         <SiteNav siteId={siteId} />
       </div>
-      {children}
+      <AnimatePresence mode="wait">
+        <motion.div
+          key={pathname}
+          initial={{ opacity: 0, y: 6 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -6 }}
+          transition={{ duration: 0.15, ease: 'easeInOut' }}
+        >
+          {children}
+        </motion.div>
+      </AnimatePresence>
     </>
   )
 }