.whereami

.frame1.frame
  .half1{'data-0' => "left: 0%;", 'data-50p' => 'left: -50%;'}
  .half2{'data-0' => "left: 50%;", 'data-50p' => 'left: 100%;'}
.frame2.frame{'data-0' => "transform: scale(1.0,1.0);", 'data-150p' => 'transform: scale(1.3, 1.3);opacity: 1;', 'data-200p' => 'opacity: 0; transform: scale(6, 6);'}
.disruptor-text{'data-200p' => 'top: 100%;', 'data-250p' => 'top: 40%;', 'data-300p' => 'top: 40%;', 'data-350p' => 'top: -100%;'}
  This is kind of cool...
.frame3.frame{'data-350p' => 'top: 100%', 'data-375p' => 'top: 0%'}
  .piece1.piece{'data-375p' => 'left: -35%; transform: rotate(-15deg);', 'data-400p' => 'left: 0%; transform:rotate(0deg);'}
  .piece2.piece{'data-375p' => 'transform: rotate(180deg);', 'data-400p' => 'transform: rotate(0deg);'}
  .piece3.piece{'data-375p' => 'transform: rotate(90deg);', 'data-400p' => 'transform: rotate(0deg);'}
  .piece4.piece{'data-375p' => 'left: 100%; transform: rotate(25deg);', 'data-400p' => 'left: 50%; transform: rotate(0deg);'}
.frame4.frame{'data-450p' => 'top: 100%; filter: blur(0px);',
'data-550p' => 'top: 0%; transform: scale(1, 1);', 'data-600p' => 'filter: blur(10px);top: 0%;'}
.eyeball{'data-550p' => 'display: none;', 'data-555p' => 'display: block;', 'data-cursor' => 'true'}

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300);

@mixin filter($amount){
  -webkit-filter: blur($amount +px);
  -moz-filter: blur($amount +px);
  -o-filter: blur($amount +px);
  -ms-filter: blur($amount +px);
  filter: blur($amount +px);
}


html,body{
  height: 10000px;
}

*{ font-family: 'Roboto Condensed', sans-serif; font-weight: 300; }

.whereami{
  position: fixed;
  top: 0px;
  right: 0px;
  width: 100px;
  height: 50px;
  background: rgba(0,0,0,0.7);
  color: #FFF;
  text-align: center;
  font-size: 40px;
  z-index: 10000;
}

.frame{
  position: fixed;
  top: 100%;
  left: 0px;
  display: block;
  width: 100%;
  height: 100%;
}

.frame1{
  top: 0px;
  
  .half1{
    background-image: url(http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050);
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 50%;
    background-position: 0% center;
    background-size: cover;
  }
  
  .half2{
    position: absolute;
    top: 0px;
    left: 50%;
    height: 100%;
    width: 50%;
    background-image: url(http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: 0% center;
    background-size: cover;
  }
}

.frame2{
  top: 0px;
  background-image: url(http://unsplash.imgix.net/reserve/de9uL9L7RSmzV4SAoAO5_Lauren%20and%20Winona%20Under%20a%20pass-1.jpg?dpr=2&fit=crop&fm=jpg&h=700&q=50&w=1050);
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0% center;
  transform: scale(1.0,1.0);
  z-index: -1;
  opacity: 1;
}

.disruptor-text{
  position: fixed;
  width: 100%;
  height: 100px;
  text-align: center;
  z-index: -2;
  font-size: 84px;
  top: 100%;
}

.frame3{
  z-index: -5;
  overflow: hidden;
  .piece{
    width: 50%;
    height: 50%;
    position: absolute;
    background-image: url(http://unsplash.imgix.net/uploads/141223808515744db9995/3361b5e1?fit=crop&fm=jpg&h=700&q=75&w=1050);
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  }
  .piece1{
    left: -35%;
    top: 0px;
    transform: rotate(-15deg);
  }
  .piece2{
    top: 0px;
    left: 50%;
    transform: rotate(180deg);
  }
  .piece3{
    top: 50%;
    left: 0px;
    transform: rotate(90deg);
  }
  .piece4{
    top: 50%;
    left: 100%;
    transform: rotate(25deg);
  }
}

.frame4{
  top: 100%;
  z-index: -4;
  background-image: url(http://unsplash.imgix.net/44/lSed5VXIQnOw7PMfB9ht_IMG_1642.jpg?fit=crop&fm=jpg&h=660&q=75&w=1050);
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(0px);
}

.eyeball{
  display: none;
  z-index: -4;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-image: url(http://unsplash.imgix.net/44/lSed5VXIQnOw7PMfB9ht_IMG_1642.jpg?fit=crop&fm=jpg&h=660&q=75&w=1050);
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  top: 100%;
  position: fixed;
  left: 50%;
  margin-left: 0px;
  margin-top: 0px;
}

.frame5{
  background: #FFF;
}

.twitter-box{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -150px;
  width: 300px;
  height: 300px;
  background: #FFF;
  border: 4px solid #55acee;
  box-shadow: 0px 3px 5px #000;
  
  .iframe{
    display: block;
  }
}

.prof-cont{
  display: block;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  margin: auto;
  overflow: hidden;
  
  img{
    max-width: 100%;
    height: auto;
  }
}

var s = skrollr.init({
  render: function(data){
    document.querySelector(".whereami").innerHTML = data.curTop;
  }
});

var eyeball = document.querySelector(".eyeball");

window.addEventListener("mousemove", function(e){
  eyeball.style.left = (e.clientX - eyeball.offsetWidth/2)+"px";
  eyeball.style.top = (e.clientY - eyeball.offsetHeight/2)+"px";
});

window.onscroll = function(){
  var frame4 = document.querySelector(".frame4");
  console.log(frame4.classList.contains("skrollable-between"));
if(frame4.classList.contains("skrollable-between")){
  document.body.style.cursor = 'none';
}
}