@media (min-width: 769px) {
    .cursor-dot,
    .cursor-outline {
        position: fixed;
        top: -100px;
        left: -100px;
        pointer-events: none;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .cursor-dot {
        z-index: 11001;
        width: 10px;
        height: 10px;
        background: #3f9aff;
        box-shadow: 0 0 8px #8dccff, 0 0 16px rgba(63, 154, 255, 0.95);
    }

    .cursor-outline {
        z-index: 11000;
        width: 36px;
        height: 36px;
        border: 1px solid rgba(63, 154, 255, 0.95);
        background: rgba(63, 154, 255, 0.04);
        box-shadow: 0 0 14px rgba(63, 154, 255, 0.55), 0 0 30px rgba(63, 154, 255, 0.24);
        transition: transform 0.25s ease-out;
    }

    .cursor-dot::after {
        position: absolute;
        inset: -5px;
        border: 1px solid rgba(141, 204, 255, 0.35);
        border-radius: 50%;
        content: "";
        animation: cursor-dot-pulse 1.4s ease-in-out infinite;
    }

    .cursor-outline.is-hovering {
        transform: translate(-50%, -50%) scale(1.2);
    }

    @keyframes cursor-dot-pulse {
        0%, 100% { opacity: 0.45; transform: scale(0.8); }
        50% { opacity: 1; transform: scale(1.15); }
    }
}

@media (max-width: 768px) {
    .cursor-dot,
    .cursor-outline {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cursor-dot::after {
        animation: none;
    }
}