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) {
+ // 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.
+
)}
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 {