<template>
  <div id="world">
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneys">
      <div class="money_wrapper">
        <div class="money money_1">
          <div class="money money_2">
            <div class="money money_3">
              <div class="money money_4">
                <div class="money money_5">
                  <div class="money money_6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BgMoneyFly"
}
</script>

<style lang="scss">/*
body {
  background: #000;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 500px;
  font-family: 'Anton', sans-serif;
  font-size: 28px;
}
*/

#world {
  width: 100vh;
  height: 100vh;
  position: relative;

  div {
    transform-style: preserve-3d;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 500px;
    font-family: 'Anton', sans-serif;
    font-size: 28px;
  }

  .moneys {
    @for $i from 0 through 30 {
      $R: random(255);
      $G: random(100);
      $B: random(80);
      $color: rgba($R, $G, $B, 1);
      &:nth-child(#{$i + 1}) {
        position: absolute;
        top: #{random(600) - 300}px;
        left: #{random(200) - 100}px;
        transform-origin: #{random(300) - 200}px #{random(400) - 200}px;
        transform: translateY(-2000px);
        animation: rotate #{random(5000) + 10000}ms #{random(3000)}ms linear infinite;

        .money_wrapper {
          transform: rotateX(#{random(360)}deg) rotateY(#{random(360)}deg) rotateZ(#{random(360)}deg);

          .money {
            position: absolute;
            left: 19px;
            width: 20px;
            height: 58px;
            transform-origin: 0 0;

            &::before {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              color: rgba(70, 80, 60, 1);
              backface-visibility: hidden;
            }
          }

          @for $j from 1 through 10 {
            .money_#{$j} {
              $param: random(50);
              background: rgba(200 + $param, 190 + $param, 170 + $param, 1);
              animation: rotate_#{$i}_#{$j} random(2000) + 1000ms ease-in-out infinite alternate;
              @keyframes rotate_#{$i}_#{$j} {
                0% {
                  transform: rotateY(random(180) - 90 + 0deg);
                }
                100% {
                  transform: rotateY(random(180) - 90 + 0deg);
                }
              }
            }
          }

          .money_1::before {
            content: '¥';
          }

          .money_2::before {
            content: '1';
          }

          .money_3::before {
            content: '0,';
          }

          .money_4::before {
            content: '0';
          }

          .money_5::before {
            content: '0';
          }

          .money_6::before {
            content: '0';
          }
        }
      }
    }
  }
}

@keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(-600px);
  }
  100% {
    transform: rotateX(360 * 2deg) rotateY(360deg) rotateZ(360 * 2deg) translateY(600px);
  }
}
</style>
