.container
  header
  input(type="checkbox" class="trigger" checked)
  nav
    - var i = 6
      while i--
        a(href="").block
  main Inspired by 
    a(href="https://dribbble.com/shots/1375652-Gif-Animation-Abracadabra-App" target="_blank") this Dribbble

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
$container-height: 95vh;
$header-height: 60px;
$animation-duration: 0.2s;
$icons: "\f11e", "\f132", "\f131", "\f119", "\f127", "\f145";
$web-font: "FontAwesome";
$color1: #f9f9f9;
$color2: #32446A;


html,body {
  height: 100%;
  background-color: #333;
}

.container {
  width: $container-height*9/16;
  height: $container-height;
  box-shadow: 0 4px 12px rgba(0,0,0,0.75);
  background-color: #999;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

header {
  height: $header-height;
  margin-bottom: 10px;
  background-color: darken($color2,10%);
  
  &:before {
    content: '\f0c9';
    font-family: $web-font;
    font-size: 1.5rem;
    color: rgba(0,0,0,0.45);
    position: fixed;
    top: 0;
    left: 0;
    width: $header-height;
    height: $header-height;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.trigger {
  position: fixed;
  top: 0;
  left: 0;
  width: $header-height;
  height: $header-height;
  margin: 0;
  opacity: 0;
  z-index: 10;
  cursor: pointer;

  &:checked {
    + nav {
      transition-delay: 0s;
      height: calc(100% - #{$header-height});
      
      &:before {
        width: 100%;
      }

      .block {
        
        &:nth-child(1){
          animation-name: horizontal;
          animation-delay: $animation-duration*1;
        }

        &:nth-child(2){
          animation-name: vertical;
          animation-delay: $animation-duration*2;
        }

        &:nth-child(3){
          animation-name: vertical;
          animation-delay: $animation-duration*4;
        }

        &:nth-child(4){
          animation-name: horizontal;
          animation-delay: $animation-duration*3;
        }

        &:nth-child(5){
          animation-name: horizontal;
          animation-delay: $animation-duration*5;
        }

        &:nth-child(6){
          animation-name: vertical;
          animation-delay: $animation-duration*6;
        }
      }
    }
  }
}

nav {
  width: 100%;
  height: 10px;
  perspective: 1000px;
  transform-style: preserve-3d;
  border-top: 10px solid $color2;
  box-sizing: border-box;
  position: absolute;
  top: $header-height;
  left: 0;
  transition: height 0s ease $animation-duration*7;
  
  &:before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    width: 0;
    height: 10px;
    background-color: $color1;
    transition: width $animation-duration*7 cubic-bezier(0.9,0.05,0.7,0.2);
    animation: nav-intro $animation-duration*7 cubic-bezier(0.9,0.05,0.7,0.2);
  }
}

.block {
  width: 50%;
  height: 33.33%;
  float: left;
  outline: 1px solid rgba(0,0,0,0.45);
  display: block;
  text-decoration: none;
  animation-duration: $animation-duration;
  animation-timing-function: cubic-bezier(0.9,0.05,0.7,0.2);
  animation-fill-mode: both;
  
  &:before {
    height: 100%;
    font-size: 2.5rem;
    font-family: $web-font;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  @for $i from 1 to 7 {
    &:nth-child(#{$i}){
      &:before {
        content: nth($icons,$i);
      }
    }
  }

  &:nth-child(1){
    background-color: $color1;
    color: $color2;
    transform: rotateX(-90deg);
    transform-origin: top center;
    animation-name: horizontal-reverse;
    animation-delay: $animation-duration*6;
  }
  
  &:nth-child(2){
    background-color: $color2;
    color: $color1;
    transform: rotateY(90deg);
    transform-origin: left center;
    animation-name: vertical-reverse;
    animation-delay: $animation-duration*5;
  }
  
  &:nth-child(3){
    background-color: $color2;
    color: $color1;
    transform: rotateY(-90deg);
    transform-origin: right center;
    animation-name: vertical-reverse;
    animation-delay: $animation-duration*3;
  }
  
  &:nth-child(4){
    background-color: $color1;
    color: $color2;
    transform: rotateX(-90deg);
    transform-origin: top center;
    animation-name: horizontal-reverse;
    animation-delay: $animation-duration*4;
  }
  
  &:nth-child(5){
    background-color: $color1;
    color: $color2;
    transform: rotateX(-90deg);
    transform-origin: top center;
    animation-name: horizontal-reverse;
    animation-delay: $animation-duration*2;
  }
  
  &:nth-child(6){
    background-color: $color2;
    color: $color1;
    transform: rotateY(90deg);
    transform-origin: left center;
    animation-name: vertical-reverse;
    animation-delay: $animation-duration*1;
  }
}

main {
  box-sizing: border-box;
  padding: 20px;
}


// ******************************
// ***** Animation **************
// ******************************

// horizontal -----------------------------

@keyframes horizontal {
  0% { visibility: hidden; opacity: 0;}
  1% { visibility: visible; opacity: 1;}
  100% { transform: rotateX(0deg); visibility: visible; opacity: 1;}
}

@keyframes horizontal-reverse {
  0% { transform: rotateX(0deg); visibility: visible;}
  99% { visibility: visible; opacity: 1;}
  100% { visibility: hidden; opacity: 0;}
}


// vertical -----------------------------

@keyframes vertical {
  0% { visibility: hidden; opacity: 0;}
  1% { visibility: visible; opacity: 1;}
  100% { transform: rotateY(0deg); visibility: visible; opacity: 1;}
}

@keyframes vertical-reverse {
  0% { transform: rotateY(0deg); visibility: visible; opacity: 1;}
  99% { visibility: visible; opacity: 1;}
  100% { visibility: hidden; opacity: 0;}
}


// nav:before width reset -----------------------------

@keyframes nav-intro {
  0% { width: 0%;}
}