header animate all the things

_src/_assets/styles/_page-usecases.scss

@@ -167,6 +167,14 @@
 }
 
 .header--usecase {
+    hgroup {
+        margin-top: ($spacer * 5);
+    }
+
+    .header__title {
+        padding-top: 0;
+    }
+
     .header__logo {
         width: 140px;
         max-height: 100px;
@@ -178,6 +186,7 @@
     }
 
     .header__label {
+        text-align: center;
         display: block;
         color: $brand-main-blue-light;
         font-size: $font-size-lg;

_src/_assets/styles/bigchain/_header.scss

@@ -2,6 +2,34 @@
     @extend .background--photo;
 }
 
+// intro animation
+.header__title,
+.header__description,
+.header__logo,
+.header__label {
+    .wf-active &,
+    .wf-inactive & {
+        @extend .animation-slide-in-from-bottom;
+        animation-fill-mode: backwards;
+    }
+}
+
+.header__description,
+.header__logo {
+    .wf-active &,
+    .wf-inactive & {
+        animation-delay: .3s;
+    }
+}
+
+.header__btn,
+.header__label {
+    .wf-active &,
+    .wf-inactive & {
+        animation-delay: .5s;
+    }
+}
+
 .header__title {
     position: relative;
     z-index: 1;

_src/_assets/styles/bigchain/_hero.scss

@@ -71,7 +71,6 @@ $menu-height-md: 66px;
         .wf-active &,
         .wf-inactive & {
             @extend .animation-slide-in-from-bottom;
-            animation-duration: 1s;
             animation-fill-mode: backwards;
         }
     }

_src/_assets/styles/bigchain/_menus.scss

@@ -42,7 +42,7 @@
         transition: transform .2s ease-out;
 
         @media ($screen-md) {
-            bottom: $spacer * 1.5;
+            bottom: $spacer * 1.3;
         }
     }
 

_src/_layouts/usecase.html

@@ -12,7 +12,7 @@ cta:
     {% include menu-main.html %}
 
     <div class="row">
-        <h1 class="header__title">
+        <hgroup>
             <span class="header__label">{{ page.industry }}</span>
             {% if page.bitmaplogo %}
                 <img class="header__logo" src="/assets/img/{{ page.bitmaplogo }}" />
@@ -22,8 +22,8 @@ cta:
                 </svg>
             {% endif %}
 
-            {{ page.title }}
+            <h1 class="header__title">{{ page.title }}</h1>
-        </h1>
+        </hgroup>
     </div>
 </header>