Add subtle intro animation to elements and fix z-index stacking issues

assets/_scss/_animations.scss

@@ -0,0 +1,14 @@
+/* ==========================================================================
+   ANIMATIONS
+   ========================================================================== */
+
+@keyframes intro {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, -25px, 0)
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0)
+  }
+}

assets/_scss/_footer.scss

@@ -8,6 +8,8 @@
   margin-top: 3em;
   padding: 0 2em 3em;
   color: mix(#fff, $gray, 25%);
+  animation: intro 0.3s both;
+  animation-delay: 0.45s;
 
   @include breakpoint($large) {
     padding-left: 1em;

assets/_scss/_masthead.scss

@@ -3,7 +3,11 @@
    ========================================================================== */
 
 .masthead {
+  position: relative;
   border-bottom: 1px solid $border-color;
+  animation: intro 0.3s both;
+  animation-delay: 0.15s;
+  z-index: 20;
 
   &__inner-wrap {
     @include container;

assets/_scss/_navigation.scss

@@ -9,11 +9,14 @@
 .breadcrumbs {
   @include container;
   @include clearfix;
+  position: relative;
   margin-top: 0;
   margin-bottom: 0;
   padding-left: 2em;
   padding-right: 2em;
   font-family: $sans-serif;
+  animation: intro 0.3s both;
+  animation-delay: 0.30s;
 
   @include breakpoint($large) {
     padding-left: 1em;

assets/_scss/_page.scss

@@ -9,7 +9,8 @@
   margin-top: 2em;
   padding-left: 2em;
   padding-right: 2em;
-  z-index: 0;
+  animation: intro 0.3s both;
+  animation-delay: 0.35s;
 
   @include breakpoint($large) {
     padding-left: 1em;
@@ -45,6 +46,7 @@
 .page__title {
   margin-top: 0;
   line-height: 1;
+
   & + .page__meta {
     margin-top: -0.5em;
   }
@@ -112,6 +114,8 @@
   position: relative;
   margin-bottom: 2em;
   @include clearfix;
+  animation: intro 0.3s both;
+  animation-delay: 0.25s;
 
   &--overlay {
     position: relative;
@@ -122,6 +126,8 @@
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
+    animation: intro 0.3s both;
+    animation-delay: 0.25s;
 
     .wrapper {
       padding-left: 2em;
@@ -143,10 +149,6 @@
         font-size: $type-size-1;
       }
     }
-
-    .page__lead {
-      font-weight: bold;
-    }
   }
 }
 

assets/_scss/main.scss

@@ -16,6 +16,7 @@
 @import "base";
 
 @import "utilities";
+@import "animations";
 @import "tables";
 @import "buttons";
 @import "notices";