<link href="https://fonts.googleapis.com/css?family=Kanit:300|Nosifer" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,700" rel="stylesheet">
<video playsinline autoplay muted loop poster="" id="bgvid">
    <source src="http://www.danielsilber-baker.com/_content/turntable.mp4" type="video/mp4">
</video>

<div class="holder">
  <button id = "theButton">
  replay
</button>
 
<div id="text"></div>

</div>

/*SETUP*/
html {
  box-sizing: border-box;
  
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
  color: #FFA847;
  font-family: 'oswald';
  font-size: 16px;
  width: 100vw;
  margin: auto;
}

video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover; 
}


.line{
  position:relative;
  top: 54vh;
  left: 63vw;
  width: 60%
}
.character {
/*   background-color: rgba(84, 11, 14, .5); */
 text-shadow: 0 0em .5em rgba(68,68,68, .7);
  border-radius: 50%;
/*   letter-spacing: .09em; */
  font-size: 110%;
  font-weight: 500;
  margin-left: 0;
  float:left;
  padding: 3em;
  opacity: .1;
  text-transform: uppercase;
}

/*CONTAINER FOR EVERYTHING*/

.holder {
  position: relative;
  height: 90vh;
  padding: 1em;
  margin: none;
}
/*CONTAINER FOR TEXT*/
#text {
  z-index: -1; 

}

#theButton{
  background-color: transparent;
  margin-left: 80%;
  z-index: 1;
  outline: none;
  border: 2px solid #540B0E;
  font-size: 150%;
  color: #9E2A2B;
  text-transform: uppercase;
}

$(document).ready(function() {
  /*Part I: The Words */
  var theText = [
    "Sound",
    "[es]Scape",
  ];
  
    function makeGo() {
  /*Part II: Creating Words On DOM */
  theText.forEach(function(element, index) {
    var newDiv = document.createElement("p");
    var newContent = document.createTextNode(element);
    newDiv.appendChild(newContent);
    newDiv.className += "line";
    // newDiv.id += "word" + index;
    $textGrab = $("#text");
    $textGrab.append(newDiv);
  });

  /* Part III: Blast text to make elements by character*/
  $("#text").blast({
    delimiter: "character", // Set the delimiter type (see left)
    search: false,
    tag: "div",
    customClass: "character", // Add a custom class to wrappers
    generateIndexID: true, // Add #customClass-i to wrappers
    generateValueClass: true,
    returnGenerated: true
  });

  /* Part IV: Selectors*/

  var $characters = $(".character").toArray();
  var $byWords = $(".character");
  var radius = 180;

  /*Part V: Create The Animations*/

    /*spin words */
    $.Velocity.RegisterUI("spin", {
      defaultDuration:7900,
      calls: [
        [
          {
            translateX: '-=62vw',
            rotateX: 360,
            // transformOriginX: "-=66vw",
            // transformOriginZ:"-=27vw",
            translateZ: "-=10vw",
            textShadowY: "-=.2em",
            opacity: .9,
            fontSize: "+=.8em",
            rotate:-360,
            margin:0,
            padding:0
          },
          1,
          {easing: "easeInOutBounce", delay: 350, drag:true  }]]
    });
  
    var stew = [];
    for (var i = 0; i < $characters.length; i++) {
      var wave = {
        e: $characters[i],
        p: "spin",
        o: { easing: "easeInOutSine", sequenceQueue: false }
      };
      
      stew.push(wave);  
    }
    
// create the second part of the animation once all initial characters are done with Anim1
      var secondWave = {
        e: $characters,
        p: {  translateY: "-=65vh",
          fontSize: "+=.9em",
        margin: "+=1.2em",
          textShadowX: "+=.2em",
          skewY: -9},
        o: {sequenceQueue: false, duration: 1100} //end o section
      }
      
      stew.push(secondWave)
    
    $.Velocity.RunSequence(stew);
  } //end function

  // call function
  makeGo()
  
  /* VI: Replay */
  $("#theButton").click(function() {
// empty text and then call makeGo again
   $('#text').empty()
    makeGo()
    console.log("go")
  });

}); // end on load