$space: 100;
$base: 1300px;

body{
  background: #000;
  display: flex;
  height: 100vh;
  font-family:Pacifico;
  overflow:hidden;
  color:white;
  font-size:100px;
}
#circle{
  width: $base;
  height: $base;
  background: #920012;
  position:fixed;
  top: 50%;
  left: 50%;
  transform:scale(0%);
  margin-left: -$base/2;
  margin-top: -$base/2;
  border-radius: 50%;
  box-shadow: inset 5px 5px $space+px #000;
}
i{
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background: rgba(255,0,0,.2);
  
  @for $i from 1 through 5 {
    &:nth-child(#{$i}){
      width: $base - $space*2*$i;
      height: $base - $space*2*$i;
      margin: (-($base - $space*2*$i)/2) 0 0 (-($base - $space*2*$i)/2);
      transform:scale(0%);
      background:rgba(216,94,27,.2);
      box-shadow: inset 5px 5px 40px black;
      animation:circin 0.5s linear $i*50+ms forwards;
    }
  }

 &:nth-child(5){
   background:#0e2d52;
 }
}



.char {
  height: 500px;
  position: absolute;
  width: 0px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
  opacity:0;

  &:nth-child(1) {
    transform: rotate(-45deg);
  }
  &:nth-child(2) {
    transform: rotate(-39deg);
  }
  &:nth-child(3) {
    transform: rotate(-32deg);
  }
  &:nth-child(4) {
    transform: rotate(-26deg);
  }
  &:nth-child(5) {
    transform: rotate(-20deg);
  }
  &:nth-child(6){
    transform: rotate(-21deg);
  }
  &:nth-child(7){
    transform: rotate(-10deg);
  }
  &:nth-child(8){
    transform: rotate(-4deg);
  }
  &:nth-child(9){
    transform: rotate(0deg);
  }
  &:nth-child(10){
    transform: rotate(8deg);
  }
  &:nth-child(11){
    transform: rotate(16deg);
  }
  &:nth-child(12){
    transform: rotate(21deg);
  }
  &:nth-child(13){
    transform: rotate(25deg);
  }
  &:nth-child(14){
    transform: rotate(31deg);
  }
  &:nth-child(15){
    transform: rotate(37deg);
  }
}

@for $j from 1 through 15{
  .char:nth-child(#{$j}){
    animation: fadein 0.5s linear 1+$j*0.2+s forwards;
  }
}

#text{
  z-index:10;
  width:500px;
  text-shadow: 5px 5px $space+px #000;
  left:50%;
  top:33%;
  position:absolute;
}

@keyframes fadein{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes bounce{
  0%{top:1000px}
  80%{top:550px}
  100%{top:580px}
}
@keyframes circin{
  0%{transform:scale(0)}
  90%{transform:scale(120%)}
  100%{transform:scale(100%)}
}

#noreally{
  font-family:Montserrat;
  color: #eccc1b;
  width:100%;
  position:absolute;
  text-align:center;
  text-transform:uppercase;
  font-size:70px;
  z-index:10;
  bottom:0;
  animation: fadein 1s linear 6s forwards, bounce 1s 6s forwards;
  opacity:0;
}