From b6bc55e5434df8d3244205a3b24cc46e50d84f2c Mon Sep 17 00:00:00 2001
From: Adam Iannazzone <46025473+jiannazzone@users.noreply.github.com>
Date: Wed, 16 Oct 2024 14:42:47 -0400
Subject: [PATCH] Adjustments to card stack animation

---
 css/carousel.css | 25 +++++++++++++++++++------
 index.html       |  2 --
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/css/carousel.css b/css/carousel.css
index e109505..d756c5f 100644
--- a/css/carousel.css
+++ b/css/carousel.css
@@ -2,6 +2,7 @@
   position: relative;
   display: flex;
   padding-right: 30px;
+  cursor: pointer;
 }
 
 #features .row:nth-child(odd) .stack {
@@ -10,13 +11,12 @@
 
 .screenshot {
   position: relative;
-  /* transition: bottom 400ms; */
+  transition: bottom 250ms;
 }
 
 .screenshot:nth-child(3) {
   z-index: 4;
   left: -200%;
-  cursor: pointer;
 }
 
 .screenshot:nth-child(2) {
@@ -53,6 +53,15 @@
   }
 } */
 
+@keyframes shift {
+  50% {
+    transform: translate(-5px, 5px);
+  }
+  to {
+    transform: translate(0, 0);
+  }
+}
+
 @keyframes fade-out {
   0% {
     /* z-index: 3; */
@@ -62,19 +71,23 @@
   100% {
     /* z-index: 0; */
     opacity: 0;
+    left: calc(-200% - 10px);
     bottom: -30px;
+    scale: 1.05;
   }
 }
 
 @keyframes fade-in {
   0% {
-    /* z-index: 3; */
-    bottom: 0;
-    opacity: 10px;
+    bottom: 30px;
+    left: 30px;
+    opacity: 0;
+    scale: 0.95;
   }
   100% {
-    /* z-index: 0; */
     opacity: 1;
+    left: 20px;
     bottom: 20px;
+    scale: 1.0;
   }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 79fdc42..dc402c7 100644
--- a/index.html
+++ b/index.html
@@ -234,14 +234,12 @@
         <div class="container-fluid mb-4" id="features">
             <div class="row align-items-center mt-3 mb-3">
                 <div class="col-12 col-lg-8 stack">
-                    <!-- <div class="stack"> -->
                     <img src="assets/screens/screen01.png" class="img-fluid screenshot"
                         alt="The RetroDECK and ES-DE logos on a black screen" />
                     <img src="assets/screens/screen02.png" class="img-fluid screenshot"
                         alt="The RetroDECK and ES-DE logos on a black screen" />
                     <img src="assets/screens/screen03.png" class="img-fluid screenshot"
                         alt="The RetroDECK and ES-DE logos on a black screen" />
-                    <!-- </div> -->
                 </div>
                 <div class="col-12 col-lg-4">
                     <div class="feature-card p-2 mt-2 mt-lg-0">