@import url("https://fonts.googleapis.com/css?family=Open+Sans");

.hud-container {
  position: absolute;
  top: 106px;
  left: 0;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}

.hud-container div {
  position: absolute;
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.hud-container div:before,
.hud-container div:after {
  content: "";
  position: absolute;
  display: block;
  box-sizing: border-box;
}

.hud-container .hud .target {
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  pointer-events: all;
  z-index: 10;
}

.hud-container .hud .target.bottom {
  top: auto;
  bottom: 0;
}

.hud-container .hud .target.right {
  left: auto;
  right: 0;
}

.hud-container .hud {
  top: calc(12% - 106px);
  right: 3vw;
  width: 40vw;
  height: 40vw;
  transition: all 0.5s ease;
  transform-origin: center center;
  transform-style: preserve-3d;
  transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)
    scale(1);
  animation: hud-3d 2s 4s ease-in-out forwards;
  pointer-events: none;
}
html[dir="rtl"] .hud-container .hud {
  left: 3vw;
  right: unset;
}

.hud-container .hud .circle {
  border-radius: 50%;
}

.hud-container .hud .orange {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: glow-orange 1s 3s ease-in-out forwards;
}

.hud-container .hud .orange .notches {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: perspective(500px) translate3d(0px, 0px, 0px);
  animation:
    notches-rotate 3s 1s ease-in-out,
    notches-3d 2s 4s ease-in-out,
    notches-pulse-rotate 10s 6s ease-in-out alternate infinite;
}

.hud-container .hud .orange .notches .notch {
  top: 0;
  left: calc(50% - 0.25vw);
  width: 0.5vw;
  height: 50%;
  transform-origin: bottom center;
  animation: notches-grow 3.5s 0.5s ease-in-out;
}

.hud-container .hud .orange .notches .notch:before {
  width: 100%;
  height: 10%;
  background: #2dae92;
}

.hud-container .hud .orange .notches .notch1 {
  transform: rotate(45deg);
}
.hud-container .hud .orange .notches .notch2 {
  transform: rotate(75deg);
}
.hud-container .hud .orange .notches .notch3 {
  transform: rotate(105deg);
}
.hud-container .hud .orange .notches .notch4 {
  transform: rotate(135deg);
}
.hud-container .hud .orange .notches .notch5 {
  transform: rotate(165deg);
}
.hud-container .hud .orange .notches .notch6 {
  transform: rotate(195deg);
}
.hud-container .hud .orange .notches .notch7 {
  transform: rotate(225deg);
}
.hud-container .hud .orange .notches .notch8 {
  transform: rotate(255deg);
}
.hud-container .hud .orange .notches .notch9 {
  transform: rotate(285deg);
}
.hud-container .hud .orange .notches .notch10 {
  transform: rotate(315deg);
}
.hud-container .hud .orange .notches .notch11 {
  transform: rotate(345deg);
}
.hud-container .hud .orange .notches .notch12 {
  transform: rotate(375deg);
}

.hud-container .hud .orange .outer1 {
  top: 7%;
  left: 7%;
  width: 86%;
  height: 86%;
  border: 0.25vw dotted #2dae92;
}

.hud-container .hud .orange .outer2 {
  top: 12%;
  left: 12%;
  width: 76%;
  height: 76%;
  border: 0.45vw solid #2dae92;
}

.hud-container .hud .orange .outer3 {
  top: 20%;
  left: 20%;
  width: 60%;
  height: 60%;
  border: 0.25vw dotted #2dae92;
}

.hud-container .hud .orange .inner1 {
  top: 22%;
  left: 22%;
  width: 56%;
  height: 56%;
  border: 0.25vw solid #2dae92;
}

.hud-container .hud .orange .inner2 {
  top: 23%;
  left: 23%;
  width: 54%;
  height: 54%;
  border: 0.25vw solid #2dae92;
}

.hud-container .hud .orange .inner3 {
  top: 36%;
  left: 36%;
  width: 28%;
  height: 28%;
  border: 0.25vw dashed #2dae92;
  transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  animation: innerorange3-pulse-3d 2s 4s ease-in-out alternate infinite;
}

