.scene
  .background
    .stars
      - for (var i = 0; i < 60; i++)
        .star
    .moon
    .mountains
      - for (var i = 0; i < 4; i++)
        .mountain
    .sea
      - for (var i = 0; i < 30; i++)
        .wave
      .boat
        .sail
        .sail
        .base
  .lighthouse-group
    .land
    .lighthouse-holder
      .shadow
      .lighthouse
      .top
        .light-container
          .light
        .rail
        .middle
        .roof
          .roof-light
        .glow
      .windows
        - for (var i = 0; i < 4; i++)
          .window
      .door
        .stairs

$x-dark: #29284c;
$dark: #4c4b82;
$medium: #717ae1;
$light: #b9befa;
$x-light: #d6d9f6;
$aqua: #75e2fa;
$grey: #9e9ebe;
$yellow: #f7f2b4;
$lightSpeed: 20s;
$boatSpeed: 100s;


html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
* {
  position: absolute;
}
*:before,
*:after {
  content: "";
  position: absolute;
}
.scene {
  width: 100vw;
  height: 100vh;
}
.background {
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  background-color: $x-dark;
  background-image: linear-gradient(
    $x-dark 0%,
    $dark 10%,
    $medium 60%,
    $aqua 90%
  );
}
.mountains {
  width: 100%;
  height: 250px;
  bottom: 65px;
  z-index: 3;
  .mountain {
    width: 250px;
    height: 250px;
    right: 50px;
    bottom: -40px;
    background-color: $medium;
    transform: rotate(45deg);
    border-radius: 3px;
    &:after {
      width: 100%;
      height: 100%;
      opacity: 0.7;
      background-image: linear-gradient(135deg, $dark 0%, $medium 20%, $aqua 40%);
    }
  }
  .mountain:nth-child(2) {
    width: 240px;
    height: 240px;
    right: 220px;
    z-index: 2;
  }
  .mountain:nth-child(3) {
    width: 260px;
    height: 260px;
    right: 350px;
  }
  .mountain:nth-child(4) {
    width: 200px;
    height: 200px;
    right: 130px;
    bottom: -70px;
    z-index: 3;
    &:after {
      background-image: linear-gradient(135deg, $dark 0%, $medium 6%, $aqua 20%);
    }
  }
}
.sea {
  width: 100%;
  height: 170px;
  bottom: 0;
  left: 0;
  background: $x-dark;
  background-image: linear-gradient(
    to top,
    $x-dark 0%,
    $dark 30%,
    $medium 60%,
    $aqua 90%
  );
  z-index: 4;
  .wave {
    height: 3px;
    background-color: $x-light;
    border-radius: 100%;
    opacity: 0.2;
    animation: wave 5s linear infinite;
  }
  @for $i from 1 through (30) {
    $size: random(100) + 50px;
    .wave:nth-of-type(#{$i}) {
      width: $size;
      bottom: random(170) + px;
      left: random(100) + vw;
      opacity: random(5) * 0.1;
      animation-delay: random(3) + s;
    }
  }
}
.boat {
  width: 90px;
  height: 90px;
  bottom: 90px;
  animation: boat $boatSpeed linear infinite;
  &:after {
    background-image: linear-gradient(
      90deg,
      transparentize($x-light, 0.3) 30%,
      rgba(255, 255, 255, 0) 100%
    );
    width: 200px;
    height: 8px;
    top: 105px;
    left: 20px;
    border-radius: 40%;
    z-index: -1;
  }
  &:before {
    width: 92px;
    height: 50px;
    left: 25px;
    bottom: -70px;
    background-image: linear-gradient(
      to bottom,
      transparentize($x-dark, 0.2) 30%,
      transparentize($x-dark, 1) 100%
    );
    z-index: -1;
    animation: boatShadow $boatSpeed linear infinite;
  }

  .base {
    width: 110px;
    height: 25px;
    bottom: -20px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
    background-color: $dark;
  }
  .sail:nth-child(1) {
    width: 90px;
    height: 80px;
    left: 5px;
    clip-path: polygon(50% 0%, 0% 100%, 50% 100%);
    background: linear-gradient($light 0%, $dark 60%);
  }
  .sail:nth-child(2) {
    width: 80px;
    height: 70px;
    left: 15px;
    bottom: 10px;
    transform: scaleX(-1);
    clip-path: polygon(50% 0%, 0% 100%, 50% 100%);
    background: linear-gradient($light 0%, $dark 60%);
  }
}
.moon {
  width: 80px;
  height: 80px;
  top: 25%;
  right: 10%;
  border-radius: 50%;
  z-index: 2;
  background-color: $x-light;
  box-shadow: 0 0 10px $x-light, 0 0 20px $x-light, 0 0 30px $x-light,
    0 0 40px $x-light, 0 0 50px $aqua, 0 0 100px $x-light;
}
.stars {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  .star {
    border-radius: 50%;
    background-color: $light;
    animation: twinkle 5s linear infinite;
  }
  @for $i from 1 through (60) {
    $size: random(4)+px;
    $top: random(100)+vh;
    $left: random(100)+vw;
    .star:nth-of-type(#{$i}) {
      width: $size;
      height: $size;
      top: $top;
      left: $left;
      animation-delay: random(5) + s;
    }
  }
}
.lighthouse-group {
  width: 50%;
  height: 100%;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.land {
  width: 400px;
  height: 60px;
  left: -30px;
  bottom: 0;
  background-image: linear-gradient(to top, $x-dark 80%, $medium 100%);
  transform: skewX(35deg);
  border-radius: 10px;
}
.lighthouse-holder {
  width: 100px;
  height: 480px;
  bottom: 80px;
  left: 180px;
  .shadow {
    width: 117px;
    height: 50px;
    left: -32px;
    bottom: -70px;
    background: $x-dark;
    transform: skewX(-45deg);
  }
  .lighthouse {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: perspective(600px) rotateX(20deg);
    background-color: $x-light;
    background-image: repeating-linear-gradient(
      -40deg,
      transparent,
      transparent 60px,
      $dark 60px,
      $dark 120px
    );
    &:after {
      width: 100%;
      height: 100%;
      background-image: linear-gradient(
        90deg,
        transparentize($x-light, 0.4) 0%,
        $x-dark 8%,
        transparent 70%,
        transparentize($x-light, 0.6) 100%
      );
    }
  }
  .top {
    width: 94px;
    height: 60px;
    left: 3px;
    top: -15px;
    .light-container {
      height: 40px;
      min-width: 300px;
      width: 35vw;
      bottom: 4px;
      left: 40px;
      transform-style: preserve-3d;
      transform-origin: left bottom;
      transform: perspective(500px) rotateY(0);
      animation: lightRotate $lightSpeed linear infinite;
      .light {
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transform-origin: left center;
        transform: perspective(500px) rotateY(-35deg);
        background: linear-gradient(
          90deg,
          $yellow 40%,
          rgba(255, 255, 255, 0) 100%
        );
      }
    }
    .rail {
      width: 100%;
      height: 17px;
      bottom: 1px;
      border: 3px solid $x-dark;
      border-radius: 1px;
      transform: perspective(1000px) rotateX(-35deg);
      background-image: repeating-linear-gradient(
        90deg,
        $x-dark,
        $x-dark 3px,
        $grey 3px,
        $yellow 10px
      );
      background-position: -2px 0;
    }
    .middle {
      width: 88px;
      height: 35px;
      left: 3px;
      bottom: 14px;
      border: 2px solid $x-dark;
      border-radius: 3px;
      background-image: repeating-linear-gradient(
        90deg,
        $x-dark,
        $x-dark 4px,
        $grey 4px,
        rgba(255, 255, 255, 0) 21px
      );
      background-position: -2px 0;
      &:before {
        width: 100%;
        height: 100%;
        z-index: -1;
        background-color: $yellow;
        box-shadow: 0 0 10px $x-light, 0 0 20px $yellow, 0 0 30px $yellow,
          0 0 40px $yellow, 0 0 70px $yellow;
      }
    }
    .roof {
      width: 0;
      height: 0;
      bottom: 45px;
      left: -3px;
      border-left: 50px solid rgba(255, 255, 255, 0);
      border-right: 50px solid rgba(255, 255, 255, 0);
      border-bottom: 40px solid $x-dark;
      &:before {
        width: 14px;
        height: 14px;
        bottom: -7px;
        left: -7px;
        background-color: $x-dark;
        border-radius: 50%;
      }
      &:after {
        width: 4px;
        height: 14px;
        left: -2px;
        bottom: 5px;
        background-color: $x-dark;
        border-radius: 3px;
      }
      .roof-light {
        width: 100px;
        height: 40px;
        left: -50px;
        clip-path: polygon(50% 0, 0% 100%, 100% 100%);
        background-image: linear-gradient(
          135deg,
          $x-dark 40%,
          rgba($yellow, 0.5) 100%
        );
      }
    }
    .glow {
      width: 100px;
      height: 60px;
      top: 0;
      left: 0;
      opacity: 0;
      border-radius: 50%;
      background-color: $yellow;
      box-shadow: 0 0 10px $yellow, 0 0 20px $yellow, 0 0 30px $yellow,
        0 0 40px $yellow, 0 0 50px $yellow, 0 0 60px $yellow, 0 0 70px $yellow,
        0 0 80px $yellow;
      animation: lightGlow $lightSpeed linear infinite;
    }
  }
  .windows {
    height: 100%;
    width: 100%;
    .window {
      width: 15px;
      height: 25px;
      left: 43px;
      background-color: $x-dark;
      border-bottom: 2px solid rgba($light, 0.7);
      border-radius: 25px 25px 0 0;
    }
    $bottom: 90px;
    @for $i from 1 through (4) {
      .window:nth-of-type(#{$i}) {
        bottom: $bottom;
      }
      $bottom: $bottom + 90px;
    }
  }
  .door {
    width: 25px;
    height: 40px;
    background-color: $x-dark;
    left: 38px;
    bottom: -2px;
    border-radius: 2px 2px 0 0;
    .stairs {
      width: 27px;
      height: 28px;
      top: 34px;
      left: -1px;
      background-color: $x-dark;
      transform: perspective(100px) rotateX(45deg);
      background-image: repeating-linear-gradient(
        to bottom,
        $x-dark,
        $x-dark 4px,
        $light 4px,
        rgba(white, 0.1) 5px
      );
    }
  }
}

// keyframes
@keyframes twinkle {
  50% {
    opacity: 0.3;
  }
}
@keyframes wave {
  50% {
    transform: translateX(-10px);
  }
}
@keyframes lightRotate {
  25% {
    transform: perspective(500px) rotateY(35deg);
  }
  75% {
    transform: perspective(500px) rotateY(-35deg);
  }
}
@keyframes lightGlow {
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
}
@keyframes boat {
  0% {
    transform: translateX(120vw) scale(0.8);
  }
  80%,
  100% {
    transform: translateX(-25vw) scale(0.8);
  }
}
@keyframes boatShadow {
  0% {
    transform: skewX(35deg) translateX(15px);
  }
  50%,
  100% {
    transform: skewX(-55deg) translateX(-40px);
  }
}

// Learn how to build this: https://dev.to/agathacco/how-to-create-pure-css-illustrations-and-animate-them---part-3-3e8a