@import "compass/css3";

$number-of-cubes: 8;
$cubes-margin: 8px;

$bar-height: 150px;
$bar-width: 30px;
$bar-depth: 100px;

$rotX: 3deg;
$rotY: 0deg;
$rotZ: 0deg;
$transX: 0;
$transY: 0;

$animSpeed: 1s;

$perspective: 2200px;

@for $i from 1 through $number-of-cubes {
  .cube:nth-child(#{$i}),
  .cube:nth-child(#{$i}) div
    {
      z-index: $i;
      animation-delay: $i*($animSpeed/12);
    }
}

html{
 height: 100%; 
}

body{
    background-color: #323036;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: table;
}

#vignette{
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 4;
  
    background-image: -webkit-radial-gradient(50% 50%, ellipse cover, rgba(0,0,0,0), rgba(0,0,0,0.5));  
    background-image: -moz-radial-gradient(50% 50%, ellipse cover, rgba(0,0,0,0), rgba(0,0,0,0.5)); 
}



#pos{
  width: ($bar-width + $cubes-margin) * $number-of-cubes;
  margin: 0 auto;
}

#container{
  width: 100%;
  perspective: $perspective;
  padding: 20px 60px;
  position: relative;
  display: table-cell;
  vertical-align: middle;
}

.cube{
  width: $bar-width;
  height: $bar-height;
  position: relative;
  margin-right: $cubes-margin;
  float: left;
  transform-style: preserve-3d;
  box-shadow: 0 0 5px rgba(0,0,0, .2);
  animation: animCube; /* Safari and Chrome */
  animation-iteration-count: infinite;
}

.cube div{
  position: absolute;
  display: block;
  width: $bar-width;
  height: $bar-height;
}

.cube .center{
  width: $bar-width;
  box-shadow: 0 0 3px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.05);
  animation: animCenter;
  animation-iteration-count: infinite;
}

.cube .bottom{
  width: $bar-width;
  height: 10px;
  bottom: 0;
  transform: rotateX(90deg);
  transform-origin: center bottom;
  animation: animBottom;
  animation-iteration-count: infinite;
}

.cube .left{
  left: 0;
  transform: rotateY(90deg);
  transform-origin: left center;
  animation: animSide;
  animation-iteration-count: infinite;
}

.cube .right{
  right: 0;
  transform: rotateY(-90deg);
  transform-origin: right center;
  animation: animSide;
  animation-iteration-count: infinite;
}

.cube .left,
.cube .center,
.cube .right,
.cube .bottom,
.cube{
  animation-duration: $animSpeed;
  animation-timing-function: ease-in-out;
}

.left,
.right{
  background-color: #2b2830;
  background-image: linear-gradient(top, rgba(255,255,255,0.1), rgba(255,255,255,0));
}


.center{
    background-color: #2b2830;
    background-image: linear-gradient(top, rgba(255,255,255,0.15), rgba(255,255,255,0)); 
}

.bottom{
    background-color: #1f1d23;
    background-image: linear-gradient(bottom, rgba(255,255,255,0.1), rgba(255,255,255,0)); 
}

@keyframes animCube
{
    30%  {  transform: translateZ($bar_height) translatex($transX) translateY($transY) rotatex($rotX) rotatey($rotY) rotateZ($rotZ);
	          box-shadow: 0 0 20px rgba(0,0,0,.5), 0 12px 20px 1px rgba(0,0,0,.5);
	 }

    100%  {  
	          transform: translateZ(0px) rotatez(0deg);
	          box-shadow: 0 0 30px rgba(0,0,0,.5), 0 0 0 0 rgba(0,0,0,0);
    }
}

@keyframes animSide
{
    30%  {  width: $bar-depth;
            background-color: #1d1c1f;      
    }
    95%  {  width: 10px; }
}

@keyframes animBottom
{
    30%  {  height: $bar-depth; }
    95%  {  height: 10px; }
}



@keyframes animCenter /* Safari and Chrome */
{
    20%  {  background-color: #6a6371;
	    box-shadow: 0 0 3px rgba(255,255,255,0.15), inset 0 1px rgba(255,255,255,.5);
	 }
    65%  {  
	    box-shadow: 0 0 3px rgba(255,255,255,0), inset 0 1px rgba(255,255,255,.25);
}
}