feat: visual polish & UX — fade-in, theme toggle, scroll-to-top, footer, cursor, badge

- Add FadeIn component (IntersectionObserver scroll-reveal + load animation)
- Add dark/light theme toggle (useSyncExternalStore + localStorage)
- Add scroll-to-top button (appears after 300px scroll)
- Add configurable footer with social links (gallery.yaml)
- Add crosshair cursor on photo grid items
- Add 'X photos' count badge on subpage cover images
- Add light theme color palette in tokens.css

app/layout.tsx

@@ -7,6 +7,9 @@ import type { Metadata } from 'next';
 import Link from 'next/link';
 import './globals.css';
 import { SubpageNav } from '@/components/SubpageNav';
+import { ThemeToggle } from '@/components/ThemeToggle';
+import { ScrollToTop } from '@/components/ScrollToTop';
+import { Footer } from '@/components/Footer';
 
 const siteTitle = process.env.SITE_TITLE || 'Gallery';
 const siteDescription = 'A curated photography portfolio';
@@ -28,13 +31,9 @@ export const metadata: Metadata = {
   },
 };
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body>
         <header className="header">
           <nav className="header__nav">
@@ -45,9 +44,12 @@ export default function RootLayout({
             <Link href="/about" className="header__nav-link">
               About
             </Link>
+            <ThemeToggle />
           </nav>
         </header>
         <main className="main">{children}</main>
+        <Footer />
+        <ScrollToTop />
       </body>
     </html>
   );