<template>
  <div :style="`:root { --wall: '${backgroundWrapper}'; }`" class="scene">
    <div class="wrap">
      <div class="wall wall-right"></div>
      <div class="wall wall-left"></div>
      <div class="wall wall-top"></div>
      <div class="wall wall-bottom"></div>
      <div class="wall wall-back"></div>
    </div>
    <div class="wrap">
      <div class="wall wall-right"></div>
      <div class="wall wall-left"></div>
      <div class="wall wall-top"></div>
      <div class="wall wall-bottom"></div>
      <div class="wall wall-back"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BgLightspeed",
  props: {
    backgroundWrapper: {
      type: String,
      required: false,
      default: "https://www.jq22.com/newjs/PIA09959-1280x800_copy.jpg"
    },
    bolded: {
      type: String,
      required: false,
      default: ""
    },
    counter: {
      type: Number,
      default: 100
    }
  }
}
</script>

<style lang="scss">
/*body {
  background: #791f1f;
  text-align: center;
}*/
/*

body:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
*/

.scene {
  display: inline-block;
  vertical-align: middle;
  perspective: 5px;
  perspective-origin: 50% 50%;
  position: relative;
  // $background_uri: var(--wall);;
  // $background_uri: "https://www.jq22.com/newjs/PIA09959-1280x800_copy.jpg";

  .wall {
    background: url("https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI");
    background-size: cover;
  }

  .wrap {
    position: absolute;
    width: 1000px;
    height: 1000px;
    left: -500px;
    top: -500px;
    transform-style: preserve-3d;
    animation: move 12s infinite linear;
    animation-fill-mode: forwards;
  }

  .wrap:nth-child(2) {
    animation: move 12s infinite linear;
    animation-delay: 6s;
  }

  .wall {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    animation: fade 12s infinite linear;
    animation-delay: 0s;
  }

  .wrap:nth-child(2) .wall {
    animation-delay: 6s;
  }

  .wall-right {
    transform: rotateY(90deg) translateZ(500px);
  }

  .wall-left {
    transform: rotateY(-90deg) translateZ(500px);
  }

  .wall-top {
    transform: rotateX(90deg) translateZ(500px);
  }

  .wall-bottom {
    transform: rotateX(-90deg) translateZ(500px);
  }

  .wall-back {
    transform: rotateX(180deg) translateZ(500px);
  }

}

@keyframes move {
  0% {
    transform: translateZ(-500px) rotate(0deg);
  }
  100% {
    transform: translateZ(500px) rotate(0deg);
  }
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>
