From f7a00f6c4888335b3d289917003563ec07f6f516 Mon Sep 17 00:00:00 2001
From: Greyson Parrelli <greyson@signal.org>
Date: Thu, 23 Jul 2026 07:54:19 -0400
Subject: [PATCH] Fly faint-summoned apples and bees out from the pet.

---
 web/src/components/BattlePhase.tsx |  5 ++-
 web/src/styles.css                 | 49 ++++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/web/src/components/BattlePhase.tsx b/web/src/components/BattlePhase.tsx
index 094ec2a..1fcfb82 100644
--- a/web/src/components/BattlePhase.tsx
+++ b/web/src/components/BattlePhase.tsx
@@ -249,7 +249,10 @@ export function BattlePhase({ view, send }: Props) {
           <div className="card-slot-empty stack-empty" />
         )}
         {summoning && lastEvent?.card && (
-          <div className="summon-pop">
+          // Fly the spawned apple/bee out from where the pet stood (the unit
+          // zone sits on the inner edge) onto the top of the deck, so it reads
+          // as coming from the pet that just fainted.
+          <div className={`summon-pop ${dir === 'left' ? 'summon-from-right' : 'summon-from-left'}`}>
             <CardView card={lastEvent.card} size="sm" />
           </div>
         )}
diff --git a/web/src/styles.css b/web/src/styles.css
index 8320651..650907f 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -863,6 +863,55 @@ h3 {
   pointer-events: none;
 }
 
+/* Spawn arcs out from the pet (inner edge) onto the deck. The pet sits to the
+   right of the deck on the left side and to the left on the right side, so
+   each side pulls its spawn in from the opposite direction. */
+@keyframes summon-from-right {
+  0% {
+    opacity: 0;
+    transform: translate(120px, 8px) scale(0.5) rotate(10deg);
+  }
+  25% {
+    opacity: 1;
+    transform: translate(64px, -22px) scale(1.05) rotate(5deg);
+  }
+  70% {
+    opacity: 1;
+    transform: translate(0, -12px) scale(1) rotate(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(0, 2px) scale(0.72);
+  }
+}
+
+@keyframes summon-from-left {
+  0% {
+    opacity: 0;
+    transform: translate(-120px, 8px) scale(0.5) rotate(-10deg);
+  }
+  25% {
+    opacity: 1;
+    transform: translate(-64px, -22px) scale(1.05) rotate(-5deg);
+  }
+  70% {
+    opacity: 1;
+    transform: translate(0, -12px) scale(1) rotate(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(0, 2px) scale(0.72);
+  }
+}
+
+.summon-pop.summon-from-right {
+  animation-name: summon-from-right;
+}
+
+.summon-pop.summon-from-left {
+  animation-name: summon-from-left;
+}
+
 /* --- foods waiting for a pet --- */
 
 .pending-foods {