/* ================================================
   Ryder Creative Lab — Custom Cursor (Themeable)
   ================================================
   Color is driven by these CSS custom properties:
     --cursor-r   (red channel, 0–255)
     --cursor-g   (green channel)
     --cursor-b   (blue channel)
   Defaults to purple (139, 92, 246) if not set.
   ================================================ */

:root {
    --cursor-r: 139;
    --cursor-g: 92;
    --cursor-b: 246;
}

/* ── Hide the system cursor site-wide ── */
html,
html * {
    cursor: none !important;
}

/* ── Restore cursor on inputs ── */
input,
textarea,
[contenteditable] {
    cursor: text !important;
}

/* ── Cursor root elements ── */
.rcl-cursor-nib,
.rcl-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
    will-change: transform;
    border-radius: 50%;
}

/* ── Inner nib: the precise hot-point ── */
.rcl-cursor-nib {
    width: 6px;
    height: 6px;
    background: #ffffff;
    box-shadow:
        0 0 0 1.5px rgba(var(--cursor-r), var(--cursor-g), var(--cursor-b), 0.9),
        0 0 8px rgba(var(--cursor-r), var(--cursor-g), var(--cursor-b), 0.7),
        0 0 16px rgba(var(--cursor-r), var(--cursor-g), var(--cursor-b), 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.18s ease, height 0.18s ease,
                background 0.18s ease, box-shadow 0.18s ease,
                opacity 0.18s ease;
}

/* ── Outer ring: the lagging bloom ── */
.rcl-cursor-ring {
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(var(--cursor-r), var(--cursor-g), var(--cursor-b), 0.55);
    background: transparent;
    transform: translate(-50%, -50%);
    transition: width 0.32s cubic-bezier(0.23, 1, 0.32, 1),
                height 0.32s cubic-bezier(0.23, 1, 0.32, 1),
                border-color 0.22s ease,
                background 0.22s ease,
                opacity 0.22s ease;
}

/* ── HOVER STATE: over links, buttons, cards ── */
html.rcl-cursor-hover .rcl-cursor-nib {
    width: 4px;
    height: 4px;
    background: rgba(var(--cursor-r), var(--cursor-g), var(--cursor-b), 0.85);
    box-shadow:
        0 0 0 1px rgba(var(--cursor-r), var(--cursor-g), var(--cursor-b), 0.8),
        0 0 12px rgba(var(--cursor-r), var(--cursor-g), var(--cursor-b), 0.9),
        0 0 28px rgba(var(--cursor-r), var(--cursor-g), var(--cursor-b), 0.4);
}

html.rcl-cursor-hover .rcl-cursor-ring {
    width: 52px;
    height: 52px;
    border-color: rgba(var(--cursor-r), var(--cursor-g), var(--cursor-b), 0.5);
    background: rgba(var(--cursor-r), var(--cursor-g), var(--cursor-b), 0.07);
}

/* ── CLICK STATE: ink burst ── */
html.rcl-cursor-click .rcl-cursor-nib {
    width: 10px;
    height: 10px;
    background: #ffffff;
    box-shadow:
        0 0 0 2px rgba(var(--cursor-r), var(--cursor-g), var(--cursor-b), 0.9),
        0 0 20px rgba(var(--cursor-r), var(--cursor-g), var(--cursor-b), 1),
        0 0 40px rgba(var(--cursor-r), var(--cursor-g), var(--cursor-b), 0.5);
}

html.rcl-cursor-click .rcl-cursor-ring {
    width: 60px;
    height: 60px;
    border-color: rgba(var(--cursor-r), var(--cursor-g), var(--cursor-b), 0.7);
    background: rgba(var(--cursor-r), var(--cursor-g), var(--cursor-b), 0.12);
}

/* ── TEXT / INPUT hover ── */
html.rcl-cursor-text .rcl-cursor-nib {
    width: 2px;
    height: 18px;
    border-radius: 1px;
    background: rgba(var(--cursor-r), var(--cursor-g), var(--cursor-b), 0.9);
    box-shadow: 0 0 6px rgba(var(--cursor-r), var(--cursor-g), var(--cursor-b), 0.6);
}

html.rcl-cursor-text .rcl-cursor-ring {
    opacity: 0;
}

/* ── Hidden when off-screen ── */
html.rcl-cursor-hidden .rcl-cursor-nib,
html.rcl-cursor-hidden .rcl-cursor-ring {
    opacity: 0;
}

html.rcl-cursor-suspended .rcl-cursor-nib,
html.rcl-cursor-suspended .rcl-cursor-ring {
    opacity: 0;
}

/* ── Ink splatter particles ── */
.rcl-ink-particle {
    position: fixed;
    pointer-events: none;
    z-index: 99998;
    border-radius: 50%;
    transform-origin: center;
    animation: rcl-ink-burst 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes rcl-ink-burst {
    0% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1);
    }
    60% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
        transform: translate(
            calc(-50% + var(--dx, 0px)),
            calc(-50% + var(--dy, 0px))
        ) scale(0.2);
    }
}

/* ── Trail ink drops ── */
.rcl-ink-trail {
    position: fixed;
    pointer-events: none;
    z-index: 99997;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: rcl-trail-fade 0.45s ease-out forwards;
}

@keyframes rcl-trail-fade {
    0% { opacity: 0.35; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.1); }
}

/* ── Disable on touch/low-power devices ── */
@media (pointer: coarse) {
    .rcl-cursor-nib,
    .rcl-cursor-ring {
        display: none !important;
    }

    html,
    html * {
        cursor: auto !important;
    }
}

html.low-power-device .rcl-cursor-nib,
html.low-power-device .rcl-cursor-ring {
    display: none !important;
}

html.low-power-device,
html.low-power-device * {
    cursor: auto !important;
}