/* Lens-flare artwork and disc styling adapted from https://the-alps.webflow.io/. */
.jabal-lens-flare {
  z-index: 3;
  position: absolute;
  top: 12%;
  right: -15vw;
  width: 30vw;
  height: 30vw;
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
}

.jabal-flare-aura {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
}

.jabal-flare-discs {
  position: absolute;
  inset: 0;
  perspective: 200vw;
  transform-style: preserve-3d;
  transform: rotateX(-8deg) rotateY(-20.5deg) rotateZ(-30deg);
}

.jabal-flare-disc {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  filter: blur(2px);
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
  background-image: radial-gradient(circle, #fff, transparent 0%, #ffff8033 65%, transparent 70%);
  transform-style: preserve-3d;
  transform: translateZ(20vw);
}

.jabal-flare-disc--2 {
  inset: 45%;
  background-image: radial-gradient(circle, #fff, transparent 0%, #80ffbf33 65%, transparent 70%);
  transform: translateZ(30vw);
}

.jabal-flare-disc--3 {
  inset: 49%;
  opacity: .5;
  background-image: radial-gradient(circle, #fff, #0ff 0%, transparent);
  transform: translateZ(35vw);
}

.jabal-flare-disc--4 {
  inset: 49%;
  opacity: .5;
  background-image: radial-gradient(circle, #fff, #0080ff 0%, transparent);
  transform: translateZ(40vw);
}

.jabal-flare-disc--5 {
  background-image: radial-gradient(circle, #fff, transparent 0%, #ffbf8040 65%, transparent 70%);
  transform: translateZ(45vw);
}

.jabal-flare-disc--6 {
  inset: 40%;
  background-image: radial-gradient(circle, #fff, transparent 0%, #ff80bf26 65%, transparent 70%);
  transform: translateZ(50vw);
}

.jabal-flare-disc--7 {
  inset: 32%;
  background-image: radial-gradient(circle, #fff, transparent 0%, #f0ff801f 65%, transparent 70%);
  transform: translateZ(60vw);
}

@media screen and (max-width: 767px) {
  .jabal-lens-flare {
    top: 7.5%;
  }
}