.loader {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.loader span {
  position: relative;
  display: block;
  width: 400px;
  height: 2px;
}

.wrapper {
  width: 100%;
  height: 100%;
}

/* Lines */
.line-1 { left: 82vw; background: rgba(255, 255, 255, 0.15485); animation: line-1 3s linear infinite; }
.line-2 { left: 41vw; background: rgba(255, 255, 255, 0.23651); animation: line-2 3s linear infinite; }
.line-3 { left: 63vw; background: rgba(255, 255, 255, 0.19654); animation: line-3 4s linear infinite; }
.line-4 { left: 68vw; background: rgba(255, 255, 255, 0.17423); animation: line-4 3s linear infinite; }
.line-5 { left: 95vw; background: rgba(255, 255, 255, 0.24523); animation: line-5 2s linear infinite; }
.line-6 { left: 95vw; background: rgba(255, 255, 255, 0.12255); animation: line-6 3s linear infinite; }
.line-7 { left: 24vw; background: rgba(255, 255, 255, 0.25625); animation: line-7 4s linear infinite; }
.line-8 { left: 7vw; background: rgba(255, 255, 255, 0.16228); animation: line-8 4s linear infinite; }
.line-9 { left: 70vw; background: rgba(255, 255, 255, 0.15818); animation: line-9 3s linear infinite; }
.line-10 { left: 11vw; background: rgba(255, 255, 255, 0.25263); animation: line-10 3s linear infinite; }
.line-11 { left: 55vw; background: rgba(255, 255, 255, 0.18); animation: line-11 3.5s linear infinite; }
.line-12 { left: 33vw; background: rgba(255, 255, 255, 0.21); animation: line-12 2.5s linear infinite; }
.line-13 { left: 78vw; background: rgba(255, 255, 255, 0.14); animation: line-13 4.5s linear infinite; }
.line-14 { left: 15vw; background: rgba(255, 255, 255, 0.22); animation: line-14 3s linear infinite; }
.line-15 { left: 88vw; background: rgba(255, 255, 255, 0.19); animation: line-15 2.8s linear infinite; }
.line-16 { left: 50vw; background: rgba(255, 255, 255, 0.16); animation: line-16 3.2s linear infinite; }
.line-17 { left: 22vw; background: rgba(255, 255, 255, 0.24); animation: line-17 2.7s linear infinite; }
.line-18 { left: 72vw; background: rgba(255, 255, 255, 0.13); animation: line-18 3.8s linear infinite; }
.line-19 { left: 5vw; background: rgba(255, 255, 255, 0.2); animation: line-19 4.2s linear infinite; }
.line-20 { left: 60vw; background: rgba(255, 255, 255, 0.17); animation: line-20 2.3s linear infinite; }
.line-21 { left: 38vw; background: rgba(255, 255, 255, 0.23); animation: line-21 3.6s linear infinite; }
.line-22 { left: 85vw; background: rgba(255, 255, 255, 0.15); animation: line-22 2.9s linear infinite; }
.line-23 { left: 18vw; background: rgba(255, 255, 255, 0.26); animation: line-23 3.4s linear infinite; }
.line-24 { left: 92vw; background: rgba(255, 255, 255, 0.12); animation: line-24 4s linear infinite; }
.line-25 { left: 48vw; background: rgba(255, 255, 255, 0.21); animation: line-25 2.6s linear infinite; }
.line-26 { left: 28vw; background: rgba(255, 255, 255, 0.18); animation: line-26 3.1s linear infinite; }
.line-27 { left: 75vw; background: rgba(255, 255, 255, 0.14); animation: line-27 3.7s linear infinite; }
.line-28 { left: 3vw; background: rgba(255, 255, 255, 0.25); animation: line-28 2.4s linear infinite; }
.line-29 { left: 58vw; background: rgba(255, 255, 255, 0.19); animation: line-29 4.3s linear infinite; }
.line-30 { left: 45vw; background: rgba(255, 255, 255, 0.22); animation: line-30 2.2s linear infinite; }

/* Line Animations */
@keyframes line-1 { 0% { transform: rotate(-45deg) translate(400px, 48px); } 100% { transform: rotate(-45deg) translate(-460%, 48px); } }
@keyframes line-2 { 0% { transform: rotate(-45deg) translate(400px, 200px); } 100% { transform: rotate(-45deg) translate(-352%, 200px); } }
@keyframes line-3 { 0% { transform: rotate(-45deg) translate(400px, 78px); } 100% { transform: rotate(-45deg) translate(-348%, 78px); } }
@keyframes line-4 { 0% { transform: rotate(-45deg) translate(400px, 129px); } 100% { transform: rotate(-45deg) translate(-402%, 129px); } }
@keyframes line-5 { 0% { transform: rotate(-45deg) translate(400px, 58px); } 100% { transform: rotate(-45deg) translate(-399%, 58px); } }
@keyframes line-6 { 0% { transform: rotate(-45deg) translate(400px, 56px); } 100% { transform: rotate(-45deg) translate(-358%, 56px); } }
@keyframes line-7 { 0% { transform: rotate(-45deg) translate(400px, 500px); } 100% { transform: rotate(-45deg) translate(-420%, 500px); } }
@keyframes line-8 { 0% { transform: rotate(-45deg) translate(400px, 59px); } 100% { transform: rotate(-45deg) translate(-450%, 59px); } }
@keyframes line-9 { 0% { transform: rotate(-45deg) translate(400px, 55px); } 100% { transform: rotate(-45deg) translate(-325%, 55px); } }
@keyframes line-10 { 0% { transform: rotate(-45deg) translate(400px, 364px); } 100% { transform: rotate(-45deg) translate(-301%, 364px); } }
@keyframes line-11 { 0% { transform: rotate(-45deg) translate(400px, 150px); } 100% { transform: rotate(-45deg) translate(-380%, 150px); } }
@keyframes line-12 { 0% { transform: rotate(-45deg) translate(400px, 280px); } 100% { transform: rotate(-45deg) translate(-340%, 280px); } }
@keyframes line-13 { 0% { transform: rotate(-45deg) translate(400px, 95px); } 100% { transform: rotate(-45deg) translate(-420%, 95px); } }
@keyframes line-14 { 0% { transform: rotate(-45deg) translate(400px, 420px); } 100% { transform: rotate(-45deg) translate(-360%, 420px); } }
@keyframes line-15 { 0% { transform: rotate(-45deg) translate(400px, 180px); } 100% { transform: rotate(-45deg) translate(-390%, 180px); } }
@keyframes line-16 { 0% { transform: rotate(-45deg) translate(400px, 320px); } 100% { transform: rotate(-45deg) translate(-370%, 320px); } }
@keyframes line-17 { 0% { transform: rotate(-45deg) translate(400px, 450px); } 100% { transform: rotate(-45deg) translate(-410%, 450px); } }
@keyframes line-18 { 0% { transform: rotate(-45deg) translate(400px, 110px); } 100% { transform: rotate(-45deg) translate(-330%, 110px); } }
@keyframes line-19 { 0% { transform: rotate(-45deg) translate(400px, 520px); } 100% { transform: rotate(-45deg) translate(-440%, 520px); } }
@keyframes line-20 { 0% { transform: rotate(-45deg) translate(400px, 70px); } 100% { transform: rotate(-45deg) translate(-350%, 70px); } }
@keyframes line-21 { 0% { transform: rotate(-45deg) translate(400px, 240px); } 100% { transform: rotate(-45deg) translate(-380%, 240px); } }
@keyframes line-22 { 0% { transform: rotate(-45deg) translate(400px, 380px); } 100% { transform: rotate(-45deg) translate(-400%, 380px); } }
@keyframes line-23 { 0% { transform: rotate(-45deg) translate(400px, 160px); } 100% { transform: rotate(-45deg) translate(-360%, 160px); } }
@keyframes line-24 { 0% { transform: rotate(-45deg) translate(400px, 480px); } 100% { transform: rotate(-45deg) translate(-430%, 480px); } }
@keyframes line-25 { 0% { transform: rotate(-45deg) translate(400px, 300px); } 100% { transform: rotate(-45deg) translate(-355%, 300px); } }
@keyframes line-26 { 0% { transform: rotate(-45deg) translate(400px, 220px); } 100% { transform: rotate(-45deg) translate(-375%, 220px); } }
@keyframes line-27 { 0% { transform: rotate(-45deg) translate(400px, 550px); } 100% { transform: rotate(-45deg) translate(-445%, 550px); } }
@keyframes line-28 { 0% { transform: rotate(-45deg) translate(400px, 40px); } 100% { transform: rotate(-45deg) translate(-320%, 40px); } }
@keyframes line-29 { 0% { transform: rotate(-45deg) translate(400px, 400px); } 100% { transform: rotate(-45deg) translate(-395%, 400px); } }
@keyframes line-30 { 0% { transform: rotate(-45deg) translate(400px, 580px); } 100% { transform: rotate(-45deg) translate(-460%, 580px); } }

/* Spaceship */
#center {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50vw;
  top: 50vh;
  transform: rotate(45deg);
  animation: fly 6s infinite linear;
  z-index: 10;
}

