.grain
.intro
  .center
    .core
    .outer_one
      -(1..36).each do
        .outer_one__piece
    .outer_two
      -(1..36).each do
        .outer_two__piece
    .outer_three
      -(1..36).each do
        .outer_three__piece
    .outer_four
      -(1..36).each do
        .outer_four__piece
    .outer_five
      -(1..36).each do
        .outer_five__piece
    .pieces
      .future_ui__piece
        %span Warp drive
        .line
        .tip
          Yes, commander!
      .future_ui__piece
        %span Teleport
        .line
        .tip
          Beam me up!
      .future_ui__piece
        %span Fusion core
        .line
        .tip
          Engineering!
      .future_ui__piece
        %span Laser target
        .line
        .tip
          Charge laz0rs!
      .future_ui__piece
        %span Shields
        .line
        .tip
          Status report!
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank
      .future_ui__piece.blank

/* Variables */

// Core
$core_width: 50px;
$core_color:#de0b46;
$core_glow:0px 0px 70px 20px #de0b46;

// Outer 1
$outer_one_offset: 120px;
$outer_one_width: 10px;
$outer_one_height: 30px;
$outer_one_color: #de0b46;
$outer_one_glow: 0px 0px 20px 0px #de0b46;

// Outer 2
$outer_two_offset: 290px;
$outer_two_width: 28px;
$outer_two_height: 5px;
$outer_two_color: #de0b46;
$outer_two_glow: 0px 0px 20px 0px #de0b46;

// Outer 3
$outer_three_offset: 440px;
$outer_three_width: 55px;
$outer_three_height: 5px;
$outer_three_color: #55E2F9;
$outer_three_glow: 0px 0px 20px 0px #55E2F9;

// Outer 4
$outer_four_offset: 440px;
$outer_four_width: 6px;
$outer_four_height: 5px;
$outer_four_color: #de0b46;
$outer_four_glow: 0px 0px 20px 0px #de0b46;

// Outer 5
$outer_five_offset: 410px;

// Menu items
$menu_offset: 540px;
$menu_height: 20px;
$menu_color: transparent;
$menu_glow: 0px 0px 25px rgba(222, 11, 70, 0.27);

/* Placeholders */

%center{
  left:0;
  right:0;
  top:50%;
  position:absolute;
  margin:auto;
  transform:translateY(-50%);
}

%decal{
  position:absolute;
  width:$core_width;
  height:$core_width;
  left:50%;
}

%fade_loop{
  @for $i from 1 through 36{
    &:nth-of-type(#{$i}){
      animation:fade 5s ($i/10 + 0s) infinite;
    }
  }
}

%fade_loop_alt{
  @for $i from 1 through 36{
    &:nth-of-type(#{$i}){
      animation:fade 7s ($i/10 + 0s) infinite;
    }
  }
}

%circ_loop{
  position: absolute;
  @for $i from 1 through 36{
    &:nth-of-type(#{$i}){
      border-radius:2px;
      transform:rotateZ($i*10 + (0deg));
    }
  }
}

%circ_loop_quart{
  position: absolute;
  @for $i from 1 through 36{
    &:nth-of-type(#{$i}){
      border-radius:2px;
      transform:rotateZ($i*4 + (0deg));
    }
  }
}

%circ_loop_quart_alt{
  position: absolute;
  @for $i from 1 through 36{
    &:nth-of-type(#{$i}){
      border-radius:2px;
      transform:rotateZ($i*4 + (0deg) - 180);
    }
  }
}

/* Styles */

