/* --- CUSTOM GLASSY CURSOR --- */
body,
a,
button,
[role="button"],
input,
.phone-frame,
.swipe-area {
    cursor: none !important;
}

.cursor-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10000;
}

.cursor-trail {
    filter: url("#goo");
    /* Only trail is gooey */
}

.cursor-dot {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
    /* Lower opacity */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    /* More distinct glassy border */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 2;
}

.cursor-trail-segment {
    position: absolute;
    width: 30px;
    height: 30px;
    background: rgba(59, 130, 246, 0.8);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    /* Transition removed to make it feel more "liquid" and responsive */
}

/* Cursor States */
.cursor-dot.hover {
    width: 45px;
    /* Reduced scale for a subtle but effective pop */
    height: 45px;
    background: rgba(255, 255, 255, 0.1);
    /* Very low opacity on hover */
    border-color: rgba(255, 255, 255, 0.8);
    /* Keep it white/glassy */
    border-width: 2px;
}

.cursor-dot.active {
    width: 15px;
    height: 15px;
    background: rgba(255, 255, 255, 0.6);
}

/* Mobile Compatibility - Hide custom cursor on touch devices */
@media (hover: none) and (pointer: coarse) {
    .cursor-wrapper {
        display: none;
    }

    body,
    a,
    button,
    [role="button"],
    input,
    .phone-frame,
    .swipe-area {
        cursor: auto !important;
    }
}

/* Focus Mode Overrides */
body.focus-mode .cursor-wrapper {
    display: none !important;
}

body.focus-mode,
body.focus-mode * {
    cursor: auto !important;
}