feat(2d-nds): animation to and from gallery

app/components/NDS2D.vue

@@ -55,6 +55,17 @@ const ndsScale = computed(() => {
   return Math.min(scaleX, scaleY);
 });
 
+const gallery = useGalleryStore();
+const TOP_SCREEN_OFFSET = 170;
+
+const zoomStyle = computed(() => {
+  const scale = ndsScale.value * gallery.zoom.scale;
+  if (scale === 1) return { scale: ndsScale.value };
+
+  const y = TOP_SCREEN_OFFSET * ndsScale.value * (gallery.zoom.scale - 1);
+  return { transform: `translateY(${y}px) scale(${scale})` };
+});
+
 watch(
   () => app.hintsVisible,
   async (show) => {
@@ -75,13 +86,11 @@ watch(
     }
   },
 );
-
-defineExpose({ ndsScale });
 </script>
 
 <template>
   <div class="nds2d-container">
-    <div class="nds2d" :style="{ scale: ndsScale }">
+    <div class="nds2d" :style="zoomStyle">
       <div class="nds2d-top-screen">
         <div class="nds2d-speaker-hole nds2d-sh1"></div>
         <div class="nds2d-speaker-hole nds2d-sh2"></div>
@@ -204,6 +213,7 @@ defineExpose({ ndsScale });
   align-items: center;
   text-align: center;
   background: #181818;
+  overflow: hidden;
 }
 
 .nds2d {