/* Hero sandbox variant 3 — white rotating compass around inline 360.
   Reuses .bd-hero--v10c layout, rays, and list. Loaded only on
   hero-version.html. */

.bd-hero--hv3 {
  font-optical-sizing: auto;
}

.bd-hero--hv3 .bd-hero__product,
.bd-hero--hv3 .bd-hero__title,
.bd-hero--hv3 .bd-hero__copy {
  overflow: visible;
}

.bd-hero--hv3 .bd-hero__product {
  position: relative;
}

/* Copy column is z-index 3 (above rays at 2). Halo is z-index -1 inside
   that context so it paints under product, headline, and CTA, but still
   above the ray SVG. Flow-slot stays z-index 3 so the list stays on top. */
.bd-hero--hv3 .bd-hero__product-text,
.bd-hero--hv3 .bd-hero-360__num,
.bd-hero--hv3 .bd-hero__title-line,
.bd-hero--hv3 a.bd-hero__cta {
  position: relative;
  z-index: 1;
}

.bd-hero--hv3 .bd-hero-360 {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.bd-hero--hv3 .bd-hero-360__halo {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  /* 1.5× hv2’s 3.5em (112px) → 5.25em / 168px. Does not reserve
     layout space; the ring sits behind the product line. */
  width: 5.25em;
  height: 5.25em;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: visible;
}

.bd-hero--hv3 .bd-hero-360__dial {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: #fff;
  transform-origin: 50% 50%;
  animation: bd-hv3-dial-spin 48s linear infinite;
}

.bd-hero--hv3 .bd-hero-360__dial :is(circle, line) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}

.bd-hero--hv3 .bd-hero-360__num {
  font-weight: 500;
  font-variation-settings: "wght" 500;
  font-optical-sizing: auto;
  color: var(--bd-text, #000);
}

@keyframes bd-hv3-dial-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Pulsing ring only (not the static hub). Width thins as it fades. */
.bd-hero--hv3 .bd-hero-rays__ping {
  animation-name: bd-hv3-rays-ping;
}

@keyframes bd-hv3-rays-ping {
  0% {
    transform: scale(1);
    opacity: 1;
    stroke-width: 16;
  }
  100% {
    transform: scale(2);
    opacity: 0;
    stroke-width: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bd-hero--hv3 .bd-hero-360__dial {
    animation: none;
  }
}