/* Universal cursor-effects — layered on top of any theme. Colors come from
   each theme's own --accent/--accent-2 variables via inline styles set in JS,
   so these rules only handle shape, layout, and animation timing. */

body.cursor-fx-active,
body.cursor-fx-active a,
body.cursor-fx-active button,
body.cursor-fx-active input,
body.cursor-fx-active textarea,
body.cursor-fx-active select {
    cursor: none;
}

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

/* SVG-drawn "creature" followers (snake, scorpion, hacker hat, smiley) */
.cursor-fx-creature {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 9999;
    line-height: 0;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
}
.cursor-fx-creature svg { display: block; }

.cursor-fx-dot, .cursor-fx-ring, .cursor-fx-trail-dot, .cursor-fx-snake-seg,
.cursor-fx-scorpion-seg, .cursor-fx-stinger, .cursor-fx-glyph, .cursor-fx-orb,
.cursor-fx-bubble, .cursor-fx-spark, .cursor-fx-pixel, .cursor-fx-blob,
.cursor-fx-crosshair, .cursor-fx-ripple-ring, .cursor-fx-firefly, .cursor-fx-arrow,
.cursor-fx-heart-dot, .cursor-fx-burst-particle {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 9999;
    border-radius: 50%;
}

.cursor-fx-dot { width: 8px; height: 8px; }

.cursor-fx-ring {
    width: 36px; height: 36px;
    border: 2px solid;
    transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
    opacity: 0.7;
}
.cursor-fx-ring.is-active { width: 58px; height: 58px; opacity: 1; }
.cursor-fx-magnetic.is-active { width: 64px; height: 64px; }

.cursor-fx-trail-dot { border-radius: 50%; }

.cursor-fx-snake-seg { border-radius: 50%; }

.cursor-fx-scorpion-seg { border-radius: 50%; opacity: 0.85; }
.cursor-fx-stinger { width: 10px; height: 10px; }

.cursor-fx-glyph {
    font-family: 'Consolas', monospace;
    font-size: 14px;
    font-weight: 700;
    border-radius: 0;
}

.cursor-fx-orb { width: 46px; height: 46px; filter: blur(2px); opacity: 0.8; }

.cursor-fx-bubble {
    width: 10px; height: 10px;
    border: 1.5px solid;
    background: transparent;
}

.cursor-fx-spark {
    width: 6px; height: 6px;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.cursor-fx-pixel { width: 6px; height: 6px; border-radius: 0; }

.cursor-fx-blob {
    width: 30px; height: 22px;
    border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%;
    opacity: 0.55;
    filter: blur(1px);
}

.cursor-fx-crosshair {
    width: 30px; height: 30px;
    border: 2px solid;
    border-radius: 50%;
    background:
        linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
    background-color: transparent;
    color: inherit;
}

.cursor-fx-ripple-ring {
    width: 6px; height: 6px;
    border: 2px solid;
    background: transparent;
}

.cursor-fx-firefly { width: 6px; height: 6px; }

.cursor-fx-arrow {
    font-size: 22px;
    line-height: 1;
    border-radius: 0;
}

.cursor-fx-heart-dot { width: 14px; height: 14px; }

.cursor-fx-burst-particle { width: 5px; height: 5px; }

.cursor-fx-paw, .cursor-fx-note {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 9999;
}
.cursor-fx-note { font-size: 22px; line-height: 1; }

.cursor-fx-confetti {
    position: fixed;
    top: 0; left: 0;
    width: 6px; height: 10px;
    pointer-events: none;
    z-index: 9999;
}