src/shared/styles/theme.css

@@ -514,14 +514,20 @@
   }
 }
 
-/* Page-load entry animation for the footer. Previously also carried
+/* Page-load entry animation for the footer. */
- * `view-transition-name: site-footer` to layer above section-body's slide
- * group, but the section-body group now has `animation: none` (purely
- * horizontal slide of OLD/NEW snapshots), so the footer can live in the root
- * snapshot during transitions — which also lets the lightbox dialog group
- * stack cleanly above it. */
 .footer-vt {
   animation: footer-enter var(--duration-slow) var(--ease-spring) both;
+  /* Own view-transition group so the footer is snapshotted separately instead
+   * of folding into the root group. Without it, every `section-body` transition
+   * paints the section (a named group) above the root — and thus above the
+   * footer — until the transition ends, flashing the cards over the footer. */
+  view-transition-name: site-footer;
+}
+
+/* Keep the footer group above section-body during transitions, below the
+ * lightbox groups (z=20/30) so the lightbox still opens over it. */
+::view-transition-group(site-footer) {
+  z-index: 10;
 }
 
 @keyframes footer-enter {