body {
    cursor: none;
}

.cursor-indicator {
    position: fixed;
    width: 22px;
    height: 22px;
    border: 2px solid #f4f4f4;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    z-index: 12000;
}

.cursor-indicator.hovered {
    border-color: #050505;
    background-color: #050505;
    transform: translate(-50%, -50%) scale(1.25);
}

.cursor-indicator.active {
    transform: translate(-50%, -50%) scale(0.75);
}

.cursor-indicator.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}