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

components/FadeIn.tsx

@@ -0,0 +1,63 @@
+/**
+ * FadeIn — scroll-reveal wrapper using IntersectionObserver.
+ *
+ * Wraps children in a div that fades/slides in when it enters the viewport.
+ * Supports an optional stagger delay for grid items.
+ * On the homepage (no scroll), acts as a simple load-in animation.
+ */
+
+'use client';
+
+import { useRef, useEffect, useCallback } from 'react';
+
+interface FadeInProps {
+  children: React.ReactNode;
+  /** Stagger delay in ms (e.g. index * 60) */
+  delay?: number;
+  /** Slide direction */
+  direction?: 'up' | 'none';
+  /** CSS class name for the wrapper */
+  className?: string;
+}
+
+export function FadeIn({ children, delay = 0, direction = 'up', className }: FadeInProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const reveal = useCallback(() => {
+    ref.current?.classList.add('fade-in--visible');
+  }, []);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    // Respect reduced-motion preference — reveal immediately
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      el.classList.add('fade-in--visible');
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          reveal();
+          observer.unobserve(el);
+        }
+      },
+      { threshold: 0.1 },
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [reveal]);
+
+  return (
+    <div
+      ref={ref}
+      className={`fade-in ${direction === 'up' ? 'fade-in--up' : ''} ${className ?? ''}`}
+      style={{ transitionDelay: `${delay}ms` }}
+    >
+      {children}
+    </div>
+  );
+}