/* tapxy.css — hollow grey hotspot with continuous pulse
   Tweak in one place: adjust the :root variables below.
*/

:root {
    /* Hotspot tuning */
    --tapxy-size: 16px; /* circle diameter */
    --tapxy-ring-color: #424242; /* ring & pulse color (slate-300) */
    --tapxy-ring-width: 12px; /* ring thickness */
    --tapxy-opacity: 0.25; /* hotspot opacity */
    /* Pulse animation */
    --tapxy-ping-scale: 2.0; /* how large the pulse expands */
    --tapxy-ping-duration: 1.2s; /* pulse speed */
    --tapxy-ping-ease: ease-out; /* easing */
    --tapxy-ping-opacity: 0.8; /* starting opacity of the pulse ring */
    /* Layering */
    --tapxy-z: 2147483647; /* z-index over slide content */
}

.tapxy-anchor {
    position: relative !important;
}

.tapxy-pulse {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--tapxy-size);
    height: var(--tapxy-size);
    border-radius: 999px;
    transform: translate(-50%, -50%);
    z-index: var(--tapxy-z);
    /* interactable, no fill */
    pointer-events: auto;
    cursor: pointer;
    opacity: var(--tapxy-opacity);
    background: transparent;
    border: var(--tapxy-ring-width) solid var(--tapxy-ring-color);
    box-shadow: 0 0 0 1px rgba(255,255,255,.25); /* subtle lift on dark images */
}

    /* continuous grey pulse ring */
    .tapxy-pulse.tapxy-keep::after {
        content: "";
        position: absolute;
        inset: calc(-1 * var(--tapxy-ring-width)); /* start just outside the ring */
        border-radius: inherit;
        border: var(--tapxy-ring-width) solid var(--tapxy-ring-color);
        animation: tapxy-ping var(--tapxy-ping-duration) var(--tapxy-ping-ease) 0s infinite both;
        opacity: var(--tapxy-ping-opacity);
    }

@keyframes tapxy-ping {
    0% {
        transform: scale(1);
        opacity: var(--tapxy-ping-opacity);
    }

    70% {
        transform: scale(var(--tapxy-ping-scale));
        opacity: 0;
    }

    100% {
        transform: scale(var(--tapxy-ping-scale));
        opacity: 0;
    }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .tapxy-pulse.tapxy-keep::after {
        animation: none;
    }
}