@import "compass/css3";

$sides: 6;
$baseAngle: 360deg/$sides;
$cuantos: 16;
$elemDiameter: .8em;
$spacing: 12;
$t: 1.8s;
$default_err: pi()/14400;

@function asin($val, $e: $default_err) {
  $sum: 0;
  $sign: 1;
  $flag: 0;
  $i: 0;
  $c: 1;
  $j: 2*$i + 1;
  @if abs($val) > sin(45deg) {
    $flag: 1;
    $sign: $val/abs($val);
    $val: sqrt(1 - pow($val, 2));
  }
  $term: $c*pow($val, $j)/$j;
  @while abs($term) > $e {
    $sum: $sum + $term;
    $i: $i + 1;
    $c: $c*(2*$i - 1)/(2*$i);
    $j: 2*$i + 1;
    $term: $c*pow($val, $j)/$j;
  }
  $result: $sign*($flag*pi()/2 + pow(-1, $flag)*$sum); 
  @return $result/pi()*180deg;
}
@function acos($val, $e: $default_err) {
  @return 90deg - asin($val, $e);
}
@function atan($val, $e: $default_err) {
  $val: $val/sqrt(1 + pow($val, 2));
  @return asin($val, $e);
}

html {
  overflow: hidden;
  height: 100%;
  font-size: 62.5%;
}
body { 
  margin: 0;
  height: 100%;
  transform: rotate(random(60)*1deg);
  background-color: #45CEEF; 
  -webkit-animation: pulse 20s infinite alternate;
  animation-direction: alternate;
}
@-webkit-keyframes pulse { 
  0% {background-color: Aqua;} 
  25% {background-color: Moccasin;} 
  50% {background-color: Plum;} 
  75% {background-color: PowderBlue;} 
  100% {background-color: Wheat;} 
} 
.assembly {
  &, * {
    position: absolute;
    top: 50%; 
    left: 50%;
  }  
  animation: rot $t ease-in-out infinite;
  animation-direction: alternate;
}
.pill {
  $n: 1;
  
  margin: -$elemDiameter/2;
  width: $elemDiameter; 
  height: $elemDiameter;
  border-radius: 50%;
  background: CornflowerBlue;
  content: $n;
  width: 0px;
  height: 0px;
  border-right: 2rem solid transparent;
  border-top: 2rem solid CornflowerBlue;
  border-left: 2rem solid CornflowerBlue;
  border-bottom: 2rem solid CornflowerBlue;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  
  @for $l from 1 to $cuantos {
    
    $curLevel: $l*$sides;
    $levelAngle: $baseAngle/$l;
    
    @for $i from 0 to $curLevel {
      
      $j: $i%$l;
      $polyCR: $spacing*$l*$elemDiameter;
      $polyIR: $polyCR*cos($baseAngle/2);
      $polyEdge: 2*$polyCR*sin($baseAngle/2);
      $polyEdgeDiff: abs($j - $l/2)*$polyEdge/$l;
      $dist: sqrt(pow($polyIR, 2) + pow($polyEdgeDiff, 2));
      $curAngle: $baseAngle*floor($i/$l) + atan(($j - $l/2)*$polyEdge/$l/$polyIR);
      
      &:nth-child(#{$n + $i + 1}) {
        transform: rotate($curAngle) translate($dist) rotate(-$curAngle*2);
        animation: collapseLevel#{$l}-d#{$i + 1} $t ease-in-out infinite;
        animation-direction: alternate;
      }
      
      $polyCR: $spacing/2*$l*$elemDiameter;
      $polyIR: $polyCR*cos($baseAngle/2);
      $polyEdge: 2*$polyCR*sin($baseAngle/2);
      $polyEdgeDiff: abs($j - $l/2)*$polyEdge/$l;
      $dist: sqrt(pow($polyIR, 2) + pow($polyEdgeDiff, 2));
      
      @at-root {
        @keyframes collapseLevel#{$l}-d#{$i + 1} {
          #{(($l + $i/$curLevel)/$cuantos)*100%}, 100% {
            transform: rotate($curAngle) translate($dist) rotate(-$curAngle*2);
            @if $l%2 != 0 or $i%2 != 0 {
              opacity: .015
            }
          }
        }
      }
      
    }
    
    $n: $n + $curLevel;

  }

}

@keyframes rot { to { transform: rotate($baseAngle); } }