.shape
  -(1..2).each do |i|
    %ul.pyramid
      -(1..13).each do |i|
        %li.face

$sides: 4;
$layers: 3;
$l: 12.5em;

$h: $l;

@function hypotenuse($c1, $c2: $c1) {
  $unit: unit($c1);
  @if $c1 != $c2 and unit($c1) != unit($c2) {
    @return 'error, different units';
  }
  $uc1: $c1/($c1*0 + 1); // unitless value
  $uc2: $c2/($c2*0 + 1); // unitless value
  @return sqrt(pow($uc1, 2) + pow($uc2, 2))*($c1/$uc1);
}

@function deg($rad) {
  @return $rad*180/pi();
}

@function rad($deg) {
  @return $deg*pi()/180;
}

@function asind($val, $precision: 25) {
  $coeff: 1;
  $sum: $coeff*$val;
  @for $i from 1 through $precision {
    $coeff: $coeff*(2*$i - 1)/(2*$i);
    $sum: $sum + $coeff*pow($val, 2*$i + 1)/(2*$i + 1);
  }
  @return deg($sum);
}

// Can I simplify this part?
$d: 3*$l/8 $l/4 $l/2;
$hf: hypotenuse($h, nth($d, 1)) 
     hypotenuse($h, nth($d, 2)) 
     hypotenuse($h, nth($d, 3));
$rax: asind(nth($d, 1)/nth($hf, 1)) 
      asind(nth($d, 2)/nth($hf, 2)) 
      asind(nth($d, 3)/nth($hf, 3));
$side: hypotenuse(nth($hf, 1), $l/4) 
       hypotenuse(nth($hf, 2), $l/2) 
       hypotenuse(nth($hf, 3), $l/2);
$av: 2*asind(($l/4)/nth($side, 1)) 
     2*asind(($l/2)/nth($side, 2)) 
     2*asind(($l/2)/nth($side, 3));
$inside: 0 
         hypotenuse(nth($hf, 2), nth($d, 1)) 
         hypotenuse(nth($hf, 3), nth($d, 2));
$sa: 0 
     asind(nth($d, 1)/nth($inside, 2)) 
     asind(nth($d, 2)/nth($inside, 3));
$tx: 0 
     .92*nth($side, 2)*(1 - nth($d, 1)/nth($inside, 2))/2 + nth($d, 1) 
     .98*nth($side, 3)*(1 - nth($d, 2)/nth($inside, 3))/2 + nth($d, 2);
$basec: #38525a;

* { margin: 0; transform-style: preserve-3d; }

html {
  overflow: hidden;
  height: 100%;
  perspective: 20em;
  background: dimgrey;
  color: darken($basec, 20%);
  &:before {
    position: absolute;
    top: -75%; right: -95%; bottom: -120%; left: -95%;
    transform: translateZ(-$l) rotateX(-30deg);
    background: 
      linear-gradient(to right bottom, 
                      transparent 49%, #b8b6ad 49%, 
                      #b8b6ad 51%, transparent 51%),
      linear-gradient(to left bottom, 
                      transparent 49%, #b8b6ad 49%, 
                      #b8b6ad 51%, transparent 51%),
      linear-gradient(#394a5a, #d6a2b0,  white);
    background-size: $l/4.5 $l/8, $l/4.5 $l/8, 100% 100%;
    content: '';
  }
  &:after {
    position: absolute;
    top: 56%; right: 0; bottom: 0; left: 0;
    background: linear-gradient(0deg, 
                                white, rgba(255, 255, 255, 0)) 
                no-repeat;
    content: '';
  }
}
body {
  height: 100%;
  &:before {
    position: absolute;
    z-index: -1;
    bottom: 56%; left: 53%;
    width: .25em; height: .25em;
    border-radius: 50%;
    transform: translateZ($l/sqrt(2));
    box-shadow: 0 0 $l/2 $l/4 lemonchiffon;
    background: rgba(white, .8);
    animation: pulse 1s ease-in-out infinite alternate;
    content: '';
  }
}
@keyframes pulse { to { box-shadow: 0 0 $l $l/2 white; } }
.shape, .shape *, .shape *:before, .shape *:after {
  position: absolute;
  top: 50%; left: 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  opacity: 1;
}
.shape {
  padding: 0;
  height: $l;
  list-style: none;
  transform: translateY(-$l) rotateY(40deg);
  animation: shiftall 1s ease-in-out infinite alternate;
}
@keyframes shiftall {
  to { transform: translateY(-7*$l/8) rotateY(40deg); }
}
.pyramid {
  &:last-child {
    transform: translateY($l/16) scaleY(-1);
    animation: shiftlow 1s ease-in-out infinite alternate;
  }
}
.face {
  overflow: hidden;
  z-index: -1;
  box-shadow: -1px 0;
  @for $i from 0 to $layers*$sides {
    &:nth-child(#{$i + 1}) {
      $idx: $i%$layers + 1;
      $cd: nth($d, $idx);
      $cside: nth($side, $idx);
      $crax: nth($rax, $idx);
      $cav: nth($av, $idx);
      $csa: nth($sa, $idx);
      $ctx: nth($tx, $idx);
      margin: -$cside/2;
      width: $cside; height: $cside;
      transform: rotateY(#{(floor($i/$layers)%4)*90}deg) 
        translateZ($cd) 
        rotateY(#{($i%$layers)%2*180}deg) 
        rotateX(#{pow(-1, ($i%$layers)%2)*$crax}deg) 
        rotate(#{90 - $cav/2}deg) 
        skewX(#{90 - $cav}deg) scaleY(sin(rad($cav)));
      &:before, &:after {
        background: lighten($basec, $idx*5%);
      }
      &:before {
        transform: scaleY(1/sin(rad($cav))) 
          skewX(#{$cav - 90}deg) 
          rotate(#{$cav/2 - 90}deg) 
          translate(-$ctx, -$cside/2) 
          skewX(#{-$csa}deg);
      }
      &:after {
        transform: scaleY(1/sin(rad($cav))) 
          skewX(#{$cav - 90}deg) 
          rotate(#{$cav/2 - 90}deg) 
          translate($ctx, -$cside/2) 
          skewX(#{$csa}deg);
      }
    }
  }
  &:last-child {
    $sh: ();
    overflow: visible;
    z-index: 1;
    margin: -3*$l/8;
    width: 3*$l/4; height: 3*$l/4;
    transform: rotateX(-90deg);
    @for $i from 0 to 4 {
      $sh: $sh, 
        pow(-1, floor($i/2))*3*$l/8 pow(-1, $i)*3*$l/8 
        0 (-$l/4) $basec;
    }
    box-shadow: $sh;
    background: $basec;
    &:after {
      top: 0%; left: 0%;
      margin: -$l/8;
      width: $l/4; height: $l/4;
      background: $basec;
      content: '';
    }
  }
  &:before, &:after {
    margin: inherit;
    width: inherit; height: inherit;
    content: '';
  }
}
@keyframes shiftlow {
  to { transform: translateY($l/8) scaleY(-1); }
}