[data-hero-bg]{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}
[data-hero-bg] svg{
  display:block;
  width:100%;
  height:auto;
}
[data-hero-bg] svg g[data-depth]{
  transform-box: fill-box;
  transform-origin: 50% 50%;
  will-change: transform;
}

.hero-hotspot{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.35;
  mix-blend-mode:plus-lighter;
  background: radial-gradient(
    ellipse var(--hsz, 520px) var(--hsz, 520px) at var(--mx, 50%) var(--my, 40%),
    rgba(35,136,255, .50) 0%,
    rgba(49,97,255,  .35) calc(40% * var(--hsoft, .7)),
    rgba(74,58,255,  0.00) 70%
  );
  transition: opacity .15s linear;
}

@media (prefers-reduced-motion: reduce){
  .hero-hotspot{
    display:none;
  }
}