feat(home): htmx lazy-load cover images

Replace the eager <img> on the home page with an htmx placeholder <figure>
that fetches a /cover-fragment endpoint when it scrolls into view
(hx-trigger="revealed"), so heavy cover bytes load only on demand.
Add spinner + settle-fade transition CSS, and load htmx.min.js on home.

app/public/assets/css/public.css

@@ -78,7 +78,15 @@
   height: 100%;
   object-fit: cover;
   display: block;
-  transition: transform 0.3s ease;
+  transition: transform 0.3s ease, opacity 300ms ease-in;
+}
+
+/* Cover thumbnails are served as a <picture> (WebP + fallback); keep the
+   wrapper block-level so the <img> fills the 4:3 figure. */
+.home-body figure picture {
+  display: block;
+  width: 100%;
+  height: 100%;
 }
 
 .card:hover figure img,
@@ -97,6 +105,26 @@
   font-size: var(--step-3);
 }
 
+/* HTMX lazy-loaded cover: spinner + settle fade-in (mirrors htmx
+   docs' `htmx-settling img` transition pattern). */
+.card__cover-loading {
+  animation: card-cover-pulse 1.1s ease-in-out infinite;
+}
+
+@keyframes card-cover-pulse {
+  0%,
+  100% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+.home-body figure.htmx-settling img {
+  opacity: 0;
+}
+
 .card__media--gradient {
   width: 100%;
   aspect-ratio: 4 / 3;