/* Interpretive light around portraits; the faces and map remain unchanged. */
.family-map-hotspot::before {
  content: ''; position: absolute; inset: -28%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 25deg, var(--energy-a), var(--energy-b), var(--energy-c), var(--energy-a));
  -webkit-mask-image: radial-gradient(circle, transparent 42%, #000 53%, transparent 70%);
  mask-image: radial-gradient(circle, transparent 42%, #000 53%, transparent 70%);
  opacity: .58;
  filter: blur(4px); transform: scale(1.03);

  animation: character-breath var(--energy-period, 6s) ease-in-out infinite;
  animation-delay: var(--energy-delay, 0s);
}
@keyframes character-breath {
  0%,100% { opacity: .42; transform: scale(1); }
  50% { opacity: .72; transform: scale(1.09); }
}
.energy-reading { min-height: 2.5em; margin: .55rem 0 0; color: #78716c; font-size: .75rem; line-height: 1.5; }
.energy-reading strong { color: #57534e; font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
  .family-map-hotspot::before { animation: none; transition: none; opacity: .5; transform: none; }
}

/* One shared field of light for the early family; portraits sit above it. */
.family-map-early { isolation: isolate; overflow: visible; border-radius: 0; background: transparent; }
.family-map-early::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, #0009 60%, transparent 76%);
  mask-image: radial-gradient(ellipse at center, #000 35%, #0009 60%, transparent 76%);
  background:
    radial-gradient(ellipse at 14% 32%, #8ccbd78c 0, transparent 36%),
    radial-gradient(ellipse at 27% 31%, #a9ccc47a 0, transparent 30%),
    radial-gradient(ellipse at 34% 24%, #dfbf797a 0, transparent 37%),
    radial-gradient(ellipse at 58% 32%, #b4a0c67a 0, transparent 35%),
    radial-gradient(ellipse at 78% 24%, #d8a05f66 0, transparent 34%),
    radial-gradient(ellipse at 26% 77%, #9cbbce66 0, transparent 32%),
    radial-gradient(ellipse at 44% 77%, #c990775c 0, transparent 28%),
    radial-gradient(ellipse at 62% 77%, #d8bcaf66 0, transparent 30%),
    radial-gradient(ellipse at 81% 77%, #a09abc73 0, transparent 36%);
  animation: painting-breath 9s ease-in-out infinite;
}
.family-map-early .family-map-hotspot::before { display: none; }
@keyframes painting-breath { 0%,100% { opacity: .65; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .family-map-early::before { animation: none; opacity: .8; } }


/* Continuous color under the succession portraits, without a hollow halo. */
.family-map-succession { isolation: isolate; }
.family-map-succession .family-map-image { position: relative; z-index: 1; }
.family-map-succession .family-map-hotspots { z-index: 2; }
.family-map-succession .family-map-hotspot::before { display: none; }
.succession-energy-field {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse, #000 52%, transparent 76%);
  mask-image: radial-gradient(ellipse, #000 52%, transparent 76%);
}
.succession-energy-wash {
  position: absolute; left: var(--x); top: var(--y); width: 38%; aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(15px);
  -webkit-mask-image: radial-gradient(ellipse, #000 15%, transparent 68%);
  mask-image: radial-gradient(ellipse, #000 15%, transparent 68%);
  background:
    radial-gradient(ellipse at 38% 42%, var(--energy-a) 0, transparent 65%),
    radial-gradient(ellipse at 64% 48%, var(--energy-b) 0, transparent 63%),
    radial-gradient(ellipse at 48% 64%, var(--energy-c) 0, transparent 66%);
  opacity: .34; transform: translate(-50%, -50%) scale(.94);
  animation: succession-breath var(--energy-period, 6s) ease-in-out infinite;
  animation-delay: var(--energy-delay, 0s);
}
@keyframes succession-breath {
  0%, 100% { opacity: .28; transform: translate(-50%, -50%) scale(.94); }
  50% { opacity: .56; transform: translate(-50%, -50%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .succession-energy-wash { animation: none; opacity: .42; transform: translate(-50%, -50%); }
}