/* Hotspots on the home scene. Shared by the public page and the admin editor,
   so the editor shows exactly what visitors see. */

.hotspot {
  position: absolute;
  width: 0;
  height: 0;
  color: #f4eee3;
  text-decoration: none;
  z-index: 1;
}

.hotspot-dot {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fbf6ec;
  box-shadow: 0 0 0 3px rgba(251, 246, 236, 0.18), 0 0 14px rgba(255, 226, 170, 0.7);
}
.hotspot-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(251, 246, 236, 0.55);
  animation: hotspot-pulse 2.8s ease-out infinite;
}
@keyframes hotspot-pulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  70%, 100% { transform: scale(2.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hotspot-dot::after { animation: none; opacity: 0; }
}

.hotspot-line {
  position: absolute;
  width: 48px;
  height: 32px;
  overflow: visible;
  fill: none;
  stroke: rgba(251, 246, 236, 0.85);
  stroke-width: 1.2;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
  pointer-events: none;
}

.hotspot-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 18px rgba(0, 0, 0, 0.6);
  transform: translateY(-50%);
  transition: transform 0.25s ease;
}
.hotspot-label strong {
  font-weight: 500 !important;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
.hotspot-label small {
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

/* direction of the leader line: ne = up right (default) */
.hotspot--ne .hotspot-line { left: 0; bottom: 0; }
.hotspot--ne .hotspot-label { left: 54px; top: -22px; }
.hotspot--nw .hotspot-line { right: 0; bottom: 0; transform: scaleX(-1); }
.hotspot--nw .hotspot-label { right: 54px; top: -22px; align-items: flex-end; text-align: right; }
.hotspot--se .hotspot-line { left: 0; top: 0; transform: scaleY(-1); }
.hotspot--se .hotspot-label { left: 54px; top: 22px; }
.hotspot--sw .hotspot-line { right: 0; top: 0; transform: scale(-1, -1); }
.hotspot--sw .hotspot-label { right: 54px; top: 22px; align-items: flex-end; text-align: right; }

a.hotspot:hover .hotspot-label,
a.hotspot:focus-visible .hotspot-label { transform: translate(4px, -50%); }
.hotspot--nw:hover .hotspot-label,
.hotspot--sw:hover .hotspot-label { transform: translate(-4px, -50%); }
a.hotspot:hover .hotspot-dot { background: #ffe2a8; }
a.hotspot:focus-visible { outline: none; }
a.hotspot:focus-visible .hotspot-label strong { text-decoration: underline; text-underline-offset: 4px; }