Remove pointer on active, add delay to content appearance

styles.css

@@ -41,7 +41,6 @@ html, body {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    cursor: pointer;
 }
 
 .card-wrapper {
@@ -93,10 +92,13 @@ html, body {
     transform: translateY(0) !important;
 }
 
+.active {
+    cursor: default !important;
+}
+
 .content-container {
     display: block;
     position: relative;
-    border: 1px solid #fff;
     max-width: 100%;
     height: calc(100dvh - (2 * var(--card-gap)));
     top: calc(-1 * (100dvh - (2 * var(--card-gap))) - var(--label-height));
@@ -105,10 +107,14 @@ html, body {
 .content-wrapper {
     display: block;
     opacity: 0;
-    transition: 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    transition: opacity 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    margin: 10px;
+    padding: 0;
 }
 
 .visible {
     display: block !important;
     opacity: 1 !important;
+    transition-delay: 0.5s !important;
+    transition: 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
 }