fix: move lightbox to baseof as persistent component, fix HTMX history conflicts

- Lightbox lives outside #main-content so HTMX never destroys it
- Gallery dispatches window events to open/close lightbox
- Add hx-history-elt to #main-content so only that element is snapshotted
- Remove view-transition-name to avoid duplicate conflict on history restore
- Close lightbox on navigation via lightbox:close event

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

assets/js/main.js

@@ -44,6 +44,11 @@ function initLazyVideos(root) {
 
 initLazyVideos();
 
+// ── Close lightbox on navigation ──────────────────────────────────
+document.body.addEventListener("htmx:beforeSwap", () => {
+  window.dispatchEvent(new CustomEvent("lightbox:close"));
+});
+
 // ── After HTMX partial swap ────────────────────────────────────────
 document.body.addEventListener("htmx:afterSwap", (e) => {
   initLazyVideos(e.target);
@@ -53,10 +58,10 @@ document.body.addEventListener("htmx:afterSwap", (e) => {
 
 // ── After HTMX history restore (back / forward navigation) ────────
 document.body.addEventListener("htmx:historyRestore", () => {
-  // Sync nav active state to the restored URL
+  window.dispatchEvent(new CustomEvent("lightbox:close"));
+
   if (window.Alpine) Alpine.store("nav").path = window.location.pathname;
 
-  // Complete the progress bar (htmx:afterSettle never fires on history restore)
   const bar = document.getElementById("progress-bar");
   if (bar) {
     bar.style.width = "100%";
@@ -69,11 +74,11 @@ document.body.addEventListener("htmx:historyRestore", () => {
   const main = document.getElementById("main-content");
   if (!main) return;
   if (window.Alpine) Alpine.initTree(main);
-  // Reload and replay autoplay videos (autoplay attr is ignored on restore)
   main.querySelectorAll("video[autoplay]").forEach((v) => {
     v.load();
     v.play().catch(() => {});
   });
   window.scrollTo({ top: 0, behavior: "instant" });
+  window.dispatchEvent(new Event("scroll"));
 });