/* Light and emitters travel on the source-image plane with each sign. */
.story-active .town-hotspot:before{content:"";position:absolute;inset:-35% -12%;pointer-events:none;opacity:0;transition:opacity 220ms ease;background:radial-gradient(ellipse,#ffe9a644 0%,#ffe6a322 42%,transparent 72%);filter:blur(3px)}
.story-active .town-hotspot:is(:hover,:focus-visible,.is-inviting):before{opacity:1}
.story-active .town-hotspot:focus-visible:before{background:radial-gradient(ellipse,#fff0ba77 0%,#ffe6a333 42%,transparent 72%)}
.signpost-particle{display:none}
.story-active .signpost-particle{display:block;position:absolute;width:3px;height:3px;margin:-1.5px;pointer-events:none;opacity:0;border-radius:50%;background:radial-gradient(circle,#fffbe8 20%,#ffe5a3 45%,transparent 72%);filter:drop-shadow(0 0 2px #ffe5a3)}
.story-active .town-hotspot:is(:hover,:focus-visible,.is-inviting) .signpost-particle{animation:signpost-drift 2.4s linear var(--particle-delay) infinite}
@keyframes signpost-drift{
  0%{opacity:0;transform:translate(0,0) scale(.55)}
  15%{opacity:.9}
  65%{opacity:.5}
  100%{opacity:0;transform:translate(var(--particle-x),var(--particle-y)) scale(.4)}
}
@media(prefers-reduced-motion:reduce){
 .story-active .town-hotspot:before{transition:none}
 .story-active .town-hotspot:is(:hover,:focus-visible) .signpost-particle{animation:none;opacity:.65}
}