Fix Animation Consistency & UX

src/app/components/popup/popup.scss

@@ -1,5 +1,9 @@
+$animation_timing: cubic-bezier(0.16, 1, 0.3, 1);
+$default_animation_duration: 0.2s;
+
 :host {
   display: block;
+  --animation-duration: calc(#{$default_animation_duration} * var(--motion-duration-multiplier));
 }
 
 .popup-backdrop {
@@ -24,7 +28,7 @@
   display: flex;
   flex-direction: column;
   overflow: visible;
-  animation: popup-enter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  animation: popup-enter var(--animation-duration) $animation_timing;
 
   outline: oklch(0 0 0 / 20%) 2px solid;
   gap: 16px;
@@ -46,11 +50,13 @@
 
 @keyframes popup-enter {
   from {
-    transform: scale(0.95) translateY(10px);
+    transform: scale(0.95) translateY(8px);
+    pointer-events: none;
     opacity: 0;
   }
   to {
     transform: scale(1) translateY(0);
+    pointer-events: auto;
     opacity: 1;
   }
 }