/* Custom Cursor */
body {
    cursor: none;
    /* Hide default cursor */
}

.cursor-dot,
.cursor-outline {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
    mix-blend-mode: difference;
    /* Interactions with white backgrounds */
}

.cursor-dot {
    width: 6px;
    height: 6px;
    background-color: white;
}

.cursor-outline {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: width 0.15s, height 0.15s, background-color 0.15s;
}

body.hovering .cursor-outline {
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.1);
    border-color: transparent;
}

/* Spotlight Effect - ULTRA VISIBLE */
.spotlight {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9990;
    /* Sit above backgrounds */
    mix-blend-mode: screen;
    /* Lighten the underlying content nicely */
    background: radial-gradient(800px circle at var(--x, 50%) var(--y, 50%),
            rgba(255, 77, 0, 0.25),
            /* Increased opacity significantly (was 0.06 then 0.15) */
            transparent 60%);
    transition: background 0.05s;
    /* Snappier movement */
}