.hud-container .hud .orange .topnotches {
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  transform: rotate(90deg) perspective(500px) translate3d(0px, 0px, 0px);
  animation:
    notchestop-rotate 2s 2s ease-in-out,
    notchestop-3d 2s 4s ease-in-out forwards;
}

.hud-container .hud .orange .topnotches .notch {
  top: 0;
  left: calc(50% - 0.4vw);
  width: 0.8vw;
  height: 50%;
  transform-origin: bottom center;
}

.hud-container .hud .orange .topnotches .notch:before {
  width: 100%;
  height: 10%;
  background: #2dae92;
}

.hud-container .hud .orange .topnotches .notch1 {
  transform: rotate(-55deg);
}
.hud-container .hud .orange .topnotches .notch2 {
  transform: rotate(-45deg);
}
.hud-container .hud .orange .topnotches .notch3 {
  transform: rotate(-35deg);
}
.hud-container .hud .orange .topnotches .notch4 {
  transform: rotate(-25deg);
}
.hud-container .hud .orange .topnotches .notch5 {
  transform: rotate(-15deg);
}
.hud-container .hud .orange .topnotches .notch6 {
  transform: rotate(-5deg);
}
.hud-container .hud .orange .topnotches .notch7 {
  transform: rotate(5deg);
}
.hud-container .hud .orange .topnotches .notch8 {
  transform: rotate(15deg);
}
.hud-container .hud .orange .topnotches .notch9 {
  transform: rotate(25deg);
}
.hud-container .hud .orange .topnotches .notch10 {
  transform: rotate(35deg);
}
.hud-container .hud .orange .topnotches .notch11 {
  transform: rotate(45deg);
}
.hud-container .hud .orange .topnotches .notch12 {
  transform: rotate(55deg);
}

.hud-container .hud .orange .bottomnotches {
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  transform: rotate(90deg) perspective(500px) translate3d(0px, 0px, 0px);
  animation:
    notchestop-rotate 2s 2s ease-in-out,
    notchestop-3d 2s 4s ease-in-out forwards;
}

.hud-container .hud .orange .bottomnotches .notch {
  top: 0;
  left: calc(50% - 0.2vw);
  width: 0.4vw;
  height: 50%;
  transform-origin: bottom center;
}

.hud-container .hud .orange .bottomnotches .notch:before {
  width: 100%;
  height: 10%;
  background: #2dae92;
}

.hud-container .hud .orange .bottomnotches .notch1 {
  transform: rotate(125deg);
}
.hud-container .hud .orange .bottomnotches .notch2 {
  transform: rotate(135deg);
}
.hud-container .hud .orange .bottomnotches .notch3 {
  transform: rotate(145deg);
}
.hud-container .hud .orange .bottomnotches .notch4 {
  transform: rotate(155deg);
}
.hud-container .hud .orange .bottomnotches .notch5 {
  transform: rotate(165deg);
}
.hud-container .hud .orange .bottomnotches .notch6 {
  transform: rotate(175deg);
}
.hud-container .hud .orange .bottomnotches .notch7 {
  transform: rotate(185deg);
}
.hud-container .hud .orange .bottomnotches .notch8 {
  transform: rotate(195deg);
}
.hud-container .hud .orange .bottomnotches .notch9 {
  transform: rotate(205deg);
}
.hud-container .hud .orange .bottomnotches .notch10 {
  transform: rotate(215deg);
}
.hud-container .hud .orange .bottomnotches .notch11 {
  transform: rotate(225deg);
}
.hud-container .hud .orange .bottomnotches .notch12 {
  transform: rotate(235deg);
}

.hud-container .hud .orange .center {
  top: 46%;
  left: 43%;
  width: 14%;
  height: 8%;
  transform: translate3d(0px, 0px, 0px);
  animation: center-pulse-3d 12s 4s ease-in-out alternate infinite;
}
html[dir="rtl"] .hud-container .hud .orange .center {
  direction: ltr;
}

.hud-container .hud .orange .center .top,
.hud-container .hud .orange .center .bottom {
  width: 2vw;
  height: 0.25vw;
  background: #2dae92;
}

