/* config */

@camera-extend: 20%;

@hull-width: 350px;

@cruising-move-radius: 5px;
@cruising-nose-tilt: 6deg;
@cruising-move-duration: 1.5s;
@cruising-tilt-duration: 1s;
@cruising-exhaust-duration: 500ms;
@cruising-exhaust-scalediff: 0.05;

@excited-move-radius: 10px;
@excited-nose-tilt: 16deg;
@excited-move-duration: 500ms;
@excited-tilt-duration: 100ms;
@excited-exhaust-duration: 150ms;
@excited-exhaust-scalediff: 0.5;
@excited-exhaust-scalebase: 1.2;

@hull-w: 1760;
@hull-h: 1240;
@exhaust-w: 1020;
@exhaust-h: 530;

@hull-height: @hull-width * @hull-h / @hull-w;
@exhaust-width: @exhaust-w / @hull-w * @hull-width;
@exhaust-height: @exhaust-width * @exhaust-h / @exhaust-w;

/* general */

body {
  background-color: #52617d;
  overflow: hidden;
}
img, div {
  position: absolute;
}

.camera {
  left: -@camera-extend;
  top: -@camera-extend;
  width: 100 + 2 * @camera-extend;
  height: 100 + 2 * @camera-extend;

  // FIXME: rotation should depend on the market
  transform: rotateZ(-25deg);
}

.spaceship {
  left: 50%;
  top: 50%;
  width: @hull-width + @exhaust-width;
  height: @hull-height;
  margin-left: -(@hull-width + @exhaust-width) / 2;
  margin-top: -@hull-height / 2;
  z-index: 10;

  .rotate-box {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .exhaust {
    top: 50%;
    right: @hull-width * 0.815;
    width: @exhaust-width;
    height: @exhaust-height;
    margin-top: -@exhaust-height / 2;
  }
  .hull {
    right: 0;
    width: @hull-width;
    height: @hull-height;
  }
}

.stars {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.moon {
  width: 100px;
  right: 50px;
  top: 50px;
}

.dashboard {
  width: 500px;
  right: 0;
  bottom: 0;
}

.price, .cap {
  font: normal 14px courier new;
  right: 15px;
  bottom: 127px;
  width: 109px;
  height: 20px;
}

.cap {
  bottom: 50px;
}

/* Cruising state */

.cruising {
  .spaceship {
    animation: cruising-movement @cruising-move-duration linear 0s infinite;

    .rotate-box {
      animation: cruising-rotation @cruising-tilt-duration linear 0s infinite alternate;
    }
  }

  .exhaust {
    animation: cruising-exhaust @cruising-exhaust-duration linear 0s infinite alternate;
  }
}

@keyframes cruising-movement {
  from { transform: rotateZ(0) translateX(@cruising-move-radius) rotateZ(0) }
  to   { transform: rotateZ(360deg) translateX(@cruising-move-radius) rotateZ(-360deg) }
}

@keyframes cruising-rotation {
  from { transform: rotateZ(-@cruising-nose-tilt / 2) }
  to   { transform: rotateZ(@cruising-nose-tilt / 2) }
}

@keyframes cruising-exhaust {
  from { width: @exhaust-width }
  to   { width: (1 + @cruising-exhaust-scalediff) * @exhaust-width }
}

/* Excited state */

.excited .spaceship {
  animation: excited-movement @excited-move-duration linear 0s infinite;

  .rotate-box {
    animation: excited-rotation @excited-tilt-duration linear 0s infinite alternate;
  }

  .exhaust {
    animation: excited-exhaust @excited-exhaust-duration linear 0s infinite alternate;
  }
}

@keyframes excited-movement {
  from { transform: rotateZ(0) translateX(@excited-move-radius) rotateZ(0) }
  to   { transform: rotateZ(360deg) translateX(@excited-move-radius) rotateZ(-360deg) }
}

@keyframes excited-rotation {
  from { transform: rotateZ(-@excited-nose-tilt / 2) }
  to   { transform: rotateZ(@excited-nose-tilt / 2) }
}

@keyframes excited-exhaust {
  @w: @excited-exhaust-scalebase * @exhaust-width;
  from { width: @w }
  to   { width: (1 + @excited-exhaust-scalediff) * @w }
}
