$r: #d8726a;
$t: rgba(255, 255, 255, 0.001);
$g: #ccc;
$gr: #668c6a;
$br: #8b7334;
$y: #deb860;
$bl: #c9d3f2;
$d: #511124;
$db: #7fabc5;
$lb: #f3ebde;

@mixin side() {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

@mixin bricks() {
  background-color: darken($g, 5%);
  background-image: linear-gradient(
      335deg,
      darken($g, 10%) 2.3vmin,
      transparent 2.3vmin
    ),
    linear-gradient(155deg, darken($g, 10%) 2.4vmin, transparent 2.4vmin),
    linear-gradient(335deg, darken($g, 10%) 2.3vmin, transparent 2.3vmin),
    linear-gradient(155deg, darken($g, 10%) 2.4vmin, transparent 2.3vmin);
  background-size: 5.8vmin 5.8vmin;
  background-position: 0px 0.5vmin, 0.6vmin 3.6vmin, 3vmin 3.2vmin,
    3.5vmin 0.7vmin;
}

@mixin shade($color) {
  background: linear-gradient(to bottom, darken($color, 10%), $t) 50% 0% / 100%
      calc(100% - 2vmin) no-repeat,
    repeating-linear-gradient(
        to right,
        darken($color, 10%),
        $color 0.25vmin,
        $color 0.75vmin,
        darken($color, 10%) 1.5vmin,
        darken($color, 10%) 1.75vmin
      )
      50% 0% / 100% calc(100% - 2vmin) no-repeat,
    radial-gradient(circle at top, $color, darken($color, 10%) 1vmin, $t 1vmin)
      50% 100% / 2vmin 2vmin;
}

@mixin lattice() {
  background: linear-gradient(to bottom, darken($g, 20%) -25%, $t),
    repeating-linear-gradient(
      45deg,
      $g 0.5vmin,
      $t 0.5vmin,
      $t 1.25vmin,
      $g 1.25vmin,
      $g 1.75vmin
    ),
    repeating-linear-gradient(
      -45deg,
      $g 0.5vmin,
      $t 0.5vmin,
      $t 1.25vmin,
      $g 1.25vmin,
      $g 1.75vmin
    ),
    darken($g, 40%);
}

@mixin cube($width, $height) {
  transform-style: preserve-3d;
  &:nth-of-type(2) {
    left: 100%;
    transform-origin: left;
    transform: rotateY(90deg);
  }
  &:nth-of-type(3) {
    left: -100%;
    transform-origin: right;
    transform: rotateY(-90deg);
  }
  &:nth-of-type(4) {
    transform: translateZ($width * -1) rotateY(-180deg);
  }
}

@mixin window($width, $height) {
  position: absolute;
  width: $width;
  height: $height;
  transform: translateZ(5vmin);
  .windowside {
    @include side();
    @include cube($width, $height);
    background: linear-gradient(to top, $br 3vmin, $t 3vmin) 50% 0% / 100%
        calc(100% - 0.5vmin) no-repeat,
      repeating-linear-gradient(
          to bottom,
          $br 0.5vmin,
          $t 0.5vmin,
          $t 1.5vmin,
          $br 1.5vmin,
          $br 2vmin
        )
        50% 0% / 100% calc(100% - 0.5vmin) no-repeat,
      repeating-linear-gradient(
          to right,
          $br 0.5vmin,
          lighten($bl, 5%) 0.5vmin,
          lighten($bl, 5%) 1.5vmin,
          $br 1.5vmin,
          $br 2vmin
        )
        50% 0% / 100% calc(100% - 0.5vmin) no-repeat,
      repeating-linear-gradient(
          to right,
          $t 3vmin,
          $br 3vmin,
          $br 4vmin,
          $t 4vmin,
          $t 7vmin
        )
        50% 100% / 100% 0.5vmin;
    box-shadow: inset 1vmin 0 0 $br, inset -1vmin 0 0 $br;
    &:before {
      content: "";
      position: absolute;
      width: 110%;
      left: -5%;
      height: 5vmin;
      bottom: calc(100% - 2.5vmin);
      transform-origin: 50% 100%;
      transform: rotateX(45deg) translateZ(2vmin);
      @include shade($gr);
      -webkit-mask: linear-gradient(-125deg, $t 20%, #000 5%) 100% 100% / 50%
          100% no-repeat,
        linear-gradient(125deg, $t 20%, #000 5%) 0% 100% / 50% 100% no-repeat;
    }
    @for $i from 1 through 4 {
      &:nth-of-type(#{$i}) {
        &:before {
          @include shade(darken($gr, ($i * 4)));
        }
      }
    }
  }
}

body {
  --mouseX: 0;
  --mouseY: 0;
  display: grid;
  height: 100vh;
  overflow: hidden;
  place-items: center;
  background: linear-gradient(to top, $lb 25%, $t 50%),
    radial-gradient(circle at center, $lb 7.5vmin, darken($db, 5%) 50vmin);
  perspective: 300vmin;
  &:active:hover {
    #wrap {
      transform: translateZ(calc((var(--mouseX) * -7.5vmin) + 55vmin))
        translateY(7.5vmin) scale(0.5)
        rotateY(calc(25deg + (var(--mouseX) * 65deg))) rotateX(0);
      transition: 2s ease-in-out;
      * {
        transition: 2s ease-in-out;
        &:before,
        &:after {
          transition: 2s ease-in-out;
        }
      }
    }
  }
  &:hover {
    #wrap {
      transition: 0s ease-in-out;
      * {
        transition: 0s ease-in-out;
        &:before,
        &:after {
          transition: 0s ease-in-out;
        }
      }
    }
  }
  .panel {
    position: fixed;
    z-index: 999;
    width: 5vw;
    height: 100vh;
    top: 0;
    @for $i from 1 through 20 {
      &:nth-of-type(#{$i}) {
        left: #{($i - 1) * 5vw};
        &:hover {
          & ~ #wrap {
            --mouseX: #{($i/30) - 0.35};
          }
        }
      }
    }
  }
  &:before {
    content: "";
    position: absolute;
    width: 65vmin;
    height: 70vmin;
    box-shadow: 0 0 0 5vmin #fff, 0 5vmin 10vmin -2.5vmin rgba(0, 0, 0, 0.5),
      0 0 0 200vw $lb;
    z-index: 998;
  }
  .upperblock {
    position: absolute;
    width: 50vmin;
    height: 100vmin;
    left: 15.5vmin;
    top: -2.5vmin;
    transform: translateZ(-25vmin);
    .roofblock {
      @include side();
      top: -9.5vmin;
      height: 7.5vmin;
      width: 20vmin;
      left: calc(50% - 10vmin);
      transform: scaleY(1.25) scaleX(1.25) translateZ(25vmin);
      .tower {
        @include side();
        width: 3vmin;
        height: 5.5vmin;
        left: calc(50% - 3vmin);
        top: auto;
        bottom: 100%;
        transform: translateZ(-62.5vmin);
        .towerside {
          @include side();
          &:before,
          &:after {
            @include side();
            left: -1.5vmin;
            top: auto;
            bottom: calc(100% - 1.25vmin);
            transform: rotateX(-30deg);
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 3vmin 11vmin 3vmin;
          }
          &:after {
            left: calc(50% - 0.375vmin);
            bottom: calc(100% + 4.5vmin);
            border-width: 0 0.75vmin 11vmin 0.75vmin;
            transform: translateZ(4.85vmin) rotateX(-8.5deg);
            transform-origin: 50% -11vmin;
          }
          @for $i from 1 through 8 {
            transform-origin: 50% 50% 3vmin;
            &:nth-of-type(#{$i}) {
              background: linear-gradient(
                  to top,
                  lighten($y, $i * 4 + 4) 0.5vmin,
                  lighten($y, $i * 4 + 1) 0.5vmin,
                  lighten($y, $i * 4 + 1) 0.7vmin,
                  $t 0.7vmin
                ),
                radial-gradient(
                    circle at bottom,
                    rgba($lb, 0.5) 1vmin,
                    lighten($y, $i * 4 + 2) 1vmin
                  )
                  50%
                  calc(0% - 3.5vmin) /
                  100%
                  100%
                  no-repeat,
                linear-gradient(
                  to right,
                  lighten($y, $i * 4 + 2) 0.5vmin,
                  $t 0.5vmin,
                  $t calc(100% - 0.5vmin),
                  lighten($y, $i * 4 + 2) calc(100% - 0.5vmin)
                );
              transform: rotateY(#{(360/8) * $i}deg);
              &:before {
                border-color: transparent
                  transparent
                  darken($gr, $i * 4)
                  transparent;
              }
              &:after {
                border-color: transparent
                  transparent
                  lighten($y, $i * 2)
                  transparent;
              }
            }
          }
        }
      }
      .roofside {
        @include side();
        background: repeating-linear-gradient(
          to right,
          $y 0.25vmin,
          $br 0.25vmin,
          $br 1vmin,
          $y 1vmin,
          $y 1.25vmin
        );
        border-radius: 95vmin 95vmin 0 0 / 70vmin 70vmin 0 0;
        box-shadow: inset 0 0 0 1.5vmin $y;
        transform: translateZ(-5vmin);
        &:before,
        &:after {
          @include side();
          background: radial-gradient(
            circle at bottom,
            darken($y, 10%) 50%,
            $y
          );
          border-radius: 5vmin 5vmin 0.5vmin 0.5vmin;
          top: -72.5%;
          width: 50%;
          left: 25%;
          height: 75%;
          transform-origin: bottom;
          transform: scale(0.75) translateZ(-4vmin)
            rotateY(calc(-25deg - (var(--mouseX) * 65deg)))
            rotateX(calc(var(--mouseX) * -2.5deg));
          box-shadow: inset calc(var(--mouseX) * 5vmin) 0 2vmin darken($y, 20%);
        }
        &:after {
          top: -82.5%;
          width: 35%;
          left: 32.5%;
          height: 50%;
          background: radial-gradient(
            circle at bottom,
            $y 50%,
            lighten($y, 10%)
          );
          mask: linear-gradient(to top, $t 1vmin, #000 1.5vmin);
        }
        .roofplank {
          top: 17.5vmin;
          height: 4.5vmin;
          width: 1vmin;
          position: absolute;
          left: calc(50% - 0.5vmin);
          transform-origin: 50% -150%;
          &:before {
            content: "";
            position: absolute;
            width: 175%;
            height: 40vmin;
            top: 100%;
            left: -37.5%;
            background: radial-gradient(
                  circle at left,
                  darken($gr, 10%) 2vmin,
                  $t 2vmin
                )
                calc(50% + 1vmin) calc(50% + 1vmin) / 6vmin 6vmin,
              radial-gradient(
                  circle at left,
                  darken($gr, 5%) 2vmin,
                  darken($gr, 15%) 2vmin
                )
                calc(50% + 1vmin) calc(50% - 1vmin) / 6vmin 6vmin;
            transform-origin: top;
            transform: translateZ(5vmin) rotateX(-90deg);
          }
          @for $i from 1 through 20 {
            &:nth-of-type(#{$i}) {
              transform: rotate(#{((($i/1) - 1) * (90/12)) + 110}deg);
            }
            @for $i from 12 through 25 {
              &:nth-of-type(#{$i}) {
                &:before {
                  background: radial-gradient(
                        circle at right,
                        darken($gr, 10%) 2vmin,
                        $t 2vmin
                      )
                      calc(50% - 1vmin)
                      calc(50% - 1vmin) /
                      6vmin
                      6vmin,
                    radial-gradient(
                        circle at right,
                        darken($gr, 5%) 2vmin,
                        darken($gr, 15%) 2vmin
                      )
                      calc(50% - 1vmin)
                      calc(50% + 1vmin) /
                      6vmin
                      6vmin;
                }
              }
            }
          }
        }
        &:last-of-type {
          transform: translateZ(-35vmin);
        }
      }
    }
    .window {
      top: 0vmin;
      left: -2.5vmin;
      @include window(55vmin, 1vmin);
      .windowside {
        @for $i from 1 through 4 {
          &:nth-of-type(#{$i}) {
            &:before {
              @include shade(darken($gr, ($i * 5)));
            }
            &:after {
              @include shade(darken($gr, (($i * 5) - 2)));
            }
          }
          &:after {
            content: "";
            position: absolute;
            width: 155%;
            left: -27.5%;
            height: 5vmin;
            bottom: calc(100% - 15.5vmin);
            transform-origin: 50% calc(0% - 5vmin);
            transform: rotateX(115deg);
            -webkit-mask: linear-gradient(
                  -125deg,
                  rgba(255, 255, 255, 0.001) 20%,
                  #000 5%
                )
                100%
                100%/50%
                100%
                no-repeat,
              linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%)
                0%
                100%/50%
                100%
                no-repeat;
          }
        }
        &:before {
          content: "";
          position: absolute;
          top: 0vmin;
          width: 120%;
          left: -10%;
          height: 15vmin;
          bottom: calc(100% - 2.5vmin);
          transform-origin: 50% 100%;
          transform: rotateX(60deg) translateZ(13vmin);
          @include shade($gr);
          -webkit-mask: linear-gradient(-132deg, $t 26%, #000 5%) 100% 100% /
              50% 100% no-repeat,
            linear-gradient(132deg, $t 26%, #000 5%) 0% 100% / 50% 100%
              no-repeat;
        }
      }
    }
    .side {
      @include side();
      @include cube(50vmin, 10vmin);
      mask: linear-gradient(to top, transparent 7.5vmin, #000 17.5vmin);
      box-shadow: 0 0 0 0.05vmin $r, inset 0 0 0 0.5vmin $r;
      &:first-of-type {
        &:before {
          @include side();
          background: darken($r, 10%);
          top: -50vmin;
          height: 50vmin;
          transform-origin: bottom;
          transform: rotateX(90deg);
        }
      }
      @for $i from 1 through 4 {
        &:nth-of-type(#{$i}) {
          box-shadow: 0 0 0 0.05vmin $r,
            inset 0 0 0 0.5vmin darken($r, ($i * 6));
          background: repeating-linear-gradient(
                to right,
                darken($y, ($i * 6)) 1.5vmin,
                $t 1.5vmin,
                $t 10vmin,
                darken($y, ($i * 6)) 10vmin,
                darken($y, ($i * 6)) 11.25vmin
              )
              50%
              2vmin /
              100%
              3vmin
              no-repeat,
            repeating-linear-gradient(
              to right,
              darken($r, ($i * 6)) 1.5vmin,
              $t 1.5vmin,
              $t 10vmin,
              darken($r, ($i * 6)) 10vmin,
              darken($r, ($i * 6)) 11.25vmin
            ),
            linear-gradient(
              to bottom,
              darken($r, ($i * 4)) 4vmin,
              $t 4vmin,
              $t 12.5vmin,
              darken($r, ($i * 6)) 10vmin
            ),
            rgba(lighten($bl, 10%), 0.75);
        }
        &:first-of-type {
          background: repeating-linear-gradient(
                to right,
                darken($y, ($i * 1)) 1.5vmin,
                $t 1.5vmin,
                $t 10vmin,
                darken($y, ($i * 1)) 10vmin,
                darken($y, ($i * 1)) 11.25vmin
              )
              50%
              2vmin /
              100%
              2vmin
              no-repeat,
            repeating-linear-gradient(
              to right,
              darken($r, ($i * 1)) 1.5vmin,
              $t 1.5vmin,
              $t 10vmin,
              darken($r, ($i * 1)) 10vmin,
              darken($r, ($i * 1)) 11.25vmin
            ),
            linear-gradient(
              to bottom,
              darken($r, ($i * 4)) 4vmin,
              $t 4vmin,
              $t 10vmin,
              darken($r, ($i * 1)) 10vmin,
              darken($r, ($i * 1)) 10.5vmin,
              $t 10.5vmin,
              $t 12.5vmin,
              darken($r, ($i * 1)) 10vmin
            ),
            repeating-linear-gradient(
                to right,
                $r 0.25vmin,
                $t 0.25vmin,
                $t 0.5vmin,
                $r 0.5vmin,
                $r 0.75vmin
              )
              50%
              10vmin /
              100%
              25vmin
              repeat-x,
            rgba(lighten($bl, 10%), 0.75);
        }
      }
    }
  }
}

#wrap {
  transition: 1s ease-in-out;
  pointer-events: none;
  width: 90vmin;
  height: 90vmin;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(calc((var(--mouseX) * -7.5vmin))) translateY(7.5vmin)
    scale(0.5) rotateY(calc(25deg + (var(--mouseX) * 65deg))) rotateX(0);
  transform-origin: 50% 50% -45vmin;
  --mouseX: 0;
  * {
    transition: 1s ease-in-out;
    transform-style: preserve-3d;
    &:before,
    &:after {
      transform-style: preserve-3d;
      transition: 1s ease-in-out;
    }
  }
  .bridge {
    width: 17.5vmin;
    height: 50vmin;
    bottom: 16vmin;
    position: absolute;
    left: 31.5vmin;
    transform-origin: 100% 100%;
    transform: rotateX(-95deg) rotateY(90deg);
    .noface {
      position: absolute;
      width: 10vmin;
      height: 12.5vmin;
      top: 30vmin;
      left: 22.5vmin;
      transform: rotateY(-90deg) rotateX(95deg) translateX(-10vmin)
        translateZ(calc((var(--mouseX) * 7.5vmin) + 2.5vmin))
        translateY(calc(var(--mouseX) * -2vmin));
      .body {
        @include side();
        background: linear-gradient(
          to bottom,
          rgba(darken($g, 80%), 0.75) 60%,
          rgba(darken($g, 80%), 0.5) 80%,
          $t 100%
        );
        width: 4vmin;
        left: calc(50% - 2vmin);
        border-radius: 20vmin 20vmin 25vmin 25vmin / 35vmin 35vmin 25vmin 25vmin;
        height: 110%;
        top: -5%;
        overflow: hidden;
        transform: rotateY(calc(var(--mouseX) * -90deg));
        .face {
          width: 2.75vmin;
          height: 4vmin;
          position: absolute;
          left: calc(50% - 1.375vmin);
          background: lighten($y, 50%);
          top: 0.5vmin;
          border-radius: 10vmin / 15vmin;
          transform: scale(0.9)
            translateX(clamp(0vmin, calc(var(--mouseX) * 3vmin), 20vmin))
            translateY(clamp(-0.5vmin, calc(var(--mouseX) * 1vmin), 2vmin));
          overflow: hidden;
          &:before {
            content: "";
            position: absolute;
            width: 1vmin;
            height: 3vmin;
            top: -0.25vmin;
            left: 0.15vmin;
            background: radial-gradient(
                  ellipse at center,
                  #000 0.45vmin,
                  $t 0.45vmin
                )
                50% 1.65vmin / 100% 0.45vmin no-repeat,
              linear-gradient(
                to bottom,
                #fff 0.15vmin,
                $t 0.15vmin,
                $t 1.25vmin,
                #fff 1vmin,
                #fff 2.25vmin,
                $t 2vmin
              ),
              linear-gradient(
                to right,
                $t 0.2vmin,
                darken($g, 5%) 0.2vmin,
                darken($g, 5%) 0.65vmin,
                $t 0.65vmin
              );
            -webkit-box-reflect: right 0.4vmin;
            transform: translateX(
              clamp(0vmin, calc(var(--mouseX) * 2vmin), 20vmin)
            );
          }
          &:after {
            content: "";
            position: absolute;
            width: 1.25vmin;
            height: 0.35vmin;
            background: #000;
            left: calc(50% - 0.625vmin);
            bottom: 0.5vmin;
            border-radius: 5vmin;
            transform: translateX(
              clamp(0vmin, calc(var(--mouseX) * 1vmin), 20vmin)
            );
          }
        }
      }
    }
    .plank {
      position: absolute;
      width: 17.5vmin;
      height: 2vmin;
      left: -152.5vmin;
      top: calc(50% - 4vmin);
      transform-origin: 500% 50%;
      .rail {
        position: absolute;
        width: 50%;
        height: 175%;
        background: linear-gradient(
              to bottom,
              darken($r, 5%) 0.75vmin,
              $t 0.75vmin
            )
            0% 50% / 60% 100% no-repeat,
          linear-gradient(to bottom, darken($r, 5%) 0.75vmin, $t 0.75vmin) 100%
            calc(50% + 1.5vmin) / 40% 100% no-repeat,
          linear-gradient(to right, darken($r, 5%) 0.75vmin, $t 0.75vmin),
          linear-gradient(
            to right,
            $t 5vmin,
            darken($r, 5%) 5vmin,
            darken($r, 5%) 5.5vmin,
            $t 5.5vmin
          ),
          linear-gradient(to left, darken($r, 5%) 0.75vmin, $t 0.75vmin);
        left: -50%;
        &:after {
          content: "";
          position: absolute;
          width: 1.5vmin;
          height: 100%;
          left: 0;
          top: 0;
          background: darken($r, 15%);
          transform: rotateY(90deg) translateZ(-0.75vmin);
          box-shadow: 18vmin 0 0 darken($r, 15%);
        }
      }
      .rail:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        background: linear-gradient(
              to bottom,
              darken($r, 5%) 0.75vmin,
              $t 0.75vmin
            )
            0% 50% / 60% 100% no-repeat,
          linear-gradient(to bottom, darken($r, 5%) 0.75vmin, $t 0.75vmin) 100%
            calc(50% + 1.5vmin) / 40% 100% no-repeat,
          linear-gradient(to right, darken($r, 5%) 0.75vmin, $t 0.75vmin),
          linear-gradient(
            to right,
            $t 5vmin,
            darken($r, 5%) 5vmin,
            darken($r, 5%) 5.5vmin,
            $t 5.5vmin
          ),
          linear-gradient(to left, darken($r, 5%) 0.75vmin, $t 0.75vmin);
        transform: translateZ(-17.5vmin);
      }
      &:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 150%;
        bottom: 0%;
        left: -100%;
        transform-origin: right;
        transform: rotateY(-90deg);
        background: lighten($br, 10%);
        box-shadow: inset 0 0 0 0.5vmin lighten($br, 0%);
      }
      @for $i from 1 through 25 {
        &:nth-of-type(#{$i}) {
          transform: rotate(#{((($i/2) - 1) * (90/24)) + 160}deg);
        }
      }
    }
  }
  .center {
    position: absolute;
    width: 17.5vmin;
    height: 22.5vmin;
    bottom: 22.5vmin;
    left: 31.5vmin;
    transform: translateZ(-10vmin);
    .leaf {
      position: absolute;
      width: 6vmin;
      height: 6vmin;
      border-radius: 50vmin 0;
      background: linear-gradient(225deg, $t 25%, lighten($y, 5%) 25%);
      box-shadow: inset 0 0 0 0.35vmin darken($y, 10%);
      top: -20.5vmin;
      left: calc(50% - 6vmin);
      transform: translateZ(1vmin) rotate(-45deg);
      transform-origin: 100% 0%;
      &:nth-of-type(2) {
        transform: translateZ(1vmin) rotate(-75deg) scale(0.9);
      }
      &:nth-of-type(3) {
        transform: translateZ(1vmin) rotate(-15deg) scale(0.9);
      }
      &:nth-of-type(4) {
        transform: translateZ(1vmin) rotate(-105deg) scale(0.8);
        top: -19vmin;
      }
      &:nth-of-type(5) {
        transform: translateZ(1vmin) rotate(15deg) scale(0.8);
        top: -19vmin;
      }
    }
    .plank {
      width: 1vmin;
      height: 16.5vmin;
      left: calc(50% - 0.5vmin);
      position: absolute;
      bottom: 25.25vmin;
      transform-origin: 50% 55%;
      &:nth-of-type(5) {
        &:after {
          content: "";
          position: absolute;
          width: 5vmin;
          height: 100%;
          bottom: 100%;
          left: -2.5vmin;
          @include shade($gr);
          transform-origin: bottom;
          transform: translateZ(5vmin) rotateX(90deg) rotateY(45deg)
            translateX(-2.5vmin);
        }
      }
      &:last-of-type {
        &:after {
          content: "";
          position: absolute;
          width: 5vmin;
          height: 100%;
          bottom: 100%;
          left: -2.5vmin;
          @include shade($gr);
          transform-origin: bottom;
          transform: translateZ(5vmin) rotateX(90deg) rotateY(45deg)
            translateX(16vmin);
        }
      }
      &:before {
        content: "";
        position: absolute;
        width: 140%;
        height: 100%;
        bottom: 100%;
        left: -20%;
        background: $gr;
        transform-origin: bottom;
        transform: translateZ(5vmin) rotateX(90deg);
        box-shadow: inset 0 0 0.5vmin 0.5vmin darken($gr, 15%);
      }
      @for $i from 1 through 25 {
        &:nth-of-type(#{$i}) {
          transform: rotate(#{(($i - 1) * (90/10)) - 125}deg);
        }
      }
    }
    &:before {
      content: "";
      position: absolute;
      width: 6.25vmin;
      height: 3vmin;
      background: repeating-linear-gradient(
        to right,
        $br 1vmin,
        darken($br, 10%) 1vmin,
        darken($br, 10%) 1.5vmin,
        $br 2.5vmin
      );
      border: 0.35vmin dashed $y;
      left: 1.15vmin;
      box-sizing: border-box;
      -webkit-box-reflect: right 2vmin;
      top: 5vmin;
      transform: translateZ(0.05vmin);
    }
    &:after {
      box-shadow: inset 0 -0.5vmin 0 darken($y, 10%);
      @include side();
      height: 5vmin;
      width: calc(100% + 7.5vmin);
      left: -3.75vmin;
      transform-origin: top;
      @include shade(darken($g, 15%));
      transform: rotateX(55deg);
      clip-path: polygon(7.5% 0%, 92.5% 0%, 100% 100%, 0% 100%);
    }
    .side {
      &:nth-of-type(2) {
        .upper {
          .rail {
            transform: translateZ(0vmin) translateY(0.25vmin);
          }
        }
      }
      &:nth-of-type(3) {
        .upper {
          .rail {
            transform: translateZ(0vmin) translateY(-0.25vmin);
          }
        }
      }
      .upper {
        .rail {
          content: "";
          position: absolute;
          width: 125%;
          height: 17.5%;
          bottom: 40%;
          left: -12.5%;
          transform: translateZ(5vmin);
          background: repeating-linear-gradient(
                to right,
                $t 0.5vmin,
                darken($r, 10%) 0.5vmin,
                darken($r, 10%) 3vmin,
                $t 3vmin,
                $t 3.5vmin
              )
              50% 0% / 100% 0.5vmin no-repeat,
            linear-gradient(
              to top,
              lighten($br, 10%) 1vmin,
              $t 1vmin,
              $t calc(100% - 0.5vmin),
              darken($y, 10%) calc(100% - 0.5vmin)
            ),
            repeating-linear-gradient(
              to right,
              darken($r, 10%) 0.5vmin,
              $t 0.5vmin,
              $t 3vmin,
              darken($r, 10%) 3vmin,
              darken($r, 10%) 3.5vmin
            );
        }
      }
      &:first-of-type {
        .upper {
          .topsection {
            position: absolute;
            width: 8.5vmin;
            height: 3.5vmin;
            background: lighten($y, 10%);
            bottom: 20vmin;
            left: calc(50% - 4.25vmin);
            border-radius: 100vmin 100vmin 0 0 / 75vmin 75vmin 0 0;
            transform: translateZ(-5vmin);
            .roof {
              width: 1vmin;
              height: 16.5vmin;
              left: calc(50% - 0.5vmin);
              position: absolute;
              bottom: -13vmin;
              transform-origin: 50% 40%;
              &:before {
                content: "";
                position: absolute;
                width: 140%;
                left: -20%;
                height: 125%;
                bottom: 100%;
                transform-origin: 50% 100%;
                transform: translateZ(2.5vmin) rotateX(90deg);
                background: $gr;
                box-shadow: inset 0 0 0.5vmin 0.5vmin darken($gr, 15%);
              }
              @for $i from 1 through 10 {
                &:nth-of-type(#{$i}) {
                  transform: rotate(#{(($i - 1) * (90/8)) - 50}deg);
                }
              }
            }
          }
          &:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                to bottom,
                rgba($r, 0.75),
                rgba($r, 0.75)
              ),
              repeating-linear-gradient(
                to right,
                darken($y, 10%) 0.25vmin,
                $t 0.25vmin,
                $t 1vmin,
                darken($y, 10%) 1vmin,
                darken($y, 10%) 1.25vmin
              ),
              repeating-linear-gradient(
                to bottom,
                darken($y, 10%) 0.25vmin,
                $t 0.25vmin,
                $t 1vmin,
                darken($y, 10%) 1vmin,
                darken($y, 10%) 1.25vmin
              ),
              darken($r, 5%);
            -webkit-mask: radial-gradient(
                  circle at center,
                  #000 2.5vmin,
                  $t 2.5vmin
                )
                50% 3vmin / 5vmin 5vmin no-repeat,
              radial-gradient(circle at center, #000 2.5vmin, $t 2.5vmin)
                calc(50% - 2.5vmin) 4vmin / 5vmin 5vmin no-repeat,
              radial-gradient(circle at center, #000 2.5vmin, $t 2.5vmin)
                calc(50% + 2.5vmin) 4vmin / 5vmin 5vmin no-repeat;
          }
        }
      }
      .upper {
        background: linear-gradient(to bottom, darken($y, 5%) 10vmin, $t 10vmin),
          radial-gradient(circle at bottom, $t 8.35vmin, $r 2vmin) 50% 50% /
            125% 100%;
        position: absolute;
        width: 80%;
        left: 10%;
        bottom: 150%;
        height: 80%;
        &:before {
          content: "";
          position: absolute;
          width: 120%;
          left: -10%;
          height: 7.5vmin;
          bottom: calc(100% - 3.5vmin);
          transform-origin: 50% 100%;
          transform: rotateX(45deg) translateZ(2.5vmin);
          @include shade(darken($gr, 10%));
          -webkit-mask: linear-gradient(-125deg, $t 25%, #000 5%) 100% 100% /
              50% 100% no-repeat,
            linear-gradient(125deg, $t 25%, #000 5%) 0% 100% / 50% 100%
              no-repeat;
        }
      }
      &:nth-of-type(2) {
        .upper {
          transform: translateZ(-1.85vmin);
          left: 0vmin;
          background: linear-gradient(
            to bottom,
            darken($y, 5%) 10vmin,
            darken($r, 10%) 10vmin
          );
        }
      }
      &:nth-of-type(3) {
        .upper {
          transform: translateZ(-1.85vmin);
          background: linear-gradient(
            to bottom,
            darken($y, 5%) 10vmin,
            darken($r, 10%) 10vmin
          );
          left: 3.5vmin;
        }
      }
      &:first-of-type {
        &:before {
          content: "";
          position: absolute;
          width: 100%;
          height: 20vmin;
          box-shadow: inset 3vmin 4vmin 0 0 $br, inset -3vmin 0 0 $br,
            inset 0 8vmin 0 darken($g, 25%),
            inset calc((-20vmin * var(--mouseX)) - 4vmin) 0 6vmin
              darken($br, 90%);
          left: 0;
          bottom: -8vmin;
          background: linear-gradient(
            to bottom,
            darken($g, 25%) 8vmin,
            darken($br, 15%) 8vmin
          );
        }
        &:after {
          box-shadow: inset 0 -0.5vmin 0 darken($y, 10%);
          @include side();
          height: 5vmin;
          width: calc(100% + 7.5vmin);
          left: -3.75vmin;
          transform-origin: top;
          @include shade(darken($g, 15%));
          transform: rotateX(55deg);
          clip-path: polygon(7.5% 0%, 92.5% 0%, 100% 100%, 0% 100%);
          top: auto;
          bottom: 7.5vmin;
        }
      }
      @include side();
      @include cube(17.5vmin, 20vmin);
      @for $i from 1 through 4 {
        &:nth-of-type(#{$i}) {
          background: darken($r, (($i * 4) + 7));
        }
      }
      .topside {
        width: 100%;
        height: 50%;
        position: absolute;
        bottom: 100%;
        left: 0;
      }
      &:first-of-type {
        .topside {
          background: linear-gradient(
              to right,
              $br 3vmin,
              $t 3vmin,
              $t calc(100% - 3vmin),
              $br calc(100% - 3vmin)
            ),
            linear-gradient(to bottom, $br 2vmin, $t 2vmin);
          &:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 8vmin;
            top: -8vmin;
            background: lighten($br, 10%);
            border-radius: 50vmin 50vmin 0 0;
          }
          &:before {
            content: "";
            position: absolute;
            width: 125%;
            height: 35%;
            bottom: 0;
            left: -12.5%;
            transform: translateZ(5vmin);
            background: repeating-linear-gradient(
                  to right,
                  $t 0.5vmin,
                  lighten($br, 10%) 0.5vmin,
                  lighten($br, 10%) 3vmin,
                  $t 3vmin,
                  $t 3.5vmin
                )
                50% 0% / 100% 0.5vmin no-repeat,
              linear-gradient(
                to top,
                lighten($br, 10%) 1vmin,
                $t 1vmin,
                $t calc(100% - 0.5vmin),
                darken($y, 10%) calc(100% - 0.5vmin)
              ),
              repeating-linear-gradient(
                to right,
                lighten($br, 10%) 0.5vmin,
                $t 0.5vmin,
                $t 3vmin,
                lighten($br, 10%) 3vmin,
                lighten($br, 10%) 3.5vmin
              );
          }
        }
      }
      &:nth-of-type(4) {
        .topside {
          background: darken($br, 20%);
          transform: translateZ(-8vmin);
          &:before {
            @include side();
            background: $br;
            transform-origin: bottom;
            transform: rotateX(90deg);
            width: 120%;
            left: -10%;
            top: auto;
            bottom: 0;
            height: 130%;
          }
        }
      }
      &:nth-of-type(2),
      &:nth-of-type(3) {
        .topside {
          background: linear-gradient(
              to right,
              darken($br, 5%) 3vmin,
              $t 3vmin,
              $t calc(100% - 3vmin),
              darken($br, 5%) calc(100% - 3vmin)
            ),
            linear-gradient(to bottom, darken($br, 5%) 4vmin, $t 4vmin);
          &:before {
            content: "";
            position: absolute;
            left: -25%;
            transform: translateZ(1.5vmin);
            width: 125%;
            height: 35%;
            bottom: 0;
            background: repeating-linear-gradient(
                  to right,
                  $t 0.5vmin,
                  lighten($br, 10%) 0.5vmin,
                  lighten($br, 10%) 3vmin,
                  $t 3vmin,
                  $t 3.5vmin
                )
                50% 0% / 100% 0.5vmin no-repeat,
              linear-gradient(
                to top,
                lighten($br, 10%) 1vmin,
                $t 1vmin,
                $t calc(100% - 0.5vmin),
                darken($y, 10%) calc(100% - 0.5vmin)
              ),
              repeating-linear-gradient(
                to right,
                lighten($br, 10%) 0.5vmin,
                $t 0.5vmin,
                $t 3vmin,
                lighten($br, 10%) 3vmin,
                lighten($br, 10%) 3.5vmin
              );
          }
        }
      }
      &:nth-of-type(3) {
        .topside {
          &:before {
            left: 0%;
          }
        }
      }
    }
  }
  .rearblock {
    position: absolute;
    width: 65vmin;
    height: 30vmin;
    left: 10vmin;
    top: 47.5vmin;
    transform: translateZ(-35vmin);
    .side {
      @include side();
      top: 20vmin;
      @include cube(45vmin, 30vmin);
      &:first-of-type {
        width: 6.5vmin;
        height: 100vmin;
        background: radial-gradient(
              ellipse at center,
              darken($g, 90%) 2.5vmin,
              $t 2.5vmin
            )
            50% 0.5vmin / 100% 2.5vmin no-repeat,
          linear-gradient(
            to bottom,
            darken($g, 30%),
            darken($g, 20%),
            $g 75%,
            $t
          );
        top: -40vmin;
        left: -25vmin;
        border-radius: 125vmin 125vmin 0 0 / 90vmin 90vmin 0 0;
        transform: rotateY(calc(var(--mouseX) * -95deg));
        box-shadow:inset calc(var(--mouseX) * 5vmin) -1vmin 2vmin darken($g, 30%), inset calc(var(--mouseX) * -2vmin) -1vmin 2vmin lighten($g, 5%), inset 0 2vmin 2vmin darken($g, 30%);
        &:before {
          content: "";
          transform-style: preserve-3d;
          position: absolute;
          width: 32.5vmin;
          height: 30vmin;
          left: 1.5vmin;
          border-radius: 500vmin;
          border: 0.5vmin solid;
          border-color: $t $t darken($g, 15%) $t;
          transform-origin: left;
          transform: rotateY(calc(var(--mouseX) * 65deg)) translateZ(0vmin);
        }
        &:after {
          content: "";
          position: absolute;
          width: 50vmin;
          height: 50vmin;
          background: linear-gradient(
            135deg,
            $t 10%,
            rgba($g, 0.35),
            rgba(darken($g, 5%), 0.5)
          );
          bottom: calc(100% - 2vmin);
          right: calc(100% - 5vmin);
          transform-origin: 100% 100%;
          transform: skew(calc(var(--mouseX) * 30deg));
          -webkit-mask: radial-gradient(
                circle at center,
                #000 2.5vmin,
                $t 2.5vmin
              )
              100% 100% / 5vmin 5vmin no-repeat,
            radial-gradient(circle at center, #000 5vmin, $t 5vmin) 100% 100% /
              15vmin 12.5vmin no-repeat,
            radial-gradient(circle at center, #000 7.5vmin, $t 7.5vmin) 100%
              100% / 25vmin 25vmin no-repeat,
            radial-gradient(circle at center, #000 7.5vmin, $t 7.5vmin)
              calc(100% - 2.5vmin) 100% / 25vmin 25vmin no-repeat,
            radial-gradient(circle at center, #000 9vmin, $t 9vmin)
              calc(100% - 5vmin) 100% / 30vmin 30vmin no-repeat,
            radial-gradient(circle at center, #000 12vmin, $t 12vmin)
              calc(100% - 10vmin) 100% / 40vmin 30vmin no-repeat;
        }
      }
      &:nth-of-type(2),
      &:nth-of-type(3) {
        width: 45vmin;
      }
      &:nth-of-type(3) {
        left: -45vmin;
        height: 80vmin;
        top: -20vmin;
        mask: linear-gradient(to top, transparent 5vmin, #000 30vmin);
        @include bricks();
        &:before {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          background: linear-gradient(
            to bottom,
            rgba(darken($g, 30%), 0.5),
            $t 50%
          );
        }
      }
    }
  }
  .roofpeak {
    position: absolute;
    width: 10vmin;
    height: 5vmin;
    left: -15vmin;
    top: 2.5vmin;
    transform: translateZ(-45vmin) rotateY(-90deg);
    &:before {
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      border-style: solid;
      border-width: 0 5vmin 5vmin 5vmin;
      border-color: transparent transparent lighten($y, 5%) transparent;
      transform: translateZ(-1vmin);
    }
    &:after {
      content: "";
      position: absolute;
      width: 60%;
      height: 40%;
      left: 20%;
      bottom: 0;
      background: linear-gradient(
          to bottom,
          lighten($y, 20%) 0.5vmin,
          $t 0.5vmin
        ),
        repeating-linear-gradient(
          to right,
          lighten($y, 20%) 1vmin,
          $t 1vmin,
          $t 2vmin,
          lighten($y, 20%) 2vmin,
          lighten($y, 20%) 3vmin
        );
      transform: translateZ(-1vmin);
    }
    .roof {
      height: 7.5vmin;
      width: 25vmin;
      position: absolute;
      @include shade(darken($gr, 10%));
      left: 50%;
      transform-origin: 0% 0%;
      transform: rotateY(90deg) rotateX(45deg);
      &:last-of-type {
        left: auto;
        right: 50%;
        transform-origin: 100% 0%;
        transform: rotateY(-90deg) rotateX(45deg);
      }
    }
  }
  .peak {
    position: absolute;
    width: 10vmin;
    height: 10vmin;
    top: 35vmin;
    left: 0vmin;
    transform: rotateY(90deg) translate(30vmin, 5vmin);
    &:before,
    &:after {
      @include side();
      transform: translateZ(-10vmin);
      background: linear-gradient(
        to bottom,
        $t 5vmin,
        $br 5vmin,
        $br 6vmin,
        $t 5vmin,
        $t 8vmin,
        $br 8vmin
      );
    }
    &:after {
      top: -4vmin;
      height: 5vmin;
      background: linear-gradient(to right, $t 40%, $br 40%, $br 60%, $t 60%),
        linear-gradient(-135deg, $t 40%, $br 40%, $br 50%, $t 50%) 2vmin 50%,
        linear-gradient(135deg, $t 40%, $br 40%, $br 50%, $t 50%) -2vmin 50%,
        linear-gradient(to top, $br 1vmin, $t 1vmin);
    }
    .peakside {
      @include side();
      @include cube(5vmin, 5vmin);
      &:nth-of-type(2) {
        background: linear-gradient(
            to left,
            darken($br, 4) 2vmin,
            $t 2vmin,
            $t 3.5vmin,
            darken($br, 4) 3.5vmin
          ),
          linear-gradient(
            to bottom,
            $t 5vmin,
            $br 5vmin,
            $br 6vmin,
            $t 5vmin,
            $t 8vmin,
            $br 8vmin
          );
        &:after {
          @include side();
          transform-origin: right;
          transform: rotateY(-90deg) translateZ(4vmin);
          left: 0vmin;
          background: darken($br, 20%);
          box-shadow: 2vmin 0 0 darken($br, 10%);
        }
      }
      &:before {
        @include side();
        height: 10vmin;
        top: -8vmin;
        @include shade(darken($gr, 10%));
        transform-origin: 50% 0%;
        transform: rotateX(38.5deg) translateZ(-5vmin);
      }
      &:nth-of-type(3) {
        background: linear-gradient(
            to right,
            darken($br, 2) 2vmin,
            $t 2vmin,
            $t 3.5vmin,
            darken($br, 2) 3.5vmin
          ),
          linear-gradient(
            to bottom,
            $t 5vmin,
            darken($br, 2) 5vmin,
            darken($br, 2) 6vmin,
            $t 5vmin,
            $t 8vmin,
            darken($br, 2) 8vmin
          );
      }
    }
  }
  .main {
    position: absolute;
    width: 65vmin;
    height: 70vmin;
    left: 7.5vmin;
    transform: translateZ(-20vmin);
    .window {
      top: 55vmin;
      left: 5vmin;
      @include window(17.5vmin, 10vmin);
      &:nth-of-type(4) {
        @include window(17.5vmin, 8vmin);
        left: -2.5vmin;
        top: 42.5vmin;
      }
      &:nth-of-type(5) {
        @include window(26vmin, 9vmin);
        left: 41.5vmin;
        top: 37.5vmin;
        .windowside {
          &:nth-of-type(3) {
            background: $br;
            &:before {
              display: none;
            }
          }
        }
      }
      &:nth-of-type(2) {
        left: 47.5vmin;
        @include window(20vmin, 10vmin);
      }
      &:nth-of-type(3) {
        @include window(70vmin, 12.5vmin);
        top: 22vmin;
        left: -2.5vmin;
        .windowside {
          @for $i from 1 through 4 {
            &:nth-of-type(#{$i}) {
              &:after {
                @include shade(darken($gr, $i * 7.5));
              }
            }
          }
          &:before {
            content: "";
            position: absolute;
            width: 102%;
            left: -1%;
            height: 15vmin;
            bottom: calc(100% - 2.5vmin);
            transform-origin: 50% 100%;
            transform: rotateX(40deg) translateZ(2vmin);
            @include shade($gr);
            -webkit-mask: linear-gradient(-125deg, $t 20%, #000 5%) 100% 100% /
                50% 100% no-repeat,
              linear-gradient(125deg, $t 20%, #000 5%) 0% 100% / 50% 100%
                no-repeat;
          }
          &:after {
            content: "";

            position: absolute;
            width: 140%;
            left: -20%;
            height: 3vmin;
            bottom: calc(100% - 12.5vmin);
            transform-origin: 50% calc(0% - 5vmin);
            transform: rotateX(135deg);
            -webkit-mask: linear-gradient(
                  -125deg,
                  rgba(255, 255, 255, 0.001) 20%,
                  #000 5%
                )
                100% 100%/50% 100% no-repeat,
              linear-gradient(125deg, rgba(255, 255, 255, 0.001) 20%, #000 5%)
                0% 100%/50% 100% no-repeat;
          }
          &:nth-of-type(2),
          &:nth-of-type(3) {
            height: 12.5vmin;
            width: 45vmin;
          }
          &:nth-of-type(3) {
            left: -45vmin;
          }
          &:last-of-type {
            transform: translateZ(-45vmin) rotateY(180deg);
          }
        }
      }
    }
    .side {
      @include side();
      top: 20vmin;
      mask: linear-gradient(to top, transparent, #000 17.5vmin);
      @include cube(45vmin, 60vmin);
      &:nth-of-type(2),
      &:nth-of-type(3) {
        width: 45vmin;
      }
      &:nth-of-type(3) {
        left: -45vmin;
      }
      @for $i from 1 through 4 {
        &:nth-of-type(#{$i}) {
          background: darken($r, (($i * 5) + 3));
        }
      }
    }
  }
  .baseblock {
    width: 30vmin;
    height: 30vmin;
    position: absolute;
    bottom: -7.5vmin;
    left: 0vmin;
    .side {
      &:last-of-type {
        mask: linear-gradient(
              to left,
              #000 2vmin,
              $t 2vmin,
              $t 6vmin,
              #000 4vmin
            )
            50% 1vmin / 100% 10vmin no-repeat,
          linear-gradient(
            to bottom,
            #000 2vmin,
            $t 2vmin,
            $t 10vmin,
            #000 10vmin
          );
        &:before {
          background: linear-gradient(
            to bottom,
            darken($gr, 5%) 3vmin,
            darken($g, 5%) 3vmin,
            darken($g, 10%)
          );
          box-shadow: none;
        }
      }
    }
    .steps {
      position: absolute;
      width: 20vmin;
      height: 20vmin;
      transform-origin: right;
      left: -10vmin;
      top: 10vmin;
      transform: translateZ(-30vmin) rotateY(-90deg);
      &:before,
      &:after {
        @include side();
        transform: translateZ(10.25vmin);
        @include bricks();
        -webkit-mask: linear-gradient(
          135deg,
          $t 55%,
          #000 50%,
          #000 65%,
          $t 80%
        );
      }
      &:after {
        background: rgba($g, 0.5);
      }
      .step {
        @include side();
        width: 10%;
        height: 50%;
        transform-origin: top;
        transform: rotateX(90deg);
        &:before {
          @include side();
          right: 100%;
          transform-origin: left;
          transform: rotateY(90deg);
        }
        &:after {
          @include side();
          height: 5vmin;
          background: $g;
          top: 100%;
          transform-origin: top;
          transform: rotateX(-90deg);
        }
        @for $i from 1 through 10 {
          &:nth-of-type(#{$i}) {
            background: darken($g, (10 - $i) * 2);
            left: #{($i - 1) * 10%};
            top: #{((10 - $i)) * 10%};
            &:before {
              background: darken($g, (18 - $i) * 2);
            }
          }
        }
      }
    }
    .tree {
      position: absolute;
      width: 15vmin;
      height: 30vmin;
      top: -27.5vmin;
      left: 17.5vmin;
      transform: translateX(calc(var(--mouseX) * 13vmin)) translateZ(-10vmin)
        rotateY(calc(-25deg - (var(--mouseX) * 25deg)))
        rotateX(calc(var(--mouseX) * -2.5deg));
      background: radial-gradient(
        circle at bottom right,
        $t 5vmin,
        darken($br, 5%) 5vmin,
        $br 7vmin,
        $t 7vmin
      );
      .branch {
        position: absolute;
        width: 15vmin;
        height: 7.5vmin;
        background: lighten($gr, 10%);
        bottom: 5vmin;
        border-radius: 100vmin 100vmin 100vmin 100vmin / 75vmin 75vmin 50vmin
          50vmin;
        right: -6.5vmin;
        transform-origin: bottom;
        box-shadow: inset calc(var(--mouseX) * 5vmin) -1vmin 3vmin darken($gr, 5%),
          inset calc(var(--mouseX) * -5vmin) 1vmin 3vmin lighten($gr, 35%);
        &:before {
          @include side();
          background: radial-gradient(
            circle at bottom left,
            $t 5vmin,
            darken($br, 5%) 5vmin,
            $br 7vmin,
            $t 7vmin
          );
          top: -50%;
          height: 50%;
        }
        &:first-of-type {
          transform: translateX(calc(var(--mouseX) * 3vmin));
          &:after {
            @include side();
            background: radial-gradient(
              circle at bottom left,
              $t 5vmin,
              darken($br, 5%) 5vmin,
              $br 6.5vmin,
              $t 6.5vmin
            );
            transform: scaleX(-1);
            top: -35%;
            height: 50%;
            left: 1.5vmin;
          }
        }
        &:nth-of-type(2) {
          bottom: 15vmin;
          right: -2.5vmin;
          transform: scale(0.9);
          &:before {
            transform: translateX(-1.5vmin) scaleX(-1);
            top: -45%;
          }
        }
        &:nth-of-type(3) {
          bottom: 13vmin;
          right: -10vmin;
          transform: scale(0.75) translateZ(-1vmin)
            translateX(calc(var(--mouseX) * 3vmin));
          background: lighten($gr, 15%);
          &:before {
            background: radial-gradient(
              circle at bottom left,
              $t 5vmin,
              $br 5vmin,
              $br 6.25vmin,
              $t 6.25vmin
            );
            transform: translateX(5vmin) scaleX(-1);
            top: -45%;
            left: -5vmin;
          }
        }
        &:nth-of-type(4) {
          bottom: 21vmin;
          right: -11.5vmin;
          transform: scale(0.6) translateX(calc(var(--mouseX) * 3vmin));
          background: lighten($gr, 5%);
          &:before {
            background: lighten($gr, 10%);
            border-radius: inherit;
            height: 125%;
            width: 115%;
            left: -14vmin;
            top: -5vmin;
            box-shadow: inherit;
          }
        }
        &:last-of-type {
          bottom: 30vmin;
          right: -7.5vmin;
          &:before {
            top: 95%;
            transform: scaleX(-1);
            left: -6vmin;
          }
        }
      }
    }
    &:nth-of-type(2) {
      left: auto;
      right: 0vmin;
      width: 40vmin;
      &:before {
        @include side();
        left: -20vmin;
        top: auto;
        bottom: 0;
        width: 20vmin;
        height: 22.5vmin;
        background: linear-gradient(
          to bottom,
          darken($g, 20%) 2.5vmin,
          darken($r, 9) 2vmin
        );
      }
      .side {
        @include cube(40vmin, 60vmin);
        &:after {
          width: calc(100% + 8vmin);
          left: -4vmin;
        }
        &:first-of-type {
          &:after {
            clip-path: polygon(7.5% 0%, 92.5% 0%, 100% 100%, 7.5% 100%);
          }
        }
        &:nth-of-type(3) {
          opacity: 0;
          &:after {
            display: none;
          }
        }
        &:nth-of-type(2) {
          opacity: 1;
          &:after {
            display: block;
          }
        }
      }
    }
    .side {
      @include side();
      @include cube(30vmin, 60vmin);
      &:nth-of-type(2) {
        opacity: 0;
        &:after {
          display: none;
        }
      }
      &:before {
        @include side();
        height: 10vmin;
        @include lattice();
        box-shadow: inset 0 0 0 0.5vmin $g;
      }
      &:after {
        @include side();
        height: 5vmin;
        width: calc(100% + 7.5vmin);
        left: -3.75vmin;
        transform-origin: top;
        box-shadow: inset 0 -0.5vmin 0 darken($y, 10%);
        @include shade(#41a992);
        transform: rotateX(55deg);
        clip-path: polygon(7.5% 0%, 92.5% 0%, 100% 100%, 0% 100%);
      }
      &:first-of-type {
        &:after {
          clip-path: polygon(7.5% 0%, 90% 0%, 90% 100%, 0% 100%);
        }
      }
      &:last-of-type {
        &:after {
          display: none;
        }
      }
      @for $i from 1 through 4 {
        &:nth-of-type(#{$i}) {
          background: darken($r, ($i * 5) + 4);
        }
      }
    }
  }
}

.clouds {
  z-index: 999;
  transform-style: preserve-3d;
  position: absolute;
  width: 125vmin;
  height: 25vmin;
  bottom: -18vmin;
  left: -35vmin;
  transform: translateY(calc(-7.5vmin + (var(--mouseX) * -2.5vmin)))
    translateX(calc(var(--mouseX) * -322.5vmin)) scale(1.5) scaleX(2)
    rotateY(calc(-5deg + (var(--mouseX) * 45deg))) rotateX(0deg)
    translateZ(75vmin) rotate(calc(var(--mouseX) * 30deg));
  mask: linear-gradient(to bottom, #000 50%, $t 100%);
  background: linear-gradient(to top, #000, $t 75%);
  filter: drop-shadow(
      calc(-55vmin * var(--mouseX)) calc((-2.75vmin * var(--mouseX)) - 1vmin)
        0vmin lighten($lb, 2.5%)
    )
    drop-shadow(
      calc(7.5vmin * var(--mouseX)) calc((-0.5vmin * var(--mouseX)) - 1vmin) 0
        $lb
    )
    blur(3px);
  &:last-of-type {
    transform: translateY(calc(-8.5vmin + (var(--mouseX) * 10vmin)))
      translateX(calc(var(--mouseX) * 450vmin)) scale(1.5) scaleX(3)
      rotateY(calc(-25deg + (var(--mouseX) * 65deg))) rotateX(0deg)
      translateZ(calc(-100vmin + (var(--mouseX) * -50vmin)));
    opacity: 0.65;
  }
  &:before,
  &:after {
    content: "";
    position: absolute;
    width: 40vmin;
    height: 40vmin;
    background: lighten($lb, 5%);
    top: 1.5vmin;
    border-radius: 50vmin 50vmin 0 0;
    box-shadow: -20vmin 0 0 -5vmin lighten($lb, 10%),
      -40vmin 0 0 -1.5vmin lighten($lb, 10%),
      20vmin 0 0 -5vmin lighten($lb, 10%), 45vmin 0 0 -1vmin lighten($lb, 10%),
      55vmin 0 0 -6.5vmin lighten($lb, 10%),
      70vmin 0 0 -1.5vmin lighten($lb, 10%),
      90vmin 0 0 -3.5vmin lighten($lb, 10%),
      110vmin 0 0 -1.5vmin lighten($lb, 10%);
    opacity: 0.5;
    left: 5vmin;
    transform: translate(
      calc(var(--mouseX) * 2vmin),
      calc(var(--mouseX) * 0.5vmin)
    );
  }
  &:before {
    transform: translate(
      calc(var(--mouseX) * -2vmin),
      calc(var(--mouseX) * -0.5vmin)
    );
  }
  &:after {
    left: -15vmin;
  }
}