// Background Color
$dark:#2b2824;

// Logo Box Width
$start-width: 167px;
$end-width:680px;

// Opacity - Start & End
$start-opacity:0.16;
$start-color:#d0c4b3;
$start-color-rgb:208,196,179;
$end-opacity:0.8;

// Logo Box
$border:20px;
$cover-up:9px;
$box:$cover-up + 12px;

// Transition Timing
$initial-delay:666ms;
$increment:$initial-delay / 10;


body {background:lighten($start-color, 12%);}


// Color Background
.container {
  position:absolute;
  background:$dark;
  box-shadow:inset 0 0 20px darken($dark, 13%);
  top:$border;
  bottom:$border;
  right:$border;
  left:$border;
 }

// Fade In Keyframes
$start:0; $end:1;
@keyframes fadeIn { from { opacity:$start; } to { opacity:$end; } }


.logo-wrap, svg, .border, .letter {
  transition: all $initial-delay ease-in-out;
}

// Logo Size & Styling
.logo-wrap {
  margin:75px auto;
  width:$start-width;
  box-shadow:inset 0 0 0 $cover-up $dark,
             inset 0 0 0 $box rgba(208,196,179, $start-opacity);
  transition-delay: $initial-delay;
  opacity:0;
  transform:scale(0.6);

  animation:fadeIn ease-in 1;
  animation-fill-mode:forwards;
  animation-duration:1.75s;
  animation-delay: 0;
  
  // Tagline & Icon Styling
  .tagline {
    width:$end-width;
    margin-left:-($start-width * 1.53);
    position:absolute;
    font-family:'Lato', sans-serif;
    font-weight:400;
    font-size:1.2em;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:0.1em;
    color:rgba(208,196,179,$start-opacity);
    transition: all $initial-delay ease-in-out ($initial-delay / 3);

    .filler {
      opacity:0;
      transition: opacity ($initial-delay / 2.5) ease-in-out;
    }
  }
  
  // Tagline Fade In
  &:hover {
    .tagline {
      width:$end-width;
      margin-left:0px;
      color:rgba(208,196,179,$end-opacity);
      transition: all $initial-delay ease-in-out 0;
    
      .filler {
        opacity:1;
        transition: opacity $initial-delay ease-in-out;
      }
    }
  }
  
  // Logo Styling
  svg {
    .border {
      fill:$start-color;
      opacity:$start-opacity;
    }

    .letter {
      fill:$start-color;
      opacity:$start-opacity;
      transition-delay: 0s;

      &.o, &.r-1, &.t, &.h, &.e, &.r-2, &.l, &.i{
        opacity:0;
      }
     }
   }

   // Logo Expand/Fade In
   &:hover {
    width:$end-width;
    transition-delay: 0s;
    box-shadow:inset 0 0 0 $cover-up $dark,
               inset 0 0 0 $box rgba(208,196,179, $end-opacity);
  
    // Background Image
    &:after {
      content: "";
      opacity: 0.2;
      top: $cover-up;
      left: $cover-up;
      bottom: $cover-up;
      right: $cover-up;
      position: absolute;
      z-index: -1;
      background:url('http://norther.li/_codepen/logo-animation-bkgd.jpg') no-repeat center;
      background-size:cover;
    }
    
    // Logo Opacity Fade In
    svg {
      .border {opacity:$end-opacity;}

     .letter {
       opacity:$end-opacity;
       transition-delay: $initial-delay;
  
       // Letter Fade In Order
       &.o, &.r-1, &.t, &.h, &.e, &.r-2, &.l, &.i{
         opacity:$end-opacity;
       }

       &.o {transition-delay: $initial-delay + $increment;}
       &.r-1 {transition-delay: $initial-delay + ($increment * 2);}
       &.t {transition-delay: $initial-delay + ($increment * 3);}
       &.h {transition-delay: $initial-delay + ($increment * 4);}
       &.e {transition-delay: $initial-delay + ($increment * 5);}
       &.r-2 {transition-delay: $initial-delay + ($increment * 6);}
       &.l {transition-delay: $initial-delay + ($increment * 7);}
       &.i {transition-delay: $initial-delay + ($increment * 8);}
      }
    }
  }
}