Glass Cursor

if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    console.log('Glass cursor disabled: reduced motion preference');
    return;
}

// Only on desktop (min-width: 1024px)
if (window.innerWidth < 1024) {
    console.log('Glass cursor disabled: screen width', window.innerWidth);
    return;
}

// Create cursor elements
const cursorOutline = document.createElement('div');
cursorOutline.className = 'cursor-outline';
cursorOutline.style.left = '50%';
cursorOutline.style.top = '50%';

const cursorDot = document.createElement('div');
cursorDot.className = 'cursor-dot';
cursorDot.style.left = '50%';
cursorDot.style.top = '50%';

document.body.appendChild(cursorOutline);
document.body.appendChild(cursorDot);

let mouseX = window.innerWidth / 2;
let mouseY = window.innerHeight / 2;
let outlineX = mouseX;
let outlineY = mouseY;

document.addEventListener('mousemove', (e) => {
    mouseX = e.clientX;
    mouseY = e.clientY;
    
    // Dot follows instantly (no offset needed, CSS handles centering)
    cursorDot.style.left = `${mouseX}px`;
    cursorDot.style.top = `${mouseY}px`;
});

function animate() {
    const delay = 0.12;
    outlineX += (mouseX - outlineX) * delay;
    outlineY += (mouseY - outlineY) * delay;

    // Outline follows with delay (no offset needed, CSS handles centering)
    cursorOutline.style.left = `${outlineX}px`;
    cursorOutline.style.top = `${outlineY}px`;

    requestAnimationFrame(animate);
}

animate();

newPosition = currentPosition + (targetPosition - currentPosition) * delayFactor

const interactiveElements = document.querySelectorAll(
    'a, button, .tag, .accordion-header, .q-btn, input, textarea'
);

interactiveElements.forEach(el => {
    el.addEventListener('mouseenter', () => {
        cursorOutline.classList.add('hover');
        cursorDot.classList.add('hover');
    });

    el.addEventListener('mouseleave', () => {
        cursorOutline.classList.remove('hover');
        cursorDot.classList.remove('hover');
    });
});

// Hide default cursor
document.body.style.cursor = 'none';
const allElements = document.querySelectorAll('*');
allElements.forEach(el => {
    el.style.cursor = 'none';
});

// Handle viewport leave/enter
document.addEventListener('mouseleave', () => {
    cursorOutline.style.opacity = '0';
    cursorDot.style.opacity = '0';
});

document.addEventListener('mouseenter', () => {
    cursorOutline.style.opacity = '1';
    cursorDot.style.opacity = '1';
});

.cursor-dot {
    position: fixed;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9999;
    transition: width 0.3s ease, height 0.3s ease, background 0.3s ease;
}

.cursor-dot.hover {
    width: 4px;
    height: 4px;
    background: var(--color-primary);
}

.cursor-outline {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(173, 0, 0, 0.3);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9998;
    transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease;
    backdrop-filter: blur(2px);
    background: rgba(255, 255, 255, 0.1);
}

.cursor-outline.hover {
    width: 60px;
    height: 60px;
    border-color: rgba(173, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

if (typeof document !== 'undefined') {
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initGlassCursor);
    } else {
        initGlassCursor();
    }
}

export { initGlassCursor };

const delay = 0.12; // Lower = faster, Higher = slower

.cursor-dot {
    width: 8px;   /* Default dot size */
    height: 8px;
}

.cursor-outline {
    width: 40px;  /* Default outline size */
    height: 40px;
}

const interactiveElements = document.querySelectorAll(
    'a, button, .tag, .my-custom-class'
);

if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    return; // Don't initialize custom cursor
}