.intro{

}
body{
  height:100vh;
  animation:intro_box 1s 1s forwards;
  opacity:0;
  perspective-origin: 50% -10%;
  margin:0;
  padding:0;
  font-family:montserrat;
  perspective:800;
  background: radial-gradient(ellipse at top left, rgba(222, 11, 70, 0.26) -160%, rgba(255, 255, 255, 0) 103%), -webkit-radial-gradient(center, ellipse cover, #0C1019 0%, #0B0B0E 100%);
  overflow:hidden;
  .grain{
    transform:scale(1) !important;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/overlay.png");
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 100;
  pointer-events: none;
  top: 0;
  opacity: 1;
  bottom: 0;
}
  .center{
    @extend %center;
    transform: translateY(-21px) translateZ(-870px) rotateX(69deg) rotateY(-26deg) rotatez(-647deg) scale(0.9);
    height:$core_width;
    width:$core_width;
    animation:wiggle 20s infinite linear;
    .core{
      width:$core_width;
      height:$core_width;
      border-radius:$core_width;
      background:$core_color;
      box-shadow:$core_glow;
    }
    .outer_one{
      @extend %decal;
      transform:translateX(-$outer_one_offset) translateY(-50%);
        &__piece{
          width: $outer_one_width;
          height: $outer_one_height;
          background: $outer_one_color;
          box-shadow:$outer_one_glow;
          transform-origin: $outer_one_offset 0px;
          @extend %circ_loop;
          } 
    }
    .outer_two{
      @extend %decal;
      transform:translateX(-$outer_two_offset) translateY(-50%);
        &__piece{
          width: $outer_two_width;
          height: $outer_two_height;
          background: $outer_two_color;
          box-shadow:$outer_two_glow;
          transform-origin: $outer_two_offset 0px;
          @extend %circ_loop;
          @extend %fade_loop;
          } 
    }
    .outer_three{
      @extend %decal;
      transform:translateX(-$outer_three_offset) translateY(-50%);
        &__piece{
          width: $outer_three_width;
          height: $outer_three_height;
          background: $outer_three_color;
          box-shadow:$outer_three_glow;
          transform-origin: $outer_three_offset 0px;
          @extend %circ_loop_quart;
          @extend %fade_loop;
          } 
    }
    .outer_four{
      @extend %decal;
      transform:translateX(-$outer_four_offset) translateY(-50%);
        &__piece{
          width: $outer_four_width;
          height: $outer_four_height;
          background: $outer_four_color;
          box-shadow:$outer_four_glow;
          transform-origin: $outer_four_offset 0px;
          @extend %circ_loop_quart_alt;
          @extend %fade_loop_alt;
          } 
    }
    .outer_five{
      @extend %decal;
      transform:translateX(-$outer_five_offset) translateY(-50%);
        &__piece{
          width: $outer_four_width;
          height: $outer_four_height;
          background: $outer_four_color;
          box-shadow:$outer_four_glow;
          transform-origin: $outer_five_offset 0px;
          @extend %circ_loop_quart_alt;
          @extend %fade_loop_alt;
          } 
    }
    .pieces{
      @extend %decal;
      transform:translateX($menu_offset) translateY(-50%);
      .tip{
        font-size: 17px;
        position: absolute;
        left: 105%;
        opacity:0;
        transition:all .2s .3s;
        font-weight: 400;
        color: #85DFE4;
        width: 100%;
        top: 70px;
      }
      span{
        position: absolute;
        top: 19px;
        width: 270px;
        LEFT: 34PX;
        transform: translateZ(-770px) rotateZ(0deg);
        transition:all .2s .1s;
      }
      .line{
            width: 0px;
    height: 5px;
    left: -547px;
    transform: rotatez(4deg);
    top: 17px;
    background: #DE0B46;
    position: absolute;
        opacity:0;
      }
      .future_ui__piece{
        border: 3px solid #DE0B46;
        position: absolute;
        font-weight:900;
        padding:30px;
        font-size:30px;
        box-shadow: 0px 0px 25px rgba(222, 11, 70, 0.27);
        transform-style: preserve-3d;
        transition: all 1s .1s;
        color: white;
        text-align: left;
        @for $i from 1 through 36{
          &:nth-of-type(#{$i}){
            transform:rotateZ($i*10 + (0deg) - 55) rotateY(0deg);
            width: 220 + random(73) + px;
            &:hover{
              cursor:pointer;
              color:white;
              animation:blink .4s .4s;
              background:#DE0B46;
              transform:rotate($i*10 + (0deg) - 55) translatex(20px);
              box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
              span{
                position: absolute;
                top: 12px;
                width: 270px;
                text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
                left:240px;
                transform: translateZ(100px) rotateZ(0deg);                
              }
              .tip{
                opacity:1;
                left: 110%;
              }
              .line{
                opacity:1;
                width:547px;
                transition:all .4s .2s;
              }
            }
          }
        }
        height: $menu_height;
        background: $menu_color;
        color:white;
        border-radius:100px !important;
        box-shadow:$menu_glow;
        transform-origin: - $menu_offset 0px;
        @extend %circ_loop;
      } 
      .blank{
        opacity:0.1;
        background:none;
        pointer-events:none;
        box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.27);
        border:6px solid #3D4B6D !important;
      }
    }
  }
}

/* animations */

@keyframes spin{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}

@keyframes fade{
  0%{opacity:0;}
  50%{opacity:1;}
  100%{opacity:0;}
}

@keyframes blink{
  0%{opacity:1}
  25%{opacity:0}
  50%{opacity:1}
  75%{opacity:0}
  100%{opacity:1}
}
@keyframes in{
  0%{opacity:0}
  100%{opacity:1}
}
@keyframes inalt{
  0%{opacity:0}
  50%{opacity:1}
  100%{opacity:0}
}
@keyframes wiggle{
  0%{transform: translateY(0) translateZ(-840px) rotateX(64deg) rotateY(-21deg) rotatez(80deg) scale(0.9);}
  25%{transform: translateY(0) translateZ(-820px) rotateX(66deg) rotateY(-24deg) rotatez(84deg) scale(0.9);}
  50%{transform: translateY(0) translateZ(-840px) rotateX(62deg) rotateY(-23deg) rotatez(82deg) scale(0.9);}
  75%{transform: translateY(0) translateZ(-840px) rotateX(63deg) rotateY(-19deg) rotatez(78deg) scale(0.9);}
  100%{transform: translateY(0) translateZ(-840px) rotateX(64deg) rotateY(-21deg) rotatez(80deg) scale(0.9);}
}

@keyframes intro_box{
  0%{opacity:0;transform:scale(0)}
  20%{opacity:1;transform:scale(1.2)}
  40%{transform:scale(0.89)}
  60%{transform:scale(1.04)}
  80%{transform:scale(0.98)}
  100%{opacity:1;transform:scale(1)}
}

// Chrome only for the tme being!