#top-bar
  #small-logo G/K
#intro
  #name.larger
    span(data-delay="1100") G
    span(data-delay="500") R
    span(data-delay="800") E
    span(data-delay="0").darker.visible G
    span(data-delay="0").darker.visible /
    span(data-delay="0").darker.visible K
    span(data-delay="1000") O
    span(data-delay="700") H
    span(data-delay="1300") N
  .section-arrow
    .block
    .triangle.left
    .triangle.right
    .block
        
section

@import bourbon

*, *:after, *:before
  box-sizing: border-box

$steel: #717c80
$steel-dark: #383f42

body
  margin: 0
  
#top-bar
  background-color: $steel-dark
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 60px
  z-index: 999
  
#small-logo
  font:
    family: "Montserrat", sans-serif
    weight: 400
    size: 16px
  letter-spacing: 1em
  color: white
  line-height: 60px
  margin-left: 20px
  
#intro
  position: relative
  z-index: 1
  margin-top: 60px
  height: 500px
  background-color: #F0F0F0
  padding: 10px 0
  background-image: url(https://unsplash.imgix.net/photo-1418065460487-3e41a6c84dc5?q=75&fm=jpg&s=127f3a3ccf4356b7f79594e05f6c840e)
  background-size: cover
  background-attachment: fixed

#name
  margin: 50px 0
  text-align: center
  color: lighten($steel, 10%)
  letter-spacing: 1em
  +transition(all 1000ms)
  +transition-delay(300ms)
  +transform(scale(0.7))
  @media (max-width: 420px)
    +transform(scale(0.8))
  &.larger
    +transform(scale(1))
  font:
    family: "Montserrat", sans-serif
    weight: 400
    size: 28px
  text-shadow: 0 0 10px $steel    
  @media (max-width: 420px)
    font-size: 20px
  span
    opacity: 0
    +transition(all 500ms)
    &.visible
      opacity: 1
      text-shadow: none
    &.darker
      color: $steel-dark
      font-weight: 700
      text-shadow: none

$arrow-height: 40px
$arrow-width: 40px
      
.section-arrow
  position: absolute
  bottom: 0
  +size(100% $arrow-height)
  margin-top: 100px
  > div
    float: left
    height: 100%

.block
  width: 40%
  width: calc(50% - #{$arrow-width})
  background-color: white

.triangle
  width: 10%
  width: calc(#{$arrow-width})
  position: relative
  &:after
    content: ''
    width: 0
    height: 0
    border-style: solid
    position: absolute
    bottom: 0
  &.left:after
    border-width: $arrow-height 0 0 $arrow-width
    border-color: transparent transparent transparent white
  &.right:after
    border-width: 0 0 $arrow-height $arrow-width
    border-color: transparent transparent white transparent       
  
section
  height: 600px

$(document).ready(function(){
  
  setTimeout(function(){
    
    $("#name").removeClass("larger");

    $("#name span").each(function(){
      $(this).css("-webkit-transition-delay",$(this).data("delay")+"ms").css("transition-delay",$(this).data("delay")+"ms");
      $(this).addClass("visible");
    });
    
  }, 1000);    
  
});