<script type="text/javascript" src="//use.typekit.net/dik5xgb.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<header>
  <h1>ATOM</h1>
  <svg id="svg">
    <circle id="base" />
    <path id="ring" />
    <path id="second" />
    <path id="third" />
  </svg>
</header>

@import "bourbon";

$bg-tan: #efeae1;
$atom-color: #66595C; 

@mixin flexy($direction: row, $justify: center, $align: center) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
}

* {
  @include box-sizing(border-box);  
}

body {
  background: $bg-tan;  
  @include flexy(column);
}

header {
  @include flexy();
  font-family: 'museo-sans-rounded', sans-serif;
  font-size: 3em;
  color: $atom-color;
  position: relative;
  height: 4em;
  width: intrinsic;
  //margin: 0 auto;
  
  h1 {
    letter-spacing: .2em;
    font-weight: 100;
    
    span[class*='char'] {
        display: inline-block;
    }
    
    .char1 {
      @include transform(scale(1.2,1)); 
    }
    
    .char3 {
      padding: 0 .15em 0 .1em;
      visibility: hidden;
    }
  }
}
.hide {
  visibility: hidden;
  position: relative;
  left: 9999px;
  display: none;
}

#svg {
  position: absolute;
  right: 1.79em;
  bottom: .4em;
  height: 4.4em;
  width: 3.5em;
  @include transform(scale(.93));
}

path#ring, circle#base {
  stroke: $atom-color;
  stroke-width: 4px;
  fill: none;
  position: absolute;
}

circle#base {
  stroke-width: 5px;
}

#second, #third {
  @extend #ring;
}

#second {
  @include transform(translateX(-73px) translateY(150px) rotate(-65deg));
}

#third {
  @include transform(translateX(19px) translateY(276px) rotate(-125deg));
}

#ring, #second, #third {
  $dash: 280;
  stroke-dasharray: $dash;
}

.animate {
  @include animation(dash 4s linear);
}

@include keyframes(dash) {
  from {
    stroke-dashoffset: 0;   
  }
  
  50% {
    stroke-dasharray: 0;  
  }
  
  to {
    stroke-dashoffset: 560;  
  }
}

var lettering = function(el, optionalArg) {
  var text = el.innerHTML,
      arg = optionalArg || "char",
      size = window.getComputedStyle(el).getPropertyValue("font-size").substring(0,2);
  if(el.classList.contains('fallback'));
  if(el.parentNode.getAttribute('aria-hidden') === null){
    var clone = el.cloneNode(true);
    
    clone.classList.add('fallback');
    
    el.setAttribute('aria-hidden', 'true');
    
    clone.classList.add('hide');
    
    el.parentNode.insertBefore(clone, el.nextSibling);
  };
  el.innerHTML = "";
  if(arg === "char"){
    for(var i = 0; i < text.length; i++){
      var span = document.createElement("span");
      span.innerHTML = text[i];
      if(text[i] == " "){
        span.style.margin = "0 " + (size/10) + "px";
      }
      span.classList.add("char"+(i+1));
      el.appendChild(span);
    }
  } else if(arg === "words") {
    var words = text.split(" ");
    for(var i = 0; i < words.length; i++){
      var span = document.createElement("span");
      span.innerHTML = words[i];
      span.classList.add("word"+(i+1));
      span.style.margin = "0 " + (size/10) + "px";
      el.appendChild(span);
    }
  } else if(arg === "lines") {
    var lines = text.split("<br>");
    el.style.display = "block";
    for(var i = 0; i < lines.length; i++){
      var span = document.createElement("span");
      span.innerHTML = lines[i];
      span.classList.add("line"+(i+1));
      span.style.display = "block";
      el.appendChild(span);
    }
  }
};

var h1 = document.querySelector("header h1");

lettering(h1);

var ring = document.querySelector("path#ring"),
    path = "",
    base = document.querySelector('circle#base'),
    second = document.querySelector('path#second'),
    third = document.querySelector('path#third');

base.setAttribute('cx', 80);
base.setAttribute('cy', 135);
base.setAttribute('r', 35);

path = "M45,145 c-50,-10 -60,-40 10,-35 c95,8 150,50 51,46";

ring.setAttribute('d', path);
second.setAttribute('d', path);
third.setAttribute('d', path);

var animate = function() {
  ring.classList.add('animate');
  second.classList.add('animate');
  third.classList.add('animate');
};


h1.onload = animate();