/* src/styles/v19-node-aura-hotspot-ux.css — extracted from index.html (id=v19-node-aura-hotspot-ux). */

.figure-wrap{
  --node-size:10px;
  --node-x:50%;
  --node-y:50%;
}

.figure-wrap::before{
  width:78%!important;
  height:100%!important;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(87,166,255,.18) 0%,
      rgba(143,69,255,.12) 36%,
      rgba(217,65,255,.06) 50%,
      rgba(0,0,0,0) 72%)!important;
  animation: solsticeAuraBreath 7.5s ease-in-out infinite;
}

.figure-wrap::after{
  width:90%!important;
  height:108%!important;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0 47%, rgba(95,227,255,.18) 49%, rgba(143,69,255,.16) 52%, transparent 59%),
    repeating-radial-gradient(ellipse at 50% 50%, rgba(95,227,255,.055) 0 1px, transparent 2px 24px)!important;
  animation: solsticeAuraRing 10s linear infinite;
}

@keyframes solsticeAuraBreath{
  0%,100%{opacity:.58;transform:translate(-50%,-50%) scale(.985)}
  50%{opacity:.92;transform:translate(-50%,-50%) scale(1.025)}
}

@keyframes solsticeAuraRing{
  0%{opacity:.45;filter:hue-rotate(0deg)}
  50%{opacity:.76;filter:hue-rotate(22deg)}
  100%{opacity:.45;filter:hue-rotate(0deg)}
}

.hotspot{
  position:absolute!important;
  overflow:visible!important;
  isolation:isolate!important;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease!important;
}

.hotspot::before{
  content:""!important;
  position:absolute!important;
  left:var(--node-x, 50%)!important;
  top:var(--node-y, 50%)!important;
  width:var(--node-size)!important;
  height:var(--node-size)!important;
  transform:translate(-50%,-50%)!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle,
      rgba(255,255,255,1) 0 18%,
      rgba(95,227,255,.95) 22% 44%,
      rgba(143,69,255,.75) 48% 68%,
      transparent 72%)!important;
  box-shadow:
    0 0 8px rgba(95,227,255,.85),
    0 0 18px rgba(143,69,255,.55),
    0 0 30px rgba(217,65,255,.24)!important;
  z-index:-1!important;
  pointer-events:none!important;
  animation: solsticeNodePulse 2.8s ease-in-out infinite;
}

.hotspot::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:var(--line-w, 0px)!important;
  height:1px!important;
  transform-origin:0 50%!important;
  transform:
    translate(var(--line-x, 0px), var(--line-y, 0px))
    rotate(var(--line-r, 0deg))!important;
  background:linear-gradient(90deg, rgba(95,227,255,.75), rgba(143,69,255,.18))!important;
  box-shadow:0 0 8px rgba(95,227,255,.34)!important;
  z-index:-2!important;
  pointer-events:none!important;
  opacity:.72!important;
}

.hotspot:hover,
.hotspot:focus-visible,
.hotspot.active{
  transform:translate(-50%,-50%) scale(1.06)!important;
  border-color:rgba(184,107,255,.92)!important;
  background:linear-gradient(135deg,rgba(39,49,82,.92),rgba(80,31,106,.86))!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 22px rgba(143,69,255,.32),
    0 0 40px rgba(95,227,255,.18)!important;
}

.hotspot:hover::before,
.hotspot:focus-visible::before,
.hotspot.active::before{
  animation-duration:1.15s;
  box-shadow:
    0 0 10px rgba(255,255,255,.95),
    0 0 24px rgba(95,227,255,.9),
    0 0 44px rgba(143,69,255,.62)!important;
}

@keyframes solsticeNodePulse{
  0%,100%{opacity:.74;filter:brightness(.98);scale:.96}
  50%{opacity:1;filter:brightness(1.35);scale:1.18}
}

/* Node + connector mapping: nodes sit on body, labels can float around it */
.hotspot[data-zone="head"]{--node-x:50%;--node-y:116%;--line-w:0px}
.hotspot[data-zone="throat"]{--node-x:50%;--node-y:50%;--line-w:0px}
.hotspot[data-zone="heart"]{--node-x:50%;--node-y:50%;--line-w:0px}
.hotspot[data-zone="upperAbdomen"]{--node-x:50%;--node-y:50%;--line-w:0px}
.hotspot[data-zone="abdomen"]{--node-x:50%;--node-y:50%;--line-w:0px}
.hotspot[data-zone="hips"]{--node-x:50%;--node-y:50%;--line-w:0px}
.hotspot[data-zone="knees"]{--node-x:50%;--node-y:50%;--line-w:0px}
.hotspot[data-zone="feet"]{--node-x:50%;--node-y:-28%;--line-w:0px}

.hotspot.side-left[data-zone="shoulders"]{--node-x:116%;--node-y:50%;--line-x:50%;--line-y:0px;--line-w:48px;--line-r:0deg}
.hotspot.side-right[data-zone="shoulders"]{--node-x:-16%;--node-y:50%;--line-x:-50%;--line-y:0px;--line-w:48px;--line-r:180deg}
.hotspot.side-left[data-zone="hands"]{--node-x:116%;--node-y:50%;--line-x:50%;--line-y:0px;--line-w:38px;--line-r:0deg}
.hotspot.side-right[data-zone="hands"]{--node-x:-16%;--node-y:50%;--line-x:-50%;--line-y:0px;--line-w:38px;--line-r:180deg}

/* Mobile correction requested by user */
@media (max-width:760px){
  .hotspot[data-zone="shoulders"]{
    top:26.5%!important;
  }

  .hotspot.side-left[data-zone="shoulders"]{
    left:22%!important;
  }

  .hotspot.side-right[data-zone="shoulders"]{
    left:78%!important;
  }

  .hotspot[data-zone="hands"]{
    top:55%!important;
  }

  .hotspot.side-left[data-zone="hands"]{
    left:18%!important;
  }

  .hotspot.side-right[data-zone="hands"]{
    left:82%!important;
  }

  .hotspot[data-zone="hips"]{
    top:54%!important;
  }

  .hotspot[data-zone="knees"]{
    top:67%!important;
  }

  .hotspot[data-zone="feet"]{
    top:91.5%!important;
  }

  .hotspot.side-left[data-zone="shoulders"],
  .hotspot.side-right[data-zone="shoulders"]{
    --line-w:34px;
  }

  .hotspot.side-left[data-zone="hands"],
  .hotspot.side-right[data-zone="hands"]{
    --line-w:28px;
  }
}