feat: improve lightbox ux and accessibility

components/DevToolbar.tsx

@@ -196,14 +196,14 @@ exifOnHover: ${exifOnHover}`;
 
   return (
     <>
-      {/* ── Floating Toggle Button — bottom-right ── */}
+      {/* ── Floating Toggle Button — bottom-left ── */}
       <button
         onClick={() => setOpen(!open)}
         aria-label="Dev Toolbar"
         style={{
           position: 'fixed',
           bottom: 20,
-          right: 20,
+          left: 20,
           zIndex: 99999,
           width: 44,
           height: 44,
@@ -224,13 +224,13 @@ exifOnHover: ${exifOnHover}`;
         {open ? '✕' : '🎨'}
       </button>
 
-      {/* ── Panel — anchored bottom-right ────────── */}
+      {/* ── Panel — anchored bottom-left ────────── */}
       {open && (
         <div
           style={{
             position: 'fixed',
             bottom: 76,
-            right: 20,
+            left: 20,
             zIndex: 99998,
             width: 300,
             background: 'rgba(18,18,22,0.97)',

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;
 }