feat(image-zoom): add minimal image zoom functionality

assets/css/components/image-zoom.css

@@ -0,0 +1,84 @@
+.hextra-zoom-image-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--hextra-image-zoom-backdrop, rgba(0, 0, 0, 0.9));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  opacity: 0;
+  transition: opacity 260ms cubic-bezier(0.2, 0, 0, 1);
+  cursor: zoom-out;
+  overscroll-behavior: contain;
+  touch-action: none;
+  backdrop-filter: blur(var(--hextra-image-zoom-blur, 4px));
+  -webkit-backdrop-filter: blur(var(--hextra-image-zoom-blur, 4px));
+  /* Prevent iOS bounce */
+  position: fixed;
+  overflow: hidden;
+  will-change: transform;
+}
+
+.hextra-zoom-image-overlay.show {
+  opacity: 1;
+}
+
+.hextra-zoom-image-overlay.closing {
+  opacity: 0;
+  transition: opacity 360ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+.hextra-zoom-image {
+  border-radius: 8px;
+  box-shadow: 0 18px 80px rgba(0, 0, 0, 0.5);
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: high-quality;
+  will-change: transform;
+  /* Prevent image selection on mobile */
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+  /* Hardware acceleration */
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+}
+
+.hextra-zoom-image-overlay.show .hextra-zoom-image {
+  transition:
+    transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    left 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    top 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.hextra-zoom-image-overlay.closing .hextra-zoom-image {
+  transition:
+    transform 340ms cubic-bezier(0.3, 0, 0.2, 1),
+    left 340ms cubic-bezier(0.3, 0, 0.2, 1),
+    top 340ms cubic-bezier(0.3, 0, 0.2, 1);
+}
+
+/* Disable transitions during interaction */
+.hextra-zoom-image-overlay.interacting .hextra-zoom-image {
+  transition: none !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hextra-zoom-image-overlay,
+  .hextra-zoom-image {
+    transition: none !important;
+  }
+}
+
+.content img:not([data-no-zoom]):not(.not-prose img) {
+  cursor: zoom-in;
+}
+
+/* Loading indicator */
+.hextra-zoom-image.loading {
+  opacity: 0;
+}
+
+.hextra-zoom-image.loaded {
+  opacity: 1;
+  transition: opacity 200ms ease-in-out;
+}