.perspective
  .button
    .button__icon
      .group.group-principles
        .icon.icon-principles
          .circle.circle-purple1
          .circle.circle-purple2
          .circle.circle-purple3
          .circle.circle-purple4
          .circle.circle-purple5

          .circle.circle-gray1
          .circle.circle-gray2
          .circle.circle-gray3
          .circle.circle-gray4
          

ul.details
  li.details__item: a(href="https://dribbble.com/bduuzis" target="_blank") Dribbble
  li.details__item: a(href="https://lv.linkedin.com/in/didzisgruznovs" target="_blank") Linked In

@import "compass/css3";

// GLOBAL STYLES
body {
  background-color: #242424;
}

// VERTICAL ALIGN MIXIN
@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

// BUTTON STYLING

.perspective {
  position: relative;
  margin: 150px auto;

  perspective: 500px;
  -webkit-perspective: 500px; /* Chrome, Safari, Opera */
  width: 140px; 
  height: 100px;
  
  &:hover,
  &.active {
    .button {
      -webkit-transform: rotateY(10deg);
      -moz-transform: rotateY(10deg);
      -o-transform: rotateY(10deg);
      -ms-transform: rotateY(10deg);
      transform: rotateX(10deg);

      top: -100px;
      
      box-shadow: 0 3px #264BAC, 0 160px 89px rgba(66, 112, 234, .1);
    }
  }
}

.button {
  position: absolute;
  top: 0;
  
  height: 140px;
  width: 140px;
  
  cursor: pointer;
  border-radius: 30px;
  
  text-align: center;
  color: #fff;
  
  background: #4270EA;
  box-shadow: 0 8px #264BAC, 0 60px 25px rgba(66, 112, 234, .19);
  
  -webkit-transform: rotateY(40deg);
  -moz-transform: rotateY(40deg);
  -o-transform: rotateY(40deg);
  -ms-transform: rotateY(40deg);
  transform: rotateX(40deg);

  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

.button__icon {
  @include vertical-align();
}

// Resource for icon animation: https://codepen.io/jmuspratt/pen/mkaAF

.group { display: inline-block; }

.icon {
  width:100px;
  height:100px;
  position:relative;
}

.circle {
  position:absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #FFFFFF;
  @include transition(all 1s ease);
}
	
	
.icon-principles {
	$origin_x: 30px;
	$origin_y: 28px;
	//@include transform-origin(50% 0%);
	@include transition(all .7s ease-out);
	@include transform( rotate(90deg));
	.circle-purple1 	{left:$origin_x + 0; top:$origin_y + 0;}
	.circle-gray1 		{left:$origin_x + 20; top:$origin_y + 0; }
	.circle-purple2 	{left:$origin_x + 40; top:$origin_y + 0; }
	
	.circle-gray2 		{left:$origin_x + 0; top:$origin_y + 20;}
	.circle-purple3 	{left:$origin_x + 20; top:$origin_y + 20; }
	.circle-gray3 		{left:$origin_x + 40; top:$origin_y + 20; }
	
	.circle-purple4 	{left:$origin_x + 0; top:$origin_y + 40;}
	.circle-gray4 		{left:$origin_x + 20; top:$origin_y + 40; }
	.circle-purple5 	{left:$origin_x + 40; top:$origin_y + 40; }
	
}	

.perspective:hover,
.perspective.active {
  .icon-principles {
		@include transform( rotate(90deg));
		
		.circle-purple1 	{@include transform(translate(20px, 20px) );	}
		.circle-gray1 		{@include transform(translate(20px, 20px) );	}
		.circle-purple2 	{@include transform(translateY(40px));			}
	
		.circle-gray2 		{@include transform(translate(20px, -20px));	}
		.circle-purple3 	{@include transform(translate(20px, -20px));	}
		.circle-gray3 		{@include transform(translate(-20px, 20px));	}
	
		.circle-purple4 	{@include transform(translateY(-40px));			}
		.circle-gray4 		{@include transform(translate(-20px, -20px)); 	}
		.circle-purple5 	{@include transform(translateX(-40px)); 	}
		
	}
}

// DETAILS
.details {
  list-style: none;
  padding: 0;
  padding-top: 50px;
  margin-left: 20px;
  
  font-family: "Open Sans";
  font-weight: 300;
  font-size: 14px;
}

  .details__item {
    display: inline-block;
    margin: 0 10px;
    
    a {
      color: #ffffff;
      text-decoration: none;
      
      &:hover {
        color: #bd953e;
      }
    }
  }

// Delete this to stop animation
setInterval(function(){
  $(".perspective").toggleClass("active");
}, 3000);