/* Custom cursor: small dot + larger trailing ring.
   Grows over interactive elements. Disabled on coarse pointers. */
(function(){
  if(window.matchMedia('(pointer: coarse)').matches) return;
  const ring = document.getElementById('cursor-ring');
  const dot  = document.getElementById('cursor-dot');
  if(!ring || !dot) return;

  Object.assign(dot.style, {
    width: '6px', height: '6px', borderRadius: '999px',
    background: '#F4F1EA', mixBlendMode: 'difference',
    transition: 'background 200ms ease, transform 200ms ease',
    willChange: 'transform',
  });
  Object.assign(ring.style, {
    width: '36px', height: '36px', borderRadius: '999px',
    border: '1px solid rgba(244,241,234,0.45)',
    transition: 'width 240ms cubic-bezier(0.65,0,0.35,1), height 240ms cubic-bezier(0.65,0,0.35,1), border-color 240ms ease, background 240ms ease',
    willChange: 'transform',
  });

  let mx=-100, my=-100, rx=-100, ry=-100;
  window.addEventListener('mousemove', (e)=>{ mx = e.clientX; my = e.clientY; }, { passive: true });

  function tick(){
    rx += (mx - rx) * 0.18;
    ry += (my - ry) * 0.18;
    dot.style.transform  = `translate(${mx-3}px, ${my-3}px)`;
    ring.style.transform = `translate(${rx-18}px, ${ry-18}px)`;
    requestAnimationFrame(tick);
  }
  requestAnimationFrame(tick);

  // hover-grow on interactive elements
  function isInteractive(el){
    if(!el) return false;
    if(el.matches && el.matches('a, button, [role="button"], input, textarea, label, summary, .interactive')) return true;
    return false;
  }
  let lastHover = null;
  window.addEventListener('mousemove', (e)=>{
    const el = document.elementFromPoint(e.clientX, e.clientY);
    const hit = el && (el.closest('a, button, [role="button"], input, textarea, label, summary, .interactive'));
    if(hit && hit !== lastHover){
      ring.style.width = '56px';
      ring.style.height = '56px';
      ring.style.borderColor = 'rgba(51,194,234,0.85)';
      ring.style.background = 'rgba(51,194,234,0.06)';
      dot.style.background = '#33C2EA';
      lastHover = hit;
    } else if(!hit && lastHover){
      ring.style.width = '36px';
      ring.style.height = '36px';
      ring.style.borderColor = 'rgba(244,241,234,0.45)';
      ring.style.background = 'transparent';
      dot.style.background = '#F4F1EA';
      lastHover = null;
    }
  }, { passive: true });

  // hide when leaves window
  window.addEventListener('mouseleave', ()=>{
    dot.style.opacity = '0'; ring.style.opacity = '0';
  });
  window.addEventListener('mouseenter', ()=>{
    dot.style.opacity = '1'; ring.style.opacity = '1';
  });
})();