Consolidated css animations

src/layouts/index.html

@@ -56,7 +56,7 @@
       </div>
     </div>
   </div>
-  <div class="full-width-cta-container animated animatedFadeInUp fadeInUp">
+  <div class="full-width-cta-container">
    {{- partial "full-width-cta.html" . -}}
   </div>
   <div class="hero-bottom">

src/layouts/partials/head.html

@@ -55,7 +55,7 @@
     <link rel="stylesheet" href="/css/footer.css">
     <link rel="stylesheet" href="/css/package-grid.css">
     <link rel="stylesheet" href="/css/buttons.css">
-    <link rel="stylesheet" href="/css/text-flicker.css">
+    <link rel="stylesheet" href="/css/animations.css">
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"

src/static/css/animations.css

@@ -0,0 +1,92 @@
+/* Fade in and up animations - declared with the following classes: */
+
+@keyframes fadeInUp {
+    from {
+        transform: translate3d(0,40px,0)
+    }
+
+    to {
+        transform: translate3d(0,0,0);
+        opacity: 1
+    }
+}
+
+@-webkit-keyframes fadeInUp {
+    from {
+        transform: translate3d(0,40px,0)
+    }
+
+    to {
+        transform: translate3d(0,0,0);
+        opacity: 1
+    }
+}
+
+.animated {
+    animation-duration: 1s;
+    animation-delay: .5s;
+    animation-fill-mode: both;
+    -webkit-animation-duration: 1s;
+    -webkit-animation-fill-mode: both
+}
+
+.animatedFadeInUp {
+    opacity: 0
+}
+
+.fadeInUp {
+    opacity: 0;
+    animation-name: fadeInUp;
+    -webkit-animation-name: fadeInUp;
+}
+
+/* Text Flicker Animation */
+
+
+h1{
+  animation: text-flicker 3s linear;
+  transition: 0.2s ease-out;
+}
+
+@keyframes text-flicker {
+  0% {
+    opacity:.1;
+  }
+
+  2% {
+    opacity:1;
+  }
+  8% {
+    opacity:0.1;
+  }
+  9% {
+    opacity:1;
+  }
+  12% {
+    opacity:0.1;
+  }
+  20% {
+    opacity:1;
+  }
+  25% {
+    opacity:0.3;
+  }
+  30% {
+    opacity:1;
+  }
+
+  70% {
+    opacity:0.7;
+  }
+
+  72% {
+    opacity:0.2;
+  }
+
+  77% {
+    opacity:.9;
+  }
+  100% {
+    opacity:.9;
+  }
+}

src/static/css/generative-art.css

@@ -1,46 +1,3 @@
-/* Animations */
-
-@keyframes fadeInUp {
-    from {
-        transform: translate3d(0,40px,0)
-    }
-
-    to {
-        transform: translate3d(0,0,0);
-        opacity: 1
-    }
-}
-
-@-webkit-keyframes fadeInUp {
-    from {
-        transform: translate3d(0,40px,0)
-    }
-
-    to {
-        transform: translate3d(0,0,0);
-        opacity: 1
-    }
-}
-
-.animated {
-    animation-duration: 1s;
-    animation-delay: .5s;
-    animation-fill-mode: both;
-    -webkit-animation-duration: 1s;
-    -webkit-animation-fill-mode: both
-}
-
-.animatedFadeInUp {
-    opacity: 0
-}
-
-.fadeInUp {
-    opacity: 0;
-    animation-name: fadeInUp;
-    -webkit-animation-name: fadeInUp;
-}
-
-
 @media only screen and (min-width: 1200px) {
 
   #gen-art-1{