feat: photography features & image optimizations

- Hero carousel: gallery.yaml hero accepts single UUID or array, crossfade component
- Full-bleed single albums: subpages with 1 album skip grid, render photos directly
- EXIF on hover: camera/lens/focal length overlay on grid items (toggle via exifOnHover)
- Customizable grid: columns/gap/aspectRatio/layout (masonry|uniform) via gallery.yaml
- Per-subpage grid overrides: each subpage can override global grid config
- True masonry: per-image aspect ratios from EXIF dimensions
- next/image migration: homepage hero, album covers, grid thumbnails, about portrait
- ThumbHash blur placeholders and dominant color backgrounds
- Custom next/image loader via image proxy with width/quality params
- Lightbox fade-in transition with dominant color background
- Password-protected subpages, health check, rate limiting, OG images

components/HeroCarousel.tsx

@@ -0,0 +1,77 @@
+/**
+ * HeroCarousel — crossfade between hero images on a timer.
+ *
+ * If only one image is provided, renders a static image with no timer.
+ * When multiple images are provided, crossfades between them every 6 seconds.
+ */
+
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import Image from 'next/image';
+
+interface HeroImage {
+    src: string;
+    blurDataURL?: string;
+}
+
+interface HeroCarouselProps {
+    images: HeroImage[];
+}
+
+const INTERVAL_MS = 6000;
+
+export function HeroCarousel({ images }: HeroCarouselProps) {
+    const [currentIndex, setCurrentIndex] = useState(0);
+
+    const advance = useCallback(() => {
+        setCurrentIndex((prev) => (prev + 1) % images.length);
+    }, [images.length]);
+
+    useEffect(() => {
+        if (images.length <= 1) return;
+
+        const timer = setInterval(advance, INTERVAL_MS);
+        return () => clearInterval(timer);
+    }, [images.length, advance]);
+
+    if (images.length === 0) {
+        return <div className="hero__image-placeholder" />;
+    }
+
+    if (images.length === 1) {
+        const img = images[0];
+        return (
+            <Image
+                src={img.src}
+                alt=""
+                className="hero__image"
+                fill
+                sizes="50vw"
+                priority
+                {...(img.blurDataURL
+                    ? { placeholder: 'blur' as const, blurDataURL: img.blurDataURL }
+                    : {})}
+            />
+        );
+    }
+
+    return (
+        <>
+            {images.map((img, i) => (
+                <Image
+                    key={i}
+                    src={img.src}
+                    alt=""
+                    className={`hero__carousel-image${i === currentIndex ? ' hero__carousel-image--active' : ''}`}
+                    fill
+                    sizes="50vw"
+                    priority={i === 0}
+                    {...(img.blurDataURL
+                        ? { placeholder: 'blur' as const, blurDataURL: img.blurDataURL }
+                        : {})}
+                />
+            ))}
+        </>
+    );
+}