.hud-container .hud .orange .center .top:before,
.hud-container .hud .orange .center .bottom:before {
  height: 1vw;
  width: 0.25vw;
  background: #2dae92;
}

.hud-container .hud .orange .center .top.left {
  top: 0;
  left: 0;
}

.hud-container .hud .orange .center .top.right {
  top: 0;
  right: 0;
}

.hud-container .hud .orange .center .top.right:before {
  right: 0;
}

.hud-container .hud .orange .center .bottom.left {
  bottom: 0;
  left: 0;
}

.hud-container .hud .orange .center .bottom.left:before {
  bottom: 0;
}

.hud-container .hud .orange .center .bottom.right {
  bottom: 0;
  right: 0;
}

.hud-container .hud .orange .center .bottom.right:before {
  bottom: 0;
  right: 0;
}

.hud-container .hud .blue {
  top: 32%;
  left: 32%;
  width: 36%;
  height: 36%;
  animation: glow-blue 1s 3s ease-in-out forwards;
}

.hud-container .hud .blue .inner1 {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1vw solid #2f70b7;
}

.hud-container .hud .blue .inner2 {
  top: 20%;
  left: 20%;
  width: 60%;
  height: 60%;
  border: 0.25vw solid #2f70b7;
  transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  animation: innerblue2-pulse-3d 2s 4s ease-in-out alternate infinite;
}

.hud-container .hud .blue .notches {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: notches-rotate 3s 1s ease-in-out;
}

.hud-container .hud .blue .notches .notch {
  top: 0;
  left: calc(50% - 0.25vw);
  width: 0.5vw;
  height: 50%;
  transform-origin: bottom center;
}

.hud-container .hud .blue .notches .notch:before {
  width: 100%;
  height: 20%;
  background: #2f70b7;
}

.hud-container .hud .blue .notches .notch1 {
  transform: rotate(45deg);
}
.hud-container .hud .blue .notches .notch2 {
  transform: rotate(75deg);
}
.hud-container .hud .blue .notches .notch3 {
  transform: rotate(105deg);
}
.hud-container .hud .blue .notches .notch4 {
  transform: rotate(135deg);
}
.hud-container .hud .blue .notches .notch5 {
  transform: rotate(165deg);
}
.hud-container .hud .blue .notches .notch6 {
  transform: rotate(195deg);
}
.hud-container .hud .blue .notches .notch7 {
  transform: rotate(225deg);
}
.hud-container .hud .blue .notches .notch8 {
  transform: rotate(255deg);
}
.hud-container .hud .blue .notches .notch9 {
  transform: rotate(285deg);
}
.hud-container .hud .blue .notches .notch10 {
  transform: rotate(315deg);
}
.hud-container .hud .blue .notches .notch11 {
  transform: rotate(345deg);
}
.hud-container .hud .blue .notches .notch12 {
  transform: rotate(375deg);
}

.hud-container .hud .callout {
  opacity: 0;
  width: 0;
  height: 5vw;
  border-bottom: 0.25vw solid #2dae92;
  font-family: "Open Sans", sans-serif;
  color: white;
}

.hud-container .hud .callout.left {
  bottom: 12.5vw;
  left: -10vw;
  animation: calloutleft-grow 3s 3s ease-in-out alternate infinite;
}

.hud-container .hud .callout.right {
  top: 7.5vw;
  right: -10vw;
  text-align: right;
  animation: calloutright-grow 3s 4s ease-in-out alternate infinite;
}

.hud-container .hud .callout .title,
.hud-container .hud .callout .body {
  position: relative;
  width: 100%;
}

.hud-container .hud .callout .title {
  font-size: 2em;
}

/* Interactive hover effects */
.hud-container .hud:has(.target.top.left:hover) {
  animation: none;
  transform: perspective(500px) rotateX(10deg) rotateY(-10deg) rotateZ(0deg)
    scale(0.75);
}

.hud-container .hud:has(.target.top.right:hover) {
  animation: none;
  transform: perspective(500px) rotateX(10deg) rotateY(10deg) rotateZ(0deg)
    scale(0.75);
}

