$parts: 9; 
$slices: $parts*4; 
$radius: 300px;
$circ: 2*$radius*pi();
$size: $circ/$slices;
$height: $size;
$bgh: $size*$parts*2;
$bgw: $circ;

$dur: 6s;
$color-deg: 30deg;


body {
  background: #333;
  overflow: hidden;
}

.pane {
  height: $size*$parts*2;
  width: $size*$parts*2;
  margin: $size*$parts/-1;
  perspective: 700px;
  transform: scale(0.5);
  filter: contrast(3);

  &, div, div:before {
    position: absolute;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    transform-style: preserve-3d;
    visibility: hidden;
    backface-visibility: hidden;
  }
  
 
  .sphere {
    height: 100%;
    width: 100%;
    margin: -50%;
    transform: 
      rotate3d(-1,0,0,45deg)
      rotate3d(0,-1,0,45deg);
  }
  
  .slice {
    height: ceil($size*$parts*2);
    width: ceil($size);
    margin: ceil($size*$parts)/-1 round($size/-2);
    
    .part:before, .side:before {
      background-color: 
            hsla(
              $color-deg, 
              100%, 
              80%, 
              0.99); 
      background-image:
          linear-gradient(to right,
            hsla($color-deg - 20,60%,60%,0.4),
            hsla($color-deg - 10,60%,40%,0.5),
            hsla($color-deg,     60%,30%,0.8) 25%, 
            hsla($color-deg - 20,60%,20%,0.8),
            hsla($color-deg,     60%,30%,0.8) 75%,
            hsla($color-deg - 10,60%,40%,0.5),
            hsla($color-deg - 20,60%,60%,0.4));  
        background-size: $circ $size;
    }

    @for $i from 0 to $slices {
      &:nth-child(#{$i + 1}) {
        transform: 
          rotatey(360deg/$slices*$i)
          translatez($radius);
        
        .side:nth-child(1) {
          .part:before, &:before {
            background-position: $size*$i/-1 + $size 0;
          }
        }
        .side:nth-child(2) {
          .part:before, &:before {
            background-position: $size*$i 0; 
          }
        }
      }
    }
  }
  .side {
    width: $size;
    height: $size/2;
    margin: round($size/-4) round($size/-2);

   &:before {
      top: 0; right: 0; bottom: 0; left: 0;
      visibility: visible;
      content: ''; 
      $triangle: AAS(
      90deg - 90deg/$parts*1, 
      90deg, 
      $height/1px);
    }
    &:nth-child(1) {
      margin: round($size/4) round($size/-2);
    }
    &:nth-child(2) {
      transform: rotate(180deg); 
    }
  }

  .part {

    top: 50%;
    width: ceil($size);
    height: $height;
    margin: 0 ceil($size/-2);
    transform-origin: 50% 0%;
    transform: rotatex(-90deg/$parts);
    //visibility: visible;
    
    $triangle: AAS(
      90deg - 90deg/$parts*1, 
      90deg, 
      $height/1px);
    $n: $radius - map-get($triangle, b);
    $s: 2*$n*pi()/$slices;
    $c: ($size - $s)/2;    
    $size: ceil($s);    

       &:before {
        clip-path: polygon(
          0 0, 
          floor($c) 100%,
          ceil($s + $c) 100%, 
          100% 0,
          0 0);
        top: 0; right: 0; bottom: 0; left: 0;
        visibility: visible;
        content: ''; 

      }   
    .part {
      top: 100%; 
    }
    $sel: '';
    @for $i from 1 to ($parts - 1)  {
      $sel: $sel + ' .part';
      #{$sel} {
        width: ceil($s);
        margin: 0 ceil($s/-2);
        $triangle: AAS(
            90deg - 90deg/$parts*($i + 1), 
            90deg, 
            $height/1px);
        $n: $n - map-get($triangle, b);
        $s: 2*$n*pi()/$slices;
        $c: ($size - $s)/2;    
        $size: ceil($s); 
        
        &:before { 
            clip-path: polygon(
                0 0,
                floor($c) 100%,
                ceil($s + $c) 100%,
                100% 0,
                0 0);
        }
      }
    }
  } 
}