/* Interactive VRHI model. Scoped to .vrhi so it can sit inside a page later. */

.vrhi {
  position: relative;
  width: 100%;
  height: min(40.65vw, 780px);
  min-height: 380px;
  overflow: hidden;
  border-radius: 32px;
  background:
    radial-gradient(ellipse at 82% 74%, #09241c 0%, transparent 54%),
    radial-gradient(ellipse at 16% 85%, #101348 0%, transparent 44%),
    #04060a;
  isolation: isolate;
  color: #f7f8fc;
  font-family: Arial, Helvetica, sans-serif;
}

/* Fill the homepage band instead of using the standalone strip height.
   Phones drop the wide image ratio. A short band forces the camera to
   shrink the graph into the middle so the labels can fit. */
.band-dark:has(> .vrhi) {
  aspect-ratio: 2560 / 1040;
}

@media (max-width: 991px) {
  .band-dark:has(> .vrhi) {
    aspect-ratio: auto;
    height: 480px;
  }
}

.band-dark > .vrhi {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  min-height: 0;
  border-radius: inherit;
}

.vrhi canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.vrhi-ridge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

.vrhi-ridge .ridge-halo {
  filter: blur(7px);
}

.vrhi .eyebrow {
  position: absolute;
  top: 7.5%;
  left: 3.1%;
  z-index: 2;
  font: clamp(10px, 1vw, 18px) / 1.4 monospace;
  letter-spacing: 0.12em;
  color: #a4a4ad;
}

.vrhi .marker {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -100%);
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 7px;
  border: 0;
  padding: 0;
  background: none;
  color: #f8faff;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  font: clamp(14px, 1.4vw, 26px) / 1.1 Arial, Helvetica, sans-serif;
}

.vrhi .marker .num {
  font: clamp(10px, 0.95vw, 17px) monospace;
  color: #8aacec;
  letter-spacing: 0.08em;
}

/* Fourth marker (Compound) uses the green label. nth-of-type counts buttons only. */
.vrhi .marker:nth-of-type(4) .num,
.vrhi .marker:nth-of-type(5) .num {
  color: #83e1d1;
}

.vrhi .marker .stem {
  width: 1px;
  height: clamp(18px, 2.4vw, 44px);
  margin-top: 2px;
  background: linear-gradient(#57d9f2, #499cff);
}

.vrhi .marker .dot {
  position: relative;
  top: 0;
  width: 14px;
  height: 14px;
  border: 3px solid #03070d;
  border-radius: 50%;
  background: #4099ff;
  box-shadow: 0 0 0 1px #439cff;
}

.vrhi .marker[data-index="2"] .dot,
.vrhi .marker[data-index="3"] .dot {
  background: #39e3a9;
  box-shadow: 0 0 0 1px #39e3a9;
}

.vrhi .marker:hover .dot,
.vrhi .marker:focus-visible .dot,
.vrhi .marker[aria-expanded="true"] .dot {
  box-shadow: 0 0 0 5px #8afbe75e, 0 0 28px #65ffd9;
}

.vrhi .marker:focus-visible {
  outline: 2px solid #89e5e1;
  outline-offset: 8px;
  border-radius: 4px;
}

.vrhi .tooltip {
  position: absolute;
  z-index: 6;
  display: none;
  width: min(280px, calc(100% - 30px));
  padding: 17px 19px;
  border: 1px solid #50dcbf70;
  border-radius: 12px;
  background: #0b1720ee;
  box-shadow: 0 14px 45px #0009;
  pointer-events: none;
  line-height: 1.5;
  font-size: 14px;
  /* Bootstrap's .tooltip rule sets opacity: 0 until .show. */
  opacity: 1;
  visibility: visible;
}

.vrhi .tooltip strong {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
}

.vrhi .tooltip p {
  margin: 0;
  color: #c4d3db;
}

.vrhi .notice {
  position: absolute;
  right: 18px;
  bottom: 14px;
  z-index: 3;
  font: 11px monospace;
  color: #89939d;
}

@media (max-width: 650px) {
  .vrhi {
    min-height: 460px;
    border-radius: 15px;
  }

  .vrhi .eyebrow {
    top: 4%;
    font-size: 10px;
  }

  .vrhi .marker {
    font-size: 12px;
  }

  .vrhi .marker .stem {
    height: 23px;
  }

  .vrhi .marker .dot {
    width: 11px;
    height: 11px;
  }

  .vrhi .tooltip {
    font-size: 12px;
  }
}

@media (max-width: 430px) {
  .vrhi .marker {
    gap: 3px;
    font-size: 11px;
  }

  .vrhi .marker .num {
    font-size: 9px;
  }

  .vrhi .marker .stem {
    height: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vrhi * {
    transition: none !important;
  }
}