web/src/components/EmailCardStack.test.ts

@@ -9,6 +9,7 @@ vi.mock('../composables/useCardAnimation', () => ({
     snapBack:        vi.fn(),
     animateDismiss:  vi.fn(),
     updateAura:      vi.fn(),
+    reset:           vi.fn(),
   })),
 }))
 

web/src/components/EmailCardStack.vue

@@ -54,12 +54,18 @@ const motion     = useMotion()
 const cardEl     = ref<HTMLElement | null>(null)
 const isExpanded = ref(false)
 
-const { pickup, setDragPosition, snapBack, animateDismiss, updateAura } = useCardAnimation(cardEl, motion)
+const { pickup, setDragPosition, snapBack, animateDismiss, updateAura, reset } = useCardAnimation(cardEl, motion)
 
 watch(() => props.dismissType, (type) => {
   if (type) animateDismiss(type)
 })
 
+// When a new card loads into the same element, clear any inline styles left by the previous animation
+watch(() => props.item.id, () => {
+  reset()
+  isExpanded.value = false
+})
+
 // Toss gesture state
 const isHeld            = ref(false)
 const pickupX           = ref(0)

web/src/composables/useCardAnimation.ts

@@ -80,5 +80,20 @@ export function useCardAnimation(
     utils.set(cardEl.value, { background: color })
   }
 
-  return { pickup, setDragPosition, snapBack, animateDismiss, updateAura }
+  function reset() {
+    if (!cardEl.value) return
+    // Instantly restore initial card state — called when a new item loads into the same element
+    utils.set(cardEl.value, {
+      x:            0,
+      y:            0,
+      scale:        1,
+      opacity:      1,
+      rotate:       0,
+      borderRadius: CARD_RADIUS,
+      background:   'transparent',
+      filter:       'none',
+    })
+  }
+
+  return { pickup, setDragPosition, snapBack, animateDismiss, updateAura, reset }
 }