#spaceship {
  position: inherit;
  left: 50%;
  margin-left: -45px;
  height: 90px;
  width: 65px;
  background: #f21840;
  border-radius: 100px 100px 20px 20px;
  z-index: 3;
}

#window {
  position: inherit;
  margin-top: 35px;
  margin-left: 35px;
  height: 20px;
  width: 20px;
  background: #8a8a8a;
  border-radius: 50%;
  border: 9px solid #8a8a8a;
  animation: window 4s infinite linear;
}

#left-wing {
  top: 50%;
  left: 50%;
  margin-left: 24px;
  margin-top: -5px;
  position: inherit;
  height: 0;
  width: 10px;
  border-bottom: 60px solid #ff919e;
  border-left: 0px solid transparent;
  border-right: 30px solid transparent;
  animation: from-to 4s infinite linear;
}

#right-wing {
  top: 50%;
  left: 50%;
  margin-left: -75px;
  margin-top: -5px;
  position: inherit;
  height: 0;
  width: 10px;
  border-bottom: 60px solid #ff919e;
  border-left: 30px solid transparent;
  border-right: 0px solid transparent;
  animation: to-from 4s infinite linear;
}

#exhaust {
  left: 50%;
  top: 50%;
  margin-left: -33px;
  margin-top: 20px;
  position: inherit;
  background: #f2b31b;
  width: 40px;
  height: 40px;
  border-radius: 50px 10px 50px 50px;
  transform: rotate(135deg);
}

