feat: add lightbox backdrop CSS and export ImageLightbox

src/shared/styles/theme.css

@@ -154,6 +154,7 @@
 
   html {
     font-size: var(--font-size);
+    scroll-behavior: smooth;
   }
 
   body {
@@ -417,8 +418,25 @@
 /* Keep footer above sliding section-body during view transitions */
 .footer-vt {
   view-transition-name: site-footer;
+  animation: footer-enter var(--duration-slow) var(--ease-spring) both;
+}
+
+@keyframes footer-enter {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 ::view-transition-group(site-footer) {
   z-index: 10;
 }
+
+/* Lightbox dialog backdrop */
+dialog.lightbox::backdrop {
+  background-color: rgba(4, 28, 243, 0.25);
+}

src/shared/ui/index.ts

@@ -4,7 +4,7 @@ export type { ButtonSize, ButtonVariant } from './Button';
 export { Button } from './Button';
 export type { CardBackground } from './Card';
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardSidebar, CardTitle } from './Card';
-
+export { ImageLightbox } from './ImageLightbox';
 export { InlineSvg } from './InlineSvg';
 export { Input, Textarea } from './Input';
 export type { LinkVariant } from './Link';