<!-- ALL THE HTML -->
<template>
  <div id="app">
   <div
      v-for="(item, index) in clouds"
      class="cloud"
      :id="'cloud-' + index"
      :style="makeStarStyles(index)"
         ></div>
    <!--<button class="testbtn" @click="changeDisplay">Fire!</button> -->
    <div id="holoLoader" :class="displayMode ? 'active' : 'notActive'">
      <div class="holoLayer" id="core"><canvas id="coreCanvas" /></div>
      <div class="holoLayer" id="firstCircle">
        <canvas width="450" height="450" id="secondCanvas" />
      </div>
      <div class="holoLayer" id="secondCircle">
        <div class="slider a">
        <div class="sliderPoint a">
          <!-- <div v-for="item in sparks" class="spark" /> -->
          </div>
          </div>
        </div>
      <div class="holoLayer" id="thirdCircle"></div>
     <div class="holoLayer" id="fourthCircle"></div>
     <div class="holoLayer" id="fifthCircle">
       <canvas id="firstCanvas" />
     </div>
     <div class="holoLayer" id="sixthCircle"></div>
    </div>
   <canvas width="470" height="200" id="shootingParticles" :class="displayMode ? 'active' : 'notActive'"/>
  </div>
</template>
<!-- ALL THE JAVASRIPT -->
<script>
export default {
  data() {
    return {
      clouds: 50,
      particles:300,
      particleArray:[],
      shootingParticles:100,
      shootingParticlesArray:[],
      ringNumber:8,
      stylesArray:[],
      ringArray:[],
      instances: 4,
      count:300,
      countArray:[],
      start:65,
      then: Date.now(),
      displayModeEngage:Date.now(),
      displayMode:false,
      angles:[[0,25,10,'rgba(255,255,255,1)'],
              [50,76,10,'rgba(255,255,255,1)'],
              [101,126,10,'rgba(255,255,255,1)'],
              [152,177,10,'rgba(255,255,255,1)'],
              [203,227,10,'rgba(255,255,255,1)'],
              [258,279,10,'rgba(255,255,255,1)'],
              [305,334,10,'rgba(255,255,255,1)'],
             ],
    };
  },
  methods: {
    changeDisplay() {
      this.displayMode = !this.displayMode
      this.displayModeEngage = Date.now();
      //console.log("changed display!")
    },
    loop() {
      let now = Date.now();
      let delta = now - this.then;
      this.update();
      this.render();
      this.then = now;
      requestAnimationFrame(this.loop);
    },
    update() {
      if(this.displayMode === false) {
        this.start = this.start + 0.2;
        this.start >= 100 ? (this.changeDisplay(), this.start = 100) : null;
      }
      else {
        this.start = this.start - 0.4;
        this.start <= 0 ? (this.changeDisplay(), this.start = 0) : null;
      }
      //console.log(this.start)
      this.particleArray.forEach((item, index) => {
        this.adjustLength(item);
        this.moveParticle(item);
      })
      this.shootingParticlesArray.forEach((item, index) => {
        this.moveShootingParticle(item)  
      })
      this.ringArray.forEach((item, index) => {
        this.updateRings(item)  
      })
      this.countArray.forEach((item, index) => {
        this.updateCount(item)  
      })
      //console.log("we updating!")
    },
    render() {
      let canvas1 = document.getElementById("coreCanvas");
      let canvas2 = document.getElementById("firstCanvas");
      let canvas3 = document.getElementById("secondCanvas");
      let canvas4 = document.getElementById("shootingParticles")
      let ctx = canvas1.getContext("2d");
      let ctx2 = canvas2.getContext("2d");
      let ctx3 = canvas3.getContext("2d");
      let ctx4 = canvas4.getContext("2d");
      ctx.globalCompositeOperation = 'screen'; //test */
      ctx4.globalCompositeOperation = 'screen'; //test */
      ctx.clearRect(0, 0, canvas1.width, canvas1.height);
      this.particleArray.forEach((item, index) => {
        this.renderParticle(item, ctx)
      })
      ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
      this.drawCircularPlate(this.angles, ctx2);
      ctx3.clearRect(0, 0, canvas3.width, canvas3.height);
      this.countArray.forEach((item, index) => {
        this.drawCounter(item, ctx3)
      })
      this.drawShootTime(this.start, ctx3)
      this.drawOuterRing(this.ringArray, ctx3);
      ctx4.clearRect(0,0,canvas4.width, canvas4.height);
      this.shootingParticlesArray.forEach((item, index) => {
        this.renderShootingParticles(item, ctx4)
      })
      /* ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.globalCompositeOperation = 'lighten'; //test */
      //console.log("we rendering!")
    },
    createShootingParticles(number) {
      for(let n=0;n<number;n++) {
        let obj = {
          x:470,
          y:95 + (Math.random() * 12 - 6),
          radius:Math.random() * 5 + 15,
          speed:Math.random() * 7 + 1,
          opacity:1,
          delay:Math.floor(Math.random() * 1000),
        }
        this.shootingParticlesArray.push(obj);
      }
    },
    drawCounterInitiation(number) {
      for(let n=0; n<number; n++) {
        let obj = {
          number: n,
          opacity:Math.random(),
          reverse:true,
          start: n * (360/number),
          finish:(n + 1) * (360/number) ,
          fill: "transparent",
          shadow: "rgba(255,255,255,0.5)",
          strokeStyle:"255,255,255",
          lineWidth: Math.floor(Math.random() * 5 + 3)
        }
        this.countArray.push(obj)
      }
    },
    drawShootTime(start, ctx) {
      let finish = 360/100 * start - 90;
      ctx.strokeStyle = "rgba(255,255,255," + start/100 + ")";
      ctx.beginPath();
      ctx.arc(450/2, 450/2, 185, -90 * (Math.PI / 180), finish * (Math.PI / 180));  
      ctx.stroke();
      ctx.closePath();
      //X = Math.cos(angle*Math.PI/180) * length + startPointX
      let calculateX = Math.cos((finish+5)*Math.PI/180) * 185 + (450/2)
      //Y = Math.sin(angle*Math.PI/180) * length + startPointY    
      let calculateY = Math.sin((finish+5)*Math.PI/180) * 185 + (450/2)
      ctx.fillStyle = "white";
      ctx.textAlign = "center";
      ctx.font = "10px Arial";
      ctx.fillText(start.toString().substring(0,2) + "%", calculateX, calculateY);
    },
    updateCount(item) {
      if(item.reverse === true) {
        item.opacity -= 0.01;
        item.opacity < 0.1 ? item.reverse = false : null
      }
      if(item.reverse === false) {
        item.opacity += 0.01;
        item.opacity > 0.9 ? item.reverse = true : null
      }
    },
    drawCounter(item, ctx) {
        if(item.number % 2) {
        ctx.beginPath();
        ctx.strokeStyle = "rgba(" + item.strokeStyle + "," + item.opacity + ")";
        ctx.arc(450/2, 450/2, 215 + (item.lineWidth/2), item.start * (Math.PI / 180), item.finish * (Math.PI / 180));
        ctx.fillStyle = item.fill;
        ctx.fill();
        ctx.shadowColor = item.shadow;
        ctx.shadowBlur = 8;
        ctx.lineWidth = item.lineWidth
        ctx.strokeStyle = 1;
        ctx.stroke();
        ctx.closePath();
      }
    },
    createCoreParticles(number) {
      for(let n=0;n<number;n++) {
        let angle = Math.floor(Math.random() * 360);
        let ring = Math.floor(Math.random() * 25);
        let length = 80 + Math.random() * 40;
        let speed = Math.random() - 0.5;
        speed > 0.3 ? speed = 0.3 : speed = speed;
        let particle = {
          x:250 + (length + ring * Math.cos(angle * (Math.PI / 180))),
          y:250 + (length + ring * Math.sin(angle * (Math.PI / 180))),
          radius:Math.random() * 2 + 2,
          startRadius:Math.random() * 2 + 2,
          length:length,
          speed:speed,
          usedLength:length,
          grow:Math.random() > 0.5 ? true : false,
          startAngle:angle,
          number:n,
          usedAngle:angle,
          ring: ring,
          color: Math.random() > 0.5 ? "rgba(255, 255, 255,0.3)" : "rgba(214,107,24,0.3)",
          shadow:"rgba(0, 0, 0,1)",
          number:n,
        }
        this.particleArray.push(particle);
      }
    },
    makeStarStyles(cloud) {
      if(document.getElementById("cloud-" + cloud) === null) {
      let radius = Math.floor(Math.random() * 230 + 130);
      let x = "top:" + Math.floor(Math.random() * document.body.clientHeight - radius/2) + "px";
      let y = "left:" + Math.floor(Math.random() * document.body.clientWidth - radius/2) + "px";
      let animationTime = Math.floor(Math.random() * 10 + 5);
      let animationDelay = Math.floor(Math.random() * 15);
      let background = "background:radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.05) 34%, rgba(217,217,217,0.0) 70%)";
      let style = "position:absolute;" + x + ";" + y + ";" + "height:" + radius + "px;" + "width:" + radius + "px;" + "border-radius:180px;" + background + ";animation-duration: " + animationTime + "s;animation-delay:" + animationDelay + "s;";
        this.stylesArray.push(style)
      //console.log(style)
      return style;
      }
      else {
        return this.stylesArray[cloud]
      }
    },
    renderParticle(particle, ctx) {
      var grd = ctx.createRadialGradient(particle.x, particle.y, 1, particle.x,   particle.y, particle.radius-particle.radius/10);
      grd.addColorStop(0,particle.color);
      grd.addColorStop(1,"rgba(255,255,255,0)");
      ctx.fillStyle = grd;
      ctx.beginPath();
      ctx.arc(particle.x, particle.y, particle.radius, 0, 2 * Math.PI);
      ctx.closePath();
      ctx.fill();
    },
    renderShootingParticles(particle, ctx) {
      if(particle.x < 470) {
      ctx.fillStyle = "rgba(255,255,255," + particle.opacity + ")";
      ctx.beginPath();
      ctx.arc(particle.x, particle.y, particle.radius, 0, 2 * Math.PI);
      ctx.closePath();
      ctx.fill();
      }
    },
    moveShootingParticle(item) {
      if(this.displayMode === true && Date.now() > this.displayModeEngage + 1000) {
        item.opacity = item.x/470;
        item.x/470 * 10 > 0 ? item.radius = item.x/470 * 10 : item.radius = 0;
        if(item.x > 0) {
          if(Date.now() > this.displayModeEngage + 1000 + item.delay) {
            item.x = item.x - item.speed
          }
        }
        else {
          item.x = 470
        }
      }
      else if(this.displayMode === false && Date.now() < this.displayModeEngage + 1500) {
          item.opacity = item.x/470;
          item.x/470 * 10 > 0 ? item.radius = item.x/470 * 10 : item.radius = 0;
          item.x = item.x - item.speed
      }
      else if(this.displayMode === false && Date.now() > this.displayModeEngage + 1500) {
        item.x = 470;
      }
    },
    createRings(rings, array) {
      //console.logs
      for(let i = 0; i < rings ; i ++) {
        let distance = (360/rings)
        let startAng = Math.floor(Math.random() * 360)
        let endAng = startAng + Math.random() * 50 + 50;
        //let distance = Math.floor(Math.random() * 50 + 50)
        let distandeDrawn = (360/rings) /  100 * 90
        let distanceTransparent = (360/rings) /  100 * 10
        let obj = {
           startAng: startAng * (Math.PI / 180),
           endAng: endAng * (Math.PI / 180),
           length: 120 + 7 * i,
           shown:true,
           moveDirection:Math.random() > 0.5 ? true : false,
           moveDone:false,
          }
        array.push(obj);
        console.log(obj)
      }
    },
    updateRings(ring) {
      if(ring.moveDone === false) {
        ring.moveDirection ?
         (ring.startAng -= 0.01, ring.endAng -= 0.01) : 
         (ring.startAng += 0.01, ring.endAng += 0.01);
         Math.random() < 0.02 ? ring.moveDone = true : null;
      }
      else {
        ring.moveDirection = !ring.moveDirection;       
        ring.moveDone = false
      }
    },
    drawOuterRing(points, ctx) {
      points.forEach(item => {
         if(item.shown === true) {
           //console.log(item.startAng, item.endAng)
            ctx.beginPath();
            ctx.arc(450/2, 450/2, item.length, item.startAng, item.endAng, 0, 2 * Math.PI);
            ctx.fillStyle = 'transparent'
            ctx.fill();
            ctx.shadowColor = 'rgba(255,255,255,1)';
            ctx.shadowBlur = 15;
            ctx.lineWidth = 5;
            ctx.strokeStyle = "rgba(255,255,255,1)";
            ctx.stroke();
            ctx.closePath();
         }
      })
    },
    adjustLength(particle) {
      //particle.number === 0 ? console.log(particle.grow) : null
      if(particle.grow && !this.displayMode) {
        particle.usedLength += Math.abs(particle.speed) / 2;
        particle.usedLength > particle.length + 20 ? particle.grow = false : null;
        particle.radius > particle.startRadius ? (particle.radius -= 0.5, particle.usedLength += particle.radius / 3) : null;
      }
      else if(!particle.grow && !this.displayMode) {
        particle.usedLength -= Math.abs(particle.speed) / 2;
        particle.usedLength < particle.length - 20 ? particle.grow = true : null;
        particle.radius > particle.startRadius ? (particle.radius -= 1) : null;
      }
      else if(this.displayMode) {
        !particle.grow ? particle.grow = true : null;
        particle.usedLength > 0 ? particle.usedLength -= particle.radius / 10 : null;
        particle.radius < 25 ? particle.radius += 1 : null;
      }
    },
    moveParticle(particle) {
      //Math.random() < 0.5 ? particle.usedLength++ : particle.usedLength--;
      particle.usedAngle = particle.usedAngle + particle.speed;
      particle.x = 250 + particle.usedLength * Math.cos(particle.usedAngle * (Math.PI / 180));
      particle.y = 250 + particle.usedLength * Math.sin(particle.usedAngle * (Math.PI / 180));
    },
    drawCircularPlate(angles,ctx) {
      angles.forEach((item) => {     
        ctx.beginPath();
        ctx.arc(450/2, 450/2, 150, item[0] * (Math.PI / 180), item[1] * (Math.PI / 180));
        ctx.fillStyle = 'transparent'
        ctx.fill();
        ctx.shadowColor = item[3];
        ctx.shadowBlur = 15;
        ctx.lineWidth = item[2];
        ctx.strokeStyle = item[3];
        ctx.stroke();
        ctx.closePath();
      })
        ctx.beginPath();
        ctx.arc(450/2, 450/2, 138, 0, 2 * Math.PI);
        ctx.fillStyle = 'transparent'
        ctx.fill();
        ctx.shadowColor = 'rgba(255,255,255,1)';
        ctx.shadowBlur = 15;
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'rgba(255,255,255,1)';
        ctx.stroke();
        ctx.closePath();
      
        ctx.beginPath();
        ctx.arc(450/2, 450/2, 163, 0, 2 * Math.PI);
        ctx.fillStyle = 'transparent'
        ctx.fill();
        ctx.shadowColor = 'rgba(255,255,255,1)';
        ctx.shadowBlur = 15;
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'rgba(255,255,255,1)';
        ctx.stroke();
        ctx.closePath();
    }
  },
  mounted() {
    this.drawCounterInitiation(this.count);
    this.createCoreParticles(this.particles);
    this.createShootingParticles(this.shootingParticles);
    this.createRings(this.ringNumber,this.ringArray);
    let canvas1 = document.getElementById("coreCanvas");
    canvas1.width = document.getElementById("core").offsetWidth;
    canvas1.height = document.getElementById("core").offsetHeight;
    let canvas2 = document.getElementById("firstCanvas");
    canvas2.width = document.getElementById("firstCircle").offsetWidth;
    canvas2.height = document.getElementById("firstCircle").offsetHeight;
    let ctx2 = canvas2.getContext("2d");
    this.drawCircularPlate(this.angles, ctx2);
    let canvas3 = document.getElementById("secondCanvas");
    canvas2.width = document.getElementById("firstCircle").offsetWidth;
    canvas2.height = document.getElementById("firstCircle").offsetHeight;
    window.addEventListener("resize", function(){
    let canvas1 = document.getElementById("coreCanvas");
    canvas1.width = document.getElementById("core").offsetWidth;
    canvas1.height = document.getElementById("core").offsetHeight;
    let canvas2 = document.getElementById("firstCanvas");
    canvas2.width = document.getElementById("firstCircle").offsetWidth;
    canvas2.height = document.getElementById("firstCircle").offsetHeight;
    let canvas3 = document.getElementById("secondCanvas");
    canvas2.width = document.getElementById("firstCircle").offsetWidth;
    canvas2.height = document.getElementById("firstCircle").offsetHeight;
    }, true);
    //Let's start this!
    //we go!
    this.loop();
  }
};
</script>
<!-- ALL THE STYLES -->
<style>
  :root {
  --main-blue-color: #13aeff;
  --main-white-color: #ffffff;
  --main-orange-color: #d66b18;
}
  body {
    width:100vw;
    height:100vh;
    margin:0;
    padding:0;
    overflow:hidden;
    background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(28,38,47,1) 0%, rgba(37,47,57,1) 90% );
  }
  .testbtn {
    position: absolute;
    top: 20px;
    left: calc(50vw - 25px);
    height: 20px;
    box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    height: 25px;
    width: 70px;
    background-color: transparent;
    z-index: 10000000000000;
    color: white;
    border: 1px solid white;
  }
  .cloud {
    z-index:-1;
    opacity:0.5;
    animation:cloudFade;
  }
 @keyframes cloudFade {
  0%    {opacity:0.5;}
  50%   {opacity:0;}
  100%  {opacity:0.5;}
}
  
  @keyframes reverseRotate {
  from { transform:rotate(0deg) } 
  to { transform:rotate(360deg) } 
}
    @keyframes rotate {
  from { transform:rotate(360deg) } 
  to { transform:rotate(0deg) } 
}
  
  #secondCircle .slider {
    background-color: transparent;
    width: calc(50% + 4px);
    box-sizing: border-box;
    height: 8px;
    top:calc(50% - 4px);
    left:calc(50% - 4px);
    position: relative;
    animation:rotate 8s infinite linear;
    transform-origin: 4px 4px;

  }
  
  #secondCircle .sliderPoint.a {
    box-shadow: 0px 0px 3px 2px rgba(255,255,255,0.55);
    left: calc(100% - 2px);
    width: 4px;
    background-color: rgba(255,255,255,0.55);
    position:relative;
    box-sizing: border-box;
    border-radius: 100%;
    height: 4px;
  }
  
  #secondCircle .sliderPoint.a:before {
    content: '';
    box-shadow: 0px 0px 3px 2px rgba(255,255,255,0.55);
    width: 4px;
    position: relative;
    top: 183px;
    left: -285px;
    border-radius: 90px;
    height: 4px;
    display: block;
    background-color: rgba(255,255,255,0.55);
  }
  #secondCircle .sliderPoint.a:after {
    content: '';
    box-shadow: 0px 0px 3px 2px rgba(255,255,255,0.55);
    width: 4px;
    position: relative;
    top: -190px;
    left: -270px;
    border-radius: 90px;
    height: 4px;
    display: block;
    background-color: rgba(255,255,255,0.55);
  }
  #holoLoader.active .sliderPoint.a:after {
    animation:sparks 3s infinite linear 0s;
  }
  #holoLoader.active .sliderPoint.a:before {
    animation:sparks 3s infinite linear 1.2s;
  }
  #holoLoader.active .sliderPoint.a {
    animation:sparks 3s infinite linear 0.3s;
  }
  
  @keyframes sparks {
    0% {
     box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75);
    }
    60% {
     box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75); 
    }
    61% {
     box-shadow: 0px 0px 5px 8px rgba(255,255,255,0.75); 
    }
    62% {
     box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75); 
    }
    84% {
     box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75); 
    }
    85% {
     box-shadow: 0px 0px 5px 8px rgba(255,255,255,0.75); 
    }
    86% {
     box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75); 
    }
  }
  
  #holoLoader {
    z-index:1;
    //box-shadow: 0px 0px 39px 0px rgba(148,255,241,1);
    position:relative;
    border-radius:50%;
    background-color:rgba(255,255,255,0);
    width:500px;
    height:500px;
    margin:auto;
    margin-top:calc(50vh - 250px);
    transition:all 0.5s ease-in-out 0.4s;
    //transform: perspective(1000px) rotateX(30deg) rotateY(-50deg) rotateZ(0deg);

  }
  
  .holoLayer {
    //background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(202,226,255,0) 65%, rgba(147,196,255,1) 100%);
    //box-shadow: 0px 0px 39px 0px rgba(148,255,241,0.3);
    border-radius:360px;
    transition:all 0.5s ease-in-out 0s;
  }
  
  #holoLoader.active {
    transform: perspective(1000px) rotateX(30deg) rotateY(-50deg) rotateZ(0deg);
    transition:all 0.5s ease-in-out;
  }
  
  #core {
    width:100%;
    height:100%;
    background:radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 17%, rgba(147,196,255,0.1) 24%, rgba(255,255,255,0) 30%)
  }
  #coreCanvas, #firstCanvas, #secondCanvas {
   width:100%;
   height:100%;
  }
  #firstCircle {
    position:absolute;
    top:0px;
    width:90%;
    height:90%;
    margin:5%;
  }
  
  @keyframes stutterMovement {
    0% {
      transform:rotate(0deg)
    }
    10% {
      transform:rotate(50deg)
    }
    30% {
      transform:rotate(50deg)
    }
    40% {
      transform:rotate(50deg)
    }
    45% {
      transform:rotate(70deg)
    }
    60% {
      transform:rotate(-20deg)
    }
    70% {
      transform:rotate(0deg)
    }
    85% {
      transform:rotate(20deg)
    }
    90% {
      transform:rotate(0deg)
    }
    100% {
      transform:rotate(0deg)
    }
  }
  
  #holoLoader.active #firstCircle {
    transform: translateX(-130px) translateY(-80px);
    transition:all 0.5s ease-in-out 0.4s;
  }
  #secondCircle {
    position:absolute;
    top:0px;
    width:80%;
    height:80%;
    margin:10%;
    border:1px solid var(--main-orange-color);
  }
 
  #secondCircle:before {
    transition:all 0.5s ease-in-out 0s;
    content:'';
    border:7px dotted rgba(79, 223, 255,0.3);
    position:absolute;
    top:0px;
    width:100%;
    height:100%;
    top: 0px;
    left: 0px;
    border-radius:360%;
    opacity:0;
  }
  #secondCircle:after {
    transition:all 0.5s ease-in-out 0s;
    content:'';
    border:5px solid rgba(79, 223, 255,0.7);
    position:absolute;
    top:0px;
    width:100%;
    height:100%;
    border-radius:360%;
    opacity:0;
  }
  #holoLoader.active #secondCircle {
    border:2px solid rgba(255, 255, 255,0.5);
    transform:translateX(-180px) translateY(-120px);
    transition:all 0.5s ease-in-out 0.4s;
  }
  
  #holoLoader.active #secondCircle:before {
    opacity:1;
    top: -55px;
    left: -75px;
    transition:all 0.5s ease-in-out 0.4s;
    animation: rotation 5s linear 0s infinite;
    transformation-origin:100% 100%;
  }
  
  @keyframes rotation {
    0% {
      transform:rotateZ(0deg)
    }
    100% {
      transform:rotateZ(360deg)
    }
  }
  #holoLoader.active #secondCircle:after {
    opacity:1;
    transform: translateX(45px) translateY(35px);
    transition:all 0.5s ease-in-out 0.4s;
    
  }
  #thirdCircle {
    position:absolute;
    top:0px;
    width:70%;
    height:70%;
    margin:15%;
    border:0px solid white;
    opacity:0;
    transition:all 0.5s ease-in-out 0s;
  }
  #holoLoader.active #thirdCircle:before {
    content:'';
    display:block;
    width:100%;
    height:100%;
    position:absolute;
  }
  #holoLoader.active #thirdCircle:after {
    content:'';
    position:absolute;
    display:block;
    border-radius:180%;
    width:100%;
    height:100%;
  }
  #holoLoader.active #thirdCircle {
    border:5px solid white;
    opacity:1;
    transform: translateX(-520px) translateY(-330px);
    transition:all 0.5s ease-in-out 0.4s;
  }
  #fourthCircle {
    position:absolute;
    top:0px;
    width:60%;
    height:60%;
    margin:20%;
  }
   #holoLoader.active #fourthCircle {
    transform: translateX(-810px) translateY(-540px);
    transition:all 0.5s ease-in-out 0.4s;
  }
  #fifthCircle {
    position:absolute;
    top:0px;
    width:50%;
    height:50%;
    margin:25%;
    animation: stutterMovement 5s infinite linear;
  }
  #holoLoader.active #fifthCircle {
    transform: translateX(-600px) translateY(-400px);
    transition:all 0.5s ease-in-out 0.4s;
  }
  #sixthCircle {
    position:absolute;
    top:0px;
    width:40%;
    height:40%;
    margin:30%;
    border:1px dashed var(--main-orange-color);
    border-radius:180%;
  }
  #holoLoader.active #sixthCircle {
    border:3px solid var(--main-white-color);
    transition:all 0.5s ease-in-out 0.4s;
  }
  
  #holoLoader.active #sixthCircle:before {
    position:absolute;
    width:40%;
    height:40%;
    margin:30%;
    top:-5px;
    left:-5px;
    border:1px dashed var(--main-white-color);
    border-radius:180%;
    transition: all 0.5s ease-in-out 0s;
    animation: bubbleEffect 4s infinite linear;
    box-shadow: 0px 0px 0px rgba(255,255,255,0);
  }
   #sixthCircle:before {
    content:'';
    position:absolute;
    border-radius:180%;
    width:20%;
    display: block;
    height:20%;
    margin:40%;
    top: -5px;
    left: -5px;
    border:1px solid var(--main-white-color);
    box-shadow: 0px 0px 5px 2px rgba(214,107,24,1), inset 0 0px 5px rgba(214,107,24,1);
    transition:all 0.5s ease-in-out 0.4s;
    animation: rotationY 4s infinite linear;
  }
  #holoLoader.active #sixthCircle:after {
    position:absolute;
    width:40%;
    height:40%;
    margin:30%;
    top:-5px;
    left:-5px;
    border:1px dashed var(--main-white-color);
    border-radius:180%;
    transition: all 0.5s ease-in-out 0s;
    animation: bubbleEffect 4s infinite linear;
    box-shadow: 0px 0px 0px rgba(255,255,255,0);
  }
  #sixthCircle:after {
    content:'';
    position:absolute;
    display: block;
    width:20%;
    height:20%;
    border-radius:180%;
    margin:40%;
    top: -5px;
    left: -5px;
    box-shadow: 0px 0px 5px 2px var(--main-orange-color), inset 0 0px 5px var(--main-orange-color);
    border:1px solid var(--main-white-color);
    transition:all 0.5s ease-in-out 0.4s;
    animation: rotationX 8s infinite linear;
  }
  
  @keyframes rotationX {
    0% {
      transform:rotateX(0deg) rotateY(0deg) scale(1);
    }
    100% {
      transform:rotateX(360deg) rotateY(-360deg) scale(1);
    }
  }
  
  @keyframes rotationY {
     0% {
      transform:rotateY(0deg) rotateX(0deg) scale(1)
    }
    100% {
      transform:rotateY(360deg) rotateX(360deg) scale(1)
    }
  }
  
  @keyframes bubbleEffect {
    0% {
      animation-timing-function: linear;
      transform:scale(1);
    }
    25% {
      animation-timing-function: linear;
      opacity:1;
      transform:scale(1.2);
    }
    50% {
      animation-timing-function: linear;
      opacity:0.5;
      transform:scale(1);
    }
    75% {
      animation-timing-function: linear;
      opacity:0.5;
      transform:scale(0.8);
    }
    100%{
      animation-timing-function: linear;
      opacity:1;
      transform:scale(1);
    }
  }
  
  #shootingParticles {
    opacity:0;
    width: 470px;
    height: 200px;
    z-index:1;
    position: absolute;
    top: calc(50vh - 168px);
    left: calc(50vw - 460px);
    transform: rotateZ(18deg);
    transition:all 0.5s linear 0.5s;
  }
  
  #shootingParticles.active {
     transition:all 0.5s linear 1s;
     opacity:1;
  }
</style>