#tail {
  left: 50%;
  top: 50%;
  margin-left: -31px;
  margin-top: 40px;
  position: inherit;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 100px 17px 0 17px;
  border-color: #f2b31b transparent transparent transparent;
  animation: burn .1s infinite linear;
  z-index: 1;
}

.tail-2 {
  left: 50%;
  top: 50%;
  margin-left: -31px;
  margin-top: 40px;
  position: inherit;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 100px 17px 0 17px;
  border-color: #ede67d transparent transparent transparent;
  animation: burn-2 .1s infinite linear;
  z-index: 2;
}

/* Spaceship Animations */
@keyframes burn {
  0% { border-width: 100px 17px 0 17px; }
  25% { border-width: 100px 17px 0 17px; }
  50% { border-width: 125px 17px 0 17px; }
  75% { border-width: 75px 17px 0 17px; }
  100% { border-width: 100px 17px 0 17px; }
}

@keyframes burn-2 {
  0% { border-width: 50px 17px 0 17px; }
  25% { border-width: 50px 17px 0 17px; }
  50% { border-width: 63px 17px 0 17px; }
  75% { border-width: 38px 17px 0 17px; }
  100% { border-width: 50px 17px 0 17px; }
}

@keyframes from-to {
  0% { margin-left: 19px; width: 10px; border-bottom: 30px solid #cecece; border-right: 15px solid transparent; }
  50% { margin-left: 15px; width: 5px; border-bottom: 30px solid #cecece; border-right: 8px solid transparent; }
  100% { margin-left: 19px; width: 10px; border-bottom: 30px solid #cecece; border-right: 15px solid transparent; }
}

@keyframes to-from {
  0% { margin-left: -63px; width: 15px; border-bottom: 30px solid #cecece; border-left: 8px solid transparent; }
  50% { margin-left: -70px; width: 15px; border-bottom: 30px solid #cecece; border-left: 16px solid transparent; }
  100% { margin-left: -63px; width: 15px; border-bottom: 30px solid #cecece; border-left: 8px solid transparent; }
}

@keyframes window {
  0% { margin-left: 13px; }
  50% { margin-left: 20px; }
  100% { margin-left: 13px; }
}

@keyframes fly {
  0% { left: 50%; top: 50%; }
  20%, 35% { left: 40%; top: 40%; }
  50% { left: 50%; top: 45%; }
  57%, 64% { left: 53%; top: 52%; }
  75%, 85% { left: 58%; top: 65%; }
  100% { left: 50%; top: 50%; }
}

/* Comets - такая же анимация как у линий */
.comet {
  position: relative;
  display: block;
  width: 40px;
  height: 2px;
  background: linear-gradient(to left, rgba(0, 191, 255, 0.9), transparent);
  box-shadow: 0 0 6px 1px rgba(0, 150, 255, 0.5);
}

.comet::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: #00bfff;
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(0, 191, 255, 0.8);
}

.comet-1 { left: 82vw; animation: comet-1 3s linear infinite; }
.comet-2 { left: 41vw; animation: comet-2 3s linear infinite; }
.comet-3 { left: 63vw; animation: comet-3 4s linear infinite; }
.comet-4 { left: 68vw; animation: comet-4 3s linear infinite; }
.comet-5 { left: 95vw; animation: comet-5 2s linear infinite; }
.comet-6 { left: 95vw; animation: comet-6 3s linear infinite; }
.comet-7 { left: 24vw; animation: comet-7 4s linear infinite; }
.comet-8 { left: 7vw; animation: comet-8 4s linear infinite; }
.comet-9 { left: 70vw; animation: comet-9 3s linear infinite; }
.comet-10 { left: 11vw; animation: comet-10 3s linear infinite; }
.comet-11 { left: 55vw; animation: comet-11 3.5s linear infinite; }
.comet-12 { left: 33vw; animation: comet-12 2.5s linear infinite; }
.comet-13 { left: 78vw; animation: comet-13 4.5s linear infinite; }
.comet-14 { left: 15vw; animation: comet-14 3s linear infinite; }
.comet-15 { left: 88vw; animation: comet-15 2.8s linear infinite; }
.comet-16 { left: 50vw; animation: comet-16 3.2s linear infinite; }

/* Comet Animations - такие же как линии */
@keyframes comet-1 { 0% { transform: rotate(-45deg) translate(400px, 48px); } 100% { transform: rotate(-45deg) translate(-460%, 48px); } }
@keyframes comet-2 { 0% { transform: rotate(-45deg) translate(400px, 200px); } 100% { transform: rotate(-45deg) translate(-352%, 200px); } }
@keyframes comet-3 { 0% { transform: rotate(-45deg) translate(400px, 78px); } 100% { transform: rotate(-45deg) translate(-348%, 78px); } }
@keyframes comet-4 { 0% { transform: rotate(-45deg) translate(400px, 129px); } 100% { transform: rotate(-45deg) translate(-402%, 129px); } }
@keyframes comet-5 { 0% { transform: rotate(-45deg) translate(400px, 58px); } 100% { transform: rotate(-45deg) translate(-399%, 58px); } }
@keyframes comet-6 { 0% { transform: rotate(-45deg) translate(400px, 56px); } 100% { transform: rotate(-45deg) translate(-358%, 56px); } }
@keyframes comet-7 { 0% { transform: rotate(-45deg) translate(400px, 500px); } 100% { transform: rotate(-45deg) translate(-420%, 500px); } }
@keyframes comet-8 { 0% { transform: rotate(-45deg) translate(400px, 59px); } 100% { transform: rotate(-45deg) translate(-450%, 59px); } }
@keyframes comet-9 { 0% { transform: rotate(-45deg) translate(400px, 55px); } 100% { transform: rotate(-45deg) translate(-325%, 55px); } }
@keyframes comet-10 { 0% { transform: rotate(-45deg) translate(400px, 364px); } 100% { transform: rotate(-45deg) translate(-301%, 364px); } }
@keyframes comet-11 { 0% { transform: rotate(-45deg) translate(400px, 150px); } 100% { transform: rotate(-45deg) translate(-380%, 150px); } }
@keyframes comet-12 { 0% { transform: rotate(-45deg) translate(400px, 280px); } 100% { transform: rotate(-45deg) translate(-340%, 280px); } }
@keyframes comet-13 { 0% { transform: rotate(-45deg) translate(400px, 95px); } 100% { transform: rotate(-45deg) translate(-420%, 95px); } }
@keyframes comet-14 { 0% { transform: rotate(-45deg) translate(400px, 420px); } 100% { transform: rotate(-45deg) translate(-360%, 420px); } }
@keyframes comet-15 { 0% { transform: rotate(-45deg) translate(400px, 180px); } 100% { transform: rotate(-45deg) translate(-390%, 180px); } }
@keyframes comet-16 { 0% { transform: rotate(-45deg) translate(400px, 320px); } 100% { transform: rotate(-45deg) translate(-370%, 320px); } }