feat(image-modal): enhance gesture handling and improve pinch zoom functionality

src/app/shared/components/image-modal/image-modal.component.scss

@@ -14,13 +14,14 @@
   overflow: hidden;
   background: black;
   transform-origin: center top;
-  will-change: transform, opacity;
 }
 
 .image-modal--settling {
-  transition:
-    transform 180ms ease-out,
-    opacity 180ms ease-out;
+  transition: transform 180ms ease-out;
+}
+
+.image-modal--gesturing {
+  will-change: transform;
 }
 
 .image-modal__viewport {
@@ -51,10 +52,14 @@
   object-fit: contain;
   transform-origin: center;
   transition: transform 120ms ease-out;
-  will-change: transform;
   -webkit-user-drag: none;
 }
 
+.image-modal--gesturing .image-modal__image {
+  transition: none;
+  will-change: transform;
+}
+
 .image-modal__viewport:active .image-modal__image {
   transition: none;
 }
@@ -122,6 +127,15 @@
 @media (max-width: 576px) {
   .image-modal__controls {
     bottom: max(1rem, env(safe-area-inset-bottom));
+    background: rgba(20, 20, 20, 0.94);
+    backdrop-filter: none;
+  }
+}
+
+@media (pointer: coarse) {
+  .image-modal__controls {
+    background: rgba(20, 20, 20, 0.94);
+    backdrop-filter: none;
   }
 }