header {
  align-items: center;
  display: flex;
  font-size: 28px;
  height: 100vh;
  justify-content: center;
  overflow: hidden;
  position: relative;
  text-align: center;
  transform-style: preserve-3d;
  perspective: 100px;
}

header:before {
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.8)),
              url(bg.jpg) no-repeat bottom;
  background-size: cover;
  content: "";
  position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  z-index: -1;
}

header:after {
    animation: rotate-up .5s .5s cubic-bezier(0, 0.5, 0, 1) forwards;
    background: #F9FCFF;
    content: "";
    height: 40rem;
    left: -5%;
    position: absolute;
      right: -5%;
      top: 90%;
    transform-origin: 0 0;
    z-index: 0;
  }

.header-title, .header-subtitle {
  color: #fff;
}

.header-subtitle {
  text-transform: uppercase;
  margin-bottom: 5rem;
}

.header-button {
  transform: translateZ(.1px);
  position: relative;
  z-index: 10;
  background-color: cornflowerblue;
  padding: 6px 0;
  border-radius: 5px;
  border: none;
}

.header-button > a {
    text-decoration: none;
    color: #F9FCFF;
}

.header-down-arrow {
    animation: pulse 2s 3s ease-out infinite;
    position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
    text-align: center;
    z-index: 10;
  }

.header-down-arrow img {
    animation: fade-slide-up 1s 1s ease-out forwards;
    opacity: 0;
  }  

.header-down-arrow img {
    animation: fade-slide-up 1s 1s ease-out forwards,
               pulse 2s 3s ease-out infinite;
    opacity: 0;
  }  

@keyframes pop-in {
    0% {
      opacity: 0;
      transform: translateY(-4rem) scale(.8);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }

@keyframes rotate-up {
    100% {
      transform: rotateZ(-4deg);
    }
  }
  
@keyframes fade-slide-up {
    0% {
      opacity: 0;
      transform: translateY(4rem);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  
@keyframes pulse {
    0% {
      opacity: 1;
      transform: none;
    }
    50% {
      opacity: .8;
      transform: scale(.8);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }  

.animate-pop-in {
    animation: pop-in .6s cubic-bezier(0, 0.9, 0.3, 1.2) forwards;
    opacity: 0;
  } 
  
.rocky-dashed {
    animation-delay: .6s;
  }
  
.header-title {
    animation-delay: .8s;
  }
  
.header-subtitle {
    animation-delay: 1.4s;
  }
  
.header-button {
    animation-delay: 1.6s;
  }