Enhanced flip animation for card draws

cards.css

@@ -7,34 +7,37 @@
     src:                        url(PirataOne-Gloomhaven.ttf);
 }
 
+@keyframes pull
+{
+    50%                         { top: -100%; bottom: 100%; }
+}
+
 .card-container
 {
     position:                   relative;
     text-align:                 center;
 
-    width:                      calc(437px + 2rem);
+    width:                      calc(437px + 1rem);
     max-width:                  100%;
-    max-height:                 100vh;
+    margin:                     1rem;
 }
 
 .card-container::before
 {
     content:                    "";
     visibility:                 hidden;
     display:                    inline-block;
-    padding-bottom:             calc(67.7% + 1rem);
+    padding-bottom:             calc(67.7%);
 }
 
 .card
 {
     position:                   absolute;
     top:                        0;
     left:                       0;
-    bottom:                     0;
-    right:                      0;
+    bottom:                     1rem;
+    right:                      1rem;
 
-    width:                      437px;
-    height:                     296px;
     max-width:                  calc(147.6vh);
     max-height:                 calc(100vh);
 
@@ -56,16 +59,30 @@
 
 .card.draw
 {
-    left:                       0.5rem;
-    top:                        0.5rem;
-}
+    top:                        0;
+    left:                       0;
+    bottom:                     1rem;
+    right:                      1rem;
 
-.card.
+    transition-property:        top, left, bottom, right, transform;
+    transition-timing-function: ease;
+    transition-duration:        0.4s, 0.4s, 0.4s;
+}
 
 .card.discard
 {
-    left:                       1.5rem;
-    top:                        1.5rem;
+    top:                        1rem;
+    left:                       1rem;
+    bottom:                     0;
+    right:                      0;
+
+    transition-property:        top,    bottom, left,   right,  transform,  z-index;
+    transition-timing-function: ease;
+    transition-duration:        0.4s,   0.4s,   0.5s,   0.5s,   0.4s,       0s;
+    transition-delay:           0.5s,   0.5s,   0s,     0s,     0.25s,      0.25s;
+
+    animation-name:             pull;
+    animation-duration:         0.5s;
 }
 
 .card.front
@@ -199,13 +216,6 @@ img[src="images/shuffle.svg"]
     background:                 rgba(0, 0, 0, 0);
 }
 
-.flip
-{
-    transition-property:        left, top, transform;
-    transition-duration:        0.4s;
-    transition-timing-function: ease;
-}
-
 .up
 {
     transform:                  rotateY(0deg);

logic.js

@@ -10,13 +10,9 @@ function UICard(front_element, back_element)
 
     card.flip_up = function(faceup)
     {
-        this.pop_up();
-
-        toggle_class(this.back, "flip", true);
         toggle_class(this.back, "up", !faceup);
         toggle_class(this.back, "down", faceup);
 
-        toggle_class(this.front, "flip", true);
         toggle_class(this.front, "up", faceup);
         toggle_class(this.front, "down", !faceup);
     };
@@ -35,11 +31,11 @@ function UICard(front_element, back_element)
         this.front.style.zIndex -= 1;
     };
 
-    card.pop_up = function()
+    card.set_depth = function(z)
     {
-        this.back.style.zIndex = 0;
-        this.front.style.zIndex = 0;
-    };
+        this.back.style.zIndex = z;
+        this.front.style.zIndex = z;
+    }
 
     card.attach = function(parent)
     {
@@ -205,7 +201,7 @@ function reshuffle(deck)
         var card = deck.draw_pile[i];
         card.ui.flip_up(false);
         card.ui.set_discarded(false);
-        card.ui.push_down();
+        card.ui.set_depth(0);
     }
 }
 
@@ -229,14 +225,21 @@ function draw_card(deck)
     }
     else
     {
+        var card = deck.draw_pile.shift(card);
+
         for (var i = 0; i < deck.discard.length; i++)
         {
             deck.discard[i].ui.push_down();
         }
+        for (var i = 0; i < deck.draw_pile.length; i++)
+        {
+            deck.draw_pile[i].ui.push_down();
+        }
 
-        var card = deck.draw_pile.shift(card);
         card.ui.flip_up(true);
         card.ui.set_discarded(true);
+        card.ui.set_depth(0);
+
         deck.discard.unshift(card);
     }
 }