Hugo pre-computes a JSON array of {img, video} entries per gallery item
(WebP 1200w src + optional mp4 src). Alpine reads the array and manages
lightbox state (open/idx/prev/next/close).
Features:
- Click any card → opens fullscreen dark overlay (bg-void/95 + backdrop-blur)
- Videos: controls, autoplay, x-effect reloads src on navigate
- Images: full-res WebP centred with object-contain
- Keyboard: Escape closes, ←/→ navigate
- Dot indicators: active dot expands (heat colour)
- Prev/next arrow buttons (hidden when only 1 item)
- Grid cards: cursor-zoom-in, pointer-events-none on media so click
always hits the <figure>
- Teleported to <body> via x-teleport to avoid stacking context issues
- Gradient-line accent top and bottom of overlay
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
valknar
1998820dec