/* Hero sandbox variant 4 — coverage sweep around inline 360.
   360 is the radius of coverage; a solid 2px trail fades the current
   ink → transparent behind a clockwise cap. Reuses .bd-hero--v10c
   layout, rays, and list. Loaded only on hero-version.html. */

@property --bd-hv4-ink {
  syntax: "<color>";
  inherits: true;
  initial-value: #2096F4;
}

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

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

.bd-hero--hv4 .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--hv4 .bd-hero__product-text,
.bd-hero--hv4 .bd-hero-360__num,
.bd-hero--hv4 .bd-hero__title-line,
.bd-hero--hv4 a.bd-hero__cta {
  position: relative;
  z-index: 1;
}

.bd-hero--hv4 .bd-hero-360 {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  /* 10px more air after “Institutional”. Halo is centered on this
     box, so the sweep moves with the digits. */
  margin-left: 10px;
  --bd-hv4-ink: #2096F4;
  animation: bd-hv4-ink 7.1s infinite;
}

.bd-hero--hv4 .bd-hero-360__halo {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  /* 3.75em of the 32px product line = 120px. Does not reserve layout
     space; the sweep sits behind the product line and may overlap
     neighboring letters. */
  width: 3.75em;
  height: 3.75em;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: visible;
}

.bd-hero--hv4 .bd-hero-360__dial {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bd-hero--hv4 .bd-hero-360__orbit {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: bd-hv4-orbit-spin 7.1s infinite;
}

.bd-hero--hv4 .bd-hero-360__arc {
  fill: none;
  stroke: url(#bd-hv4-arc-fade);
  stroke-width: 2;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}

.bd-hero--hv4 .bd-hero-360__fade-tail,
.bd-hero--hv4 .bd-hero-360__fade-mid,
.bd-hero--hv4 .bd-hero-360__fade-head {
  stop-color: var(--bd-hv4-ink);
}

.bd-hero--hv4 .bd-hero-360__cap {
  fill: var(--bd-hv4-ink);
  stroke: none;
}

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

.bd-hero--hv4 .bd-hero-360__ghost {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: bd-hv4-ghost-spin 7.1s infinite;
  pointer-events: none;
}

.bd-hero--hv4 .bd-hero-360__ghost-arc {
  fill: none;
  stroke: url(#bd-hv4-ghost-fade);
  stroke-width: 12;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* Full counter-clockwise turn 3 → 3, same 7.1s cycle as the orbit.
   Starts and ends aligned with the arc at 3 o’clock, then laps it
   once per cycle. No pause: the ghost keeps moving while the orbit
   holds its 0.6s. */
@keyframes bd-hv4-ghost-spin {
  0% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  91.5% {
    transform: rotate(-360deg);
    animation-timing-function: linear;
  }
  100% {
    transform: rotate(-360deg);
  }
}

/* Full clockwise turn 3 → 3. Cap and trail head sit at 3 o’clock in
   local coords (SVG default; no 12/2 o’clock offset). 360deg and
   0deg match, so the loop restarts without hiding the trail, cap,
   or digits. 91.5% of 7.1s ≈ 6.5s spin; remainder ≈ 0.6s pause. */
@keyframes bd-hv4-orbit-spin {
  0% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  91.5% {
    transform: rotate(360deg);
    animation-timing-function: linear;
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Blue ↔ purple on trail head and cap only. 360 digits stay black.
   Tail of #bd-hv4-arc-fade stays transparent (opacity 0), not #000. */
@keyframes bd-hv4-ink {
  0% {
    --bd-hv4-ink: #2096F4;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  50% {
    --bd-hv4-ink: #6434D8;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  100% {
    --bd-hv4-ink: #2096F4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bd-hero--hv4 .bd-hero-360 {
    animation: none;
    --bd-hv4-ink: #2096F4;
  }

  .bd-hero--hv4 .bd-hero-360__orbit,
  .bd-hero--hv4 .bd-hero-360__ghost {
    animation: none;
    transform: none;
  }

  .bd-hero--hv4 .bd-hero-360__num {
    color: var(--bd-text, #000);
  }

  .bd-hero--hv4 .bd-hero-360__arc {
    fill: none;
  }

  .bd-hero--hv4 .bd-hero-360__cap {
    fill: #2096F4;
  }

  .bd-hero--hv4 .bd-hero-360__ghost-arc {
    opacity: 0;
  }
}