.focus-indicator,
.demo-focus-indicator {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--color-primary, #6C63FF);
    border: 2px solid var(--color-primary, #6C63FF);
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(108, 99, 255, 0.15);
    transition: all var(--transition-navigation, 0.2s ease);
    will-change: left, top;
    animation: hotspot-pulse 1.6s ease-in-out infinite;
    z-index: 10;
}

.focus-indicator {
    cursor: move;
    pointer-events: all;
    filter: brightness(1);
}

.focus-indicator:hover {
    transform: scale(1.2);
    filter: brightness(1.1);
}

.demo-focus-indicator {
    cursor: default;
    pointer-events: none;
}

@keyframes hotspot-pulse {
    0% {
        box-shadow: 0 0 0 6px rgba(108, 99, 255, 0.5);
    }
    70% {
        box-shadow: 0 0 0 24px rgba(108, 99, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 14px rgba(108, 99, 255, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .focus-indicator,
    .demo-focus-indicator {
        animation: none;
    }
}