@import "compass/css3";

$n: 3;
$α: 360deg/$n;
$β: random($α/1deg)*1deg;

html { overflow: hidden; }

body { margin: 0; }

svg {
  display: block;
  margin: 0 auto;
  width: 100vmin; height: 100vmin;
  background: #333;
}

#run ~ svg use {
  animation-play-state: paused;
}

@for $i from 1 through $n {
  $γ: $β + ($i - 1)*$α;
  
  use:nth-of-type(#{$i}) {
    fill: hsl($γ, 100%, 80%);
    animation: ani-#{$i} 4s linear infinite;
  }
  
  @keyframes ani-#{$i} {
    0% { transform: scale(0); }
    25% { transform: scale(1); }
    50% { transform: rotate($γ); }
    75% {
      transform: rotate($γ) 
        translate(13em) scale(.2);
    }
    83% {
      transform: rotate($γ) 
        translate(13em) scale(.2) 
        skewY(30deg) scaleX(.866);
    }
    91% {
      transform: rotate($γ) 
        translate(13em) scale(.2) 
        skewY(60deg) scaleX(.5);
    }
    100% {
      transform: rotate($γ) 
        translate(13em) scale(.2) 
        skewY(90deg) scaleX(0);
    }
  }
}

#run {
  position: absolute;
  left: -100vmax;
}

label[for='run'] {
  position: absolute;
  top: 50%; left: 50%;
  margin-top: 2em;
  border: solid 50vmin;
  width: 2em; height: 2em;
  transform: translate(-50%, -50%);
  color: transparent;
  text-align: center;
  cursor: pointer;
  transition: .7s;
  
  &:before {
    position: absolute;
    left: 50%;
    width: 3.5em; height: 4em;
    transform: translate(-50%, -100%);
    background: 
      linear-gradient(to right bottom, 
        #fff 49%, transparent 51%) 0 2em, 
      linear-gradient(to right top, 
        #fff 49%, transparent 51%);
    background-repeat: no-repeat;
    background-size: 100% 50%;
    content: '';
  }
}

#run:checked ~ svg use {
  animation-play-state: running;
}

#run:checked ~ label { opacity: .001; }