.hud-container .hud:has(.target.bottom.left:hover) {
  animation: none;
  transform: perspective(500px) rotateX(-10deg) rotateY(-10deg) rotateZ(0deg)
    scale(0.75);
}

.hud-container .hud:has(.target.bottom.right:hover) {
  animation: none;
  transform: perspective(500px) rotateX(-10deg) rotateY(10deg) rotateZ(0deg)
    scale(0.75);
}

/* Animations */
@keyframes glow-orange {
  0% {
    filter: drop-shadow(0 0 0 transparent);
  }
  100% {
    filter: drop-shadow(0 0 0.25vw #2dae92);
  }
}

@keyframes glow-blue {
  0% {
    filter: drop-shadow(0 0 0 transparent);
  }
  100% {
    filter: drop-shadow(0 0 0.25vw #2f70b7);
  }
}

@keyframes notches-grow {
  0% {
    width: 0;
  }
  100% {
    width: 0.5vw;
  }
}

@keyframes notches-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes notches-pulse-rotate {
  0% {
    transform: rotate(0deg) perspective(500px) translate3d(0px, 0px, 80px);
  }
  25% {
    transform: rotate(30deg) perspective(500px) translate3d(0px, 0px, 60px);
  }
  75% {
    transform: rotate(0deg) perspective(500px) translate3d(0px, 0px, 80px);
  }
  100% {
    transform: rotate(60deg) perspective(500px) translate3d(0px, 0px, 90px);
  }
}

@keyframes notchestop-rotate {
  0% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes notchesbottom-rotate {
  0% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes calloutleft-grow {
  0% {
    left: 11vw;
    width: 0;
    opacity: 0;
  }
  100% {
    left: -10vw;
    width: 21vw;
    opacity: 1;
  }
}

@keyframes calloutright-grow {
  0% {
    right: 11vw;
    width: 0;
    opacity: 0;
  }
  100% {
    right: -10vw;
    width: 21vw;
    opacity: 1;
  }
}

@keyframes hud-3d {
  0% {
    transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)
      scale(1);
  }
  100% {
    transform: perspective(500px) rotateX(10deg) rotateY(-10deg) rotateZ(0deg)
      scale(0.75);
  }
}

@keyframes notches-3d {
  0% {
    transform: perspective(500px) translate3d(0px, 0px, 0px);
  }
  100% {
    transform: perspective(500px) translate3d(0px, 0px, 80px);
  }
}

@keyframes notchesbottom-3d {
  0% {
    transform: perspective(500px) translate3d(0px, 0px, 0px) rotate(0deg);
  }
  100% {
    transform: perspective(500px) translate3d(0px, 0px, -140px) rotate(90deg);
  }
}

@keyframes notchestop-3d {
  0% {
    transform: perspective(500px) translate3d(0px, 0px, 0px) rotate(0deg);
  }
  100% {
    transform: perspective(500px) translate3d(0px, 0px, 140px) rotate(90deg);
  }
}

@keyframes innerorange3-pulse-3d {
  0% {
    transform: perspective(500px) translate3d(0px, 0px, 0px);
  }
  100% {
    transform: perspective(500px) translate3d(0px, 0px, -60px);
  }
}

@keyframes innerblue2-pulse-3d {
  0% {
    transform: perspective(500px) translate3d(0px, 0px, 0px);
  }
  50% {
    transform: perspective(500px) translate3d(0px, 0px, -50px);
  }
  100% {
    transform: perspective(500px) translate3d(0px, 0px, -200px);
  }
}

@keyframes center-pulse-3d {
  0% {
    transform: perspective(500px) translate3d(0px, 0px, 0px);
  }
  50% {
    transform: perspective(500px) translate3d(0px, 0px, 80px);
  }
  100% {
    transform: perspective(500px) translate3d(0px, 0px, 40px);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hud-container .hud {
    top: 41px;
    left: 50%;
    width: 60vw;
    height: 60vw;
    transform: translateX(-50%) !important;
  }
  html[dir="rtl"] .hud-container .hud {
    left: 50%;
    right: unset;
  }

  .hud-container .hud .callout {
    display: none;
  }
  .hud-container {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: visible;
    pointer-events: none;
  }
}
.hud .circle {
  background-color: transparent !important;
}