feat: improve lightbox ux and accessibility

components/Lightbox.module.css

@@ -53,13 +53,14 @@
   border-radius: var(--radius-sm);
   user-select: none;
   -webkit-user-drag: none;
-  opacity: 1;
-  /* Default to visible for robustness */
-  transition: opacity var(--transition-normal);
+  opacity: 0;
+  transform: scale(0.96);
+  transition: opacity var(--transition-normal), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .imageLoaded {
   opacity: 1;
+  transform: scale(1);
 }
 
 .close {
@@ -231,13 +232,15 @@
 
 /* ── Studio-Inspired Lightbox Defaults ───────────── */
 .overlay {
-  background: rgba(0, 0, 0, 0.98);
+  background: rgba(0, 0, 0, 0.85);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
 }
 
 .close,
 .nav,
 .counter {
-  opacity: 0;
+  opacity: 0.5;
   transition: opacity 400ms ease;
 }
 
@@ -247,6 +250,15 @@
   opacity: 1;
 }
 
+@media (hover: none) {
+
+  .close,
+  .nav,
+  .counter {
+    opacity: 1;
+  }
+}
+
 .imageContainer {
   border-radius: 0;
 }