<link href="https://fonts.googleapis.com/css?family=Exo+2:800|Maven+Pro:900|Source+Sans+Pro:900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Modak|Montserrat:900" rel="stylesheet">
 <script src="https://d3js.org/d3.v4.min.js"></script>
 <script src="https://d3js.org/colorbrewer.v1.min.js"></script>
<video playsinline autoplay loop muted  poster="" id="bgvid">
    <source src="http://www.danielsilber-baker.com/_content/sunset.mp4" type="video/mp4">
</video>
  <div id="container" class="svg-container"></div>

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

body {
  color: #FFA847;
/*   font-family: 'Montserrat', sans-serif; */
/*   font-family: 'Modak', cursive; */
  font-family: 'Maven Pro', sans-serif;
  font-size: 90px;
  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; 
}

#container {
/*      position: relative; */
   width: 100vw;
  height: 75vh;
  margin-top: 0;
  top:0;
  position:absolute;
 }

.svg-container {
   background-color: rgba(79, 0, 16, .1);
    display: inline-block;
/*     position: relative; */
    width: 100%;
    vertical-align: top;
    overflow: hidden;
}

var vid = document.getElementById("bgvid");
vid.playbackRate = 0.5;
// console.log(vid.duration)
let margin = {top: 0, bottom: 0, left: 0, right:50}

let width = 960-margin.left-margin.right;
let height = 800-margin.top-margin.bottom;

let offset = [width*.33, width*.66]
let circleSize = 150;

// let lineData = [
//   { "x": 0,"y": height/2+circleSize},
//   { "x": offset[1]-offset[0] ,  "y": height/2+(circleSize*2)},
//   { "x": width,  "y": height/2+circleSize}
// ]

let lineData = [
  { "x": 0,"y":900},
  { "x": offset[0] ,  "y": 600},
  { "x": offset[1],  "y": 600},
  { "x": width,  "y": 900}
  
]


var xScale = d3.scaleLinear().range([25, width-25])

var yScale = d3.scaleLinear().range([height-50,50])

  xScale.domain(d3.extent(lineData, function(d) { return d.x; }));
  yScale.domain([0, d3.max(lineData, function(d,i) { return d.y*i; })]);

// var tau = 2 * Math.PI; // http://tauday.com/tau-manifesto

var lineFunction = d3.line()
.x(function(d) { return d.x; })
.y(function(d, i) { return d.y; })
// .curve(d3.curveBasisClosed)
.curve(d3.curveMonotoneY);


// var arc = d3.arc()
//     .innerRadius(280)
//     .outerRadius(240)
//     .startAngle(90);

var graph = d3.select("div#container")
  .append("svg")
  .attr("preserveAspectRatio", "xMinYMin meet")
  .attr("viewBox", "0 0 960 800")
  .classed("playground", true)


let path = graph.append("path")
  .attr("d", lineFunction(lineData))
  .attr("stroke", "rgba(165, 102, 139, 0)")
  .attr("stroke-width", 4)
 .attr("id", "wavy") //Unique id of the path
  .attr("fill", "none");

   graph.append("text")
	.style("stroke", "rgba(225, 227, 224, .1)")
  .style("fill", "transparent")
  .style("font-size", "250px")
  .attr("dy", ".5em")
  .attr("dx", ".15em")
  // .attr("transform", "translate(100,-10) rotate(-29)")
  .attr("transform", "translate(-10, -150)")
  .attr("x", width/2)
 .append("textPath") //append a textPath to the text element
    .attr("xlink:href", "#wavy") //place the ID of the path here
    .style("text-anchor","middle") //place the text halfway on the arc
  // .attr("transform", "translate(400,150) rotate(0)")
  .attr("textLength","900")
   .style("filter", "url(#drop-shadow)")
  .text("MOON")

var defs = graph.append("defs");

// create filter with id #drop-shadow
// height=130% so that the shadow is not clipped
var filter = defs.append("filter")
    .attr("id", "drop-shadow")
    .attr("height", "130%");

// SourceAlpha refers to opacity of graphic that this filter will be applied to
// convolve that with a Gaussian with standard deviation 3 and store result
// in blur
filter.append("feGaussianBlur")
    .attr("in", "SourceAlpha")
    .attr("stdDeviation", 5)
    .attr("result", "blur");

// translate output of Gaussian blur to the right and downwards with 2px
// store result in offsetBlur
filter.append("feOffset")
    .attr("in", "blur")
    .attr("dx", 5)
    .attr("dy", 5)
    .attr("result", "offsetBlur");

// overlay original SourceGraphic over translated blurred opacity by using
// feMerge filter. Order of specifying inputs is important!
var feMerge = filter.append("feMerge");

feMerge.append("feMergeNode")
    .attr("in", "offsetBlur")
feMerge.append("feMergeNode")
    .attr("in", "SourceGraphic");




repeat();
function repeat(){
  var p = d3.transition()
    .duration(13500)
  // .ease(d3.easePolyInOut);
    .ease(d3.easeCubicOut);


d3.selectAll("text")
  .transition(p)
  // .style("font-size", "340px")
  .styleTween("fill", function() {
  return d3.interpolateRgb("rgba(225, 227, 224, .001)", "rgba(245, 247, 241, .06)"  );
})
  
  // .attr("transform", "translate(20,-400) ")
  // .attr("textLength","1200")
  
  .attr("transform", "translate(120, -550) rotate(9) ")
  // .attr("transform", "translate(100, -500) rotate(9)")
  .transition()  
      .delay(1500)
      .duration(500) 
      .attr("opacity", 0)
  .transition()
      .duration(250) 
      // .attr("transform", "translate(-200,400) rotate(-9)")
      .attr("transform", "translate(-200,550)")
      // .style("font-size", "300px")
   .transition() 
      .delay(20)
      .duration(500) 
	// .style("fill", "rgba(225, 227, 224, .1)")
      .attr("opacity", 1)
     
   .on("end", repeat);
  
}