/* ===========================================================================
   hotgraphic-shared.css
   ---------------------------------------------------------------------------
   Visual styles for hotspots that MUST look identical in the editor and in
   the view. Loaded by both editblock and view pages.
   =========================================================================== */

.hotgraphic-hotspot {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    --hg-color: 15, 108, 191;
}
.hotgraphic-hotspot.hotgraphic-shape-circle { border-radius: 50%; }
.hotgraphic-hotspot.hotgraphic-shape-rect   { border-radius: 0; }

/* Style 1 — outline only */
.hotgraphic-hotspot.hotgraphic-style-1 {
    background: transparent;
    border: 2px solid rgb(var(--hg-color));
}
/* Style 2 — semi-transparent fill */
.hotgraphic-hotspot.hotgraphic-style-2 {
    background: rgba(var(--hg-color), 0.2);
    border: 2px solid rgb(var(--hg-color));
}
/* Style 3 — solid fill */
.hotgraphic-hotspot.hotgraphic-style-3 {
    background: rgb(var(--hg-color));
    border: 2px solid rgb(var(--hg-color));
}
/* Style 4 — glass (frosted) */
.hotgraphic-hotspot.hotgraphic-style-4 {
    background: linear-gradient(rgba(var(--hg-color), 0.18), rgba(var(--hg-color), 0.18)),
                rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border: 1px solid rgba(var(--hg-color), 0.8);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Vibrating glow animation */
.hotgraphic-hotspot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(var(--hg-color), 0.45), 0 0 0 0 rgba(var(--hg-color), 0.25);
    animation: hotgraphic-vibrate 3s ease-out infinite;
    pointer-events: none;
}
@keyframes hotgraphic-vibrate {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--hg-color), 0.45), 0 0 0 0 rgba(var(--hg-color), 0.25);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(var(--hg-color), 0), 0 0 0 18px rgba(var(--hg-color), 0);
    }
}