@charset "utf-8";
/**
 * HotspotStyles.css -- loaded right AFTER TourViewerShared.css by both 360_editor.php and client_view.php.
 * Holds the look of newer hotspot styles. The classic Floor Ring (type "floor") is NOT touched here: it keeps its original
 * look from TourViewerShared.css so existing tours are unchanged.
 *   Wayfinder Arrow (type "directional")  bold arrowhead with a fainter echo behind it
 *   Wayfinder Ring / Pulse Ring (System Default icons hs_guide.png / hs_pulse.png)  drawn as scalable pictures
 * Plain static CSS: never use PHP tags in this file.
 */
/* Wayfinder arrow: a bold arrowhead with a fainter echo of itself behind it, which gently breathes to show the way forward. */
.hs-arrow-trail { animation: arrow-trail 1.8s ease-in-out infinite; }
@keyframes arrow-trail { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* Wayfinder Ring: the arrow set inside the ring, drawn as one scalable picture so it looks the same at any size, in 2D or laid on a surface. */
.hs-guide { position: relative; width: 100%; height: 100%; pointer-events: none; }
.hs-guide-svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.55)); }
.hs-guide-halo { transform-box: fill-box; transform-origin: center; opacity: 0; animation: guide-halo 2.2s ease-out infinite; }
@keyframes guide-halo {
    0%   { transform: scale(0.95); opacity: 0.85; }
    75%  { transform: scale(1.5);  opacity: 0; }
    100% { transform: scale(1.5);  opacity: 0; }
}
.pnlm-hotspot-base:hover .hs-guide-ring, .flat-hs:hover .hs-guide-ring,
.pnlm-hotspot-base:focus-visible .hs-guide-ring, .flat-hs:focus-visible .hs-guide-ring { stroke: #4da6ff; fill: rgba(77,166,255,0.28); }

@media (prefers-reduced-motion: reduce) {
    .hs-guide-halo { animation: none; opacity: 0.5; transform: scale(1.25); }
    .hs-arrow-trail { animation: none; opacity: 0.7; }
}

/* Pulse switched off -- either for one hotspot (its own "Pulse this hotspot" box, class on the hotspot) or for the
   whole tour (Tour Theme > "Pulse Hotspots", class on <html>). Everything holds still; the halo stays as a faint fixed outer ring. */
.hs-still .floor-ring::after, .floor-ring.hs-still::after { animation: none; }
.hs-still .hs-guide-halo { animation: none; opacity: 0.5; transform: scale(1.25); }
.hs-still .hs-arrow-trail { animation: none; opacity: 0.7; }

/* ── Focus ring: keyboard only ───────────────────────────────────────────────
   The blue ring marks keyboard focus (Tab). A mouse click or tap no longer leaves it behind, which looked
   untidy on transparent arrows and rings. Keyboard users still get the full ring (:focus-visible), and the
   viewer's white/black high-contrast ring and the editor's orange "selected" ring are separate and unchanged. */
body .pnlm-hotspot-base:focus:not(:focus-visible):not(.hs-selected),
body .flat-hs:focus:not(:focus-visible):not(.hs-selected) { box-shadow: none !important; outline: none !important; }
body .custom-floor-container:focus:not(:focus-visible):not(.hs-selected) .floor-ring { box-shadow: none !important; }
body .pnlm-hotspot-base:focus:not(:focus-visible) .hs-orb,
body .flat-hs:focus:not(:focus-visible) .hs-orb { border-color: rgba(255,255,255,0.85); box-shadow: 0 2px 10px rgba(0,0,0,0.5), inset 0 0 14px rgba(255,255,255,0.35); }