Fix Animation Consistency & UX

src/app/components/dropdown/dropdown.scss

@@ -56,7 +56,7 @@ $default_animation_duration: 0.2s;
   .chevron {
     width: 24px; height: 24px;
     flex-shrink: 0;
-    transition: transform var(--dropdown-duration) $animation_timing;
+    transition: transform var(--animation-duration) $animation_timing;
     user-select: none;
 
     &.open {
@@ -92,8 +92,16 @@ $default_animation_duration: 0.2s;
   }
 
   @keyframes slideIn {
-    from { opacity: 0; transform: translateY(-8px); }
+    from {
-    to { opacity: 1; transform: translateY(0); }
+      transform: translateY(-8px);
+      pointer-events: none;
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      pointer-events: auto;
+      opacity: 1;
+    }
   }
 }
 
@@ -105,6 +113,7 @@ $default_animation_duration: 0.2s;
   position: relative;
   align-content: center;
   transition: background-color var(--animation-duration) $animation_timing;
+  font-size: 16px;
 
   &:hover, &.focused {
     background-color: $hover_bg;

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;
   }
 }

src/app/components/switch/switch.scss

@@ -26,10 +26,6 @@ $default_animation_duration: 0.2s;
   --animation-duration: calc(#{$default_animation_duration} * var(--motion-duration-multiplier));
   transition: background-color var(--animation-duration) $animation_timing;
 
-  &.reduce-motion {
-    --animation-duration: 0s;
-  }
-
   &:hover, &:focus-within {
     .switch-knob {
       will-change: transform;