#bg
  .frame
    #head
      .one
      .two
      .thr
      .fou
      .fou1
      .fou2
      .fou3
      .fiv
      .six
      .sev
      .eig
      .eig1
      .nin
      .nin1
      .nin2
      .ten
      .ten1
      .ten2
      .ele

@import "compass";

$url: 'http://pressdsgn.com/clients/pressdesign/thingy/';

.frame {
display:block;
position: absolute;
background: url(#{$url}000.png) no-repeat;
background-position: 120px -20px;
width: 1000px;
left:50%;
top:10px;
margin-left:-486px;
-webkit-perspective: 1000;
}

#head {
height: 800px;
width: 1000px;
-webkit-transform-style: preserve-3d;
}

#head > div {
position:absolute;
top:50px;
left: 50%;
width:580px;
height:580px;  
margin-left:-290px;
&.one {
background: url(#{$url}01.png) no-repeat;
-webkit-transform: translateZ(0px);
}
&.two {
background: url(#{$url}02.png) no-repeat;
-webkit-transform: translateZ(70px);
}
&.thr {
background: url(#{$url}03.png) no-repeat;
-webkit-transform: translateZ(125px);
}
&.fou {
top:20px;
background: url(#{$url}0411.png) no-repeat;
-webkit-transform: translateZ(90px);
}
&.fou1 {
top:30px;
background: url(#{$url}042.png) no-repeat;
-webkit-transform: translateZ(95px);
}
&.fou2 {
top:20px;
background: url(#{$url}043.png) no-repeat;
-webkit-transform: translateZ(105px);
}
&.fou3 {
top:15px;
background: url(#{$url}044.png) no-repeat;
-webkit-transform: translateZ(120px);
}
&.fiv {
background: url(#{$url}05.png) no-repeat;
-webkit-transform: translateZ(140px);
}
&.six {
background: url(#{$url}06.png) no-repeat;
-webkit-transform: translateZ(165px);
}
&.sev {
background: url(#{$url}07.png) no-repeat;
-webkit-transform: translateZ(180px);
}
&.eig {
background: url(#{$url}08.png) no-repeat;
-webkit-transform: translateZ(190px);
}
&.eig1 {
background: url(#{$url}081.png) no-repeat;
-webkit-transform: translateZ(205px);
}
&.nin {
background: url(#{$url}090.png) no-repeat;
-webkit-transform: translateZ(130px);
}
&.nin1 {
background: url(#{$url}091.png) no-repeat;
-webkit-transform: translateZ(150px);
}
&.nin2 {
background: url(#{$url}092.png) no-repeat;
-webkit-transform: translateZ(165px);
}
&.ten {
background: url(#{$url}101.png) no-repeat;
-webkit-transform: translateZ(175px);
}
&.ten1 {
background: url(#{$url}102.png) no-repeat;
-webkit-transform: translateZ(190px);
}
&.ten2 {
background: url(#{$url}103.png) no-repeat;
-webkit-transform: translateZ(200px);
}
&.ele {
background: url(#{$url}11.png) no-repeat;
-webkit-transform: translateZ(205px);
}
}

body {margin:0;padding:0;overflow:hidden;}

#bg {
position: absolute;
width: 100%;
height: 100%;
@include background-image(radial-gradient(center, ellipse cover,  rgba(242,243,244,1) 0%, rgba(212,213,214,1) 79%, rgba(193,193,193,1) 100%));
}

$(document).mousemove(function(event) {

  cx = Math.ceil($(window).width() / 1.8);
  cy = Math.ceil($(window).height() / 1.8);
  dx = event.pageX - cx;
  dy = event.pageY - cy;

  tiltx = (dy / cy);
  tilty = -(dx / cx);
  radius = Math.sqrt(Math.pow(tiltx, 2) + Math.pow(tilty, 2));
  degree = (radius * 20);

  $('#head').css('-webkit-transform', 'rotate3d(' + -tiltx + ', ' + -tilty + ', 0, ' + degree + 'deg)');
  $('#head').css('transform', 'rotate3d(' + -tiltx + ', ' + -tilty + ', 0, ' + degree + 'deg)');

});

setInterval(changeAnimState, 3000);

// BASED ON // JONAS DINGES / SANDRO PAGANOTTI
// https://codepen.io/jonadinges/pen/rVaVbM/
// http://sandropaganotti.com/2010/09/09/

// INSPIRED BY // AJ FOSIK
// http://www.ajfosik.com/
// http://www.booooooom.com/2009/06/24/aj-fosik/