@import 'compass/css3';

$w: .25em; // width of strip
$l: 5em; // length of strip
$n: 5; // number of sides, should match number of nodes in DOM
$m: 32; // number of rings on each torus side
$ratio: 2; // major radius/minor radius

$p: $n*$m; // should match number of nodes in DOM

$ca: 360deg/$n;
$riminor: ($l/2)/tan($ca/2);
$rcminor: ($l/2)/sin($ca/2);

$cam: 360deg/$p;
$rcmajor: $ratio*$rcminor;

@mixin sp($w, $h: $w) {
  margin: if($w == $h, -$w/2, -$h/2 (-$w/2));
  width: $w; height: $h;
}

html, body { height: 100%; }

body {
  overflow: hidden;
  margin: 0;
  perspective: 32em;
  background: dimgrey;
}

.torus, .torus *, .torus :before, .torus :after {
  box-sizing: border-box;
  position: absolute;
  top: 50%; left: 50%;
  transform-style: preserve-3d;
}

.torus { transform: rotateX(-45deg) rotateY(0deg); }

@keyframes rotmaj { 
  to { transform: rotateX(-45deg) rotateY(360deg); }
}

.ring--penta {
  @for $i from 0 to $p {
    $rcurr: $rcmajor/cos($i*$cam - (floor($i/$m) + .5)*$ca);
    &:nth-child(#{$i + 1}) {
      transform: rotateY($i*$cam) 
                 translate($rcurr) 
                 rotate($i*$cam);
    }
  }
}

@keyframes rotmin { to { transform: rotate(360deg); } }

.strip {
  @include sp($w, $l);
  &:before, &:after {
    @include sp($w, $l);
    backface-visibility: hidden;
    transform: rotateY(-90deg);
    content: '';
  }
  &:after {
    transform: rotateY(90deg);
  }
  @for $i from 0 to $n {
    $c: hsl($i*360/$n, 100%, 65%);
    $c1: hsl(($i + 1)*360/$n, 100%, 65%);
    &:nth-child(#{$i + 1}) {
      transform: rotate($i*$ca) translate($riminor);
      &:before { background: rgba($c, .4); }
      &:after { background: linear-gradient($c, $c1); }
    }
  }
}


/* "play animation" button styles */
input[type=checkbox] { display: none }
.btn {
  overflow: hidden;
  position: absolute;
  z-index: 10;
  top: 1em; left: 50%;
  border-radius: .5em;
  box-shadow: 0 1px 0 black, 0 -1px 0 #96d1f8;
  margin: 0 -3.25em;
  opacity: .45;
  background: #65a9d7 linear-gradient(#3e779d, #65a9d7);
  color: white;
  font: 700 italic 1em/2.6 Georgia, serif;
  text-shadow: 0 1px 0 black;
  cursor: pointer;
  transition: .7s;
  &:hover { opacity: 1; }
}
.btn, .btn span { width: 6.5em; height: 2.6em; }
.btn span {
  position: absolute;
  text-align: center;
  transition: .5s;
}
.unchecked { top: 0; }
.checked { top: 100%; }
input[type=checkbox]:checked ~ .btn .unchecked { top: -100%; }
input[type=checkbox]:checked ~ .btn .checked { top: 0; }


/* in case anyone is wondering why I haven't used 
 * `animation-play-state`: Chrome Canary on Win 7 fucks up */
input[type=checkbox]:checked ~ .torus {
  animation: rotmaj 17.43s linear infinite;
}
input[type=checkbox]:checked ~ .torus .rotor {
  animation: rotmin 8.37s linear infinite;
}