<div class="custom-cursor"></div>
<style>
.custom-cursor {
  width: 32px;
  height: 32px;
  background: #febaed;
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%) scale(0);
  animation: pulse 2.5s cubic-bezier(0.333, 0, 0.667, 1) infinite;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.custom-cursor.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(0.25);
}

@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.5);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.25);
  }
}

/* Hide default cursor only on target elements */
#past-projects .image-block {
  cursor: none !important;
}
</style>
<script>
function initCustomCursor() {
  let cursor = document.querySelector('.custom-cursor');
  
  // Create cursor if doesn't exist
  if (!cursor) {
    cursor = document.createElement('div');
    cursor.className = 'custom-cursor';
    document.body.appendChild(cursor);
  }
  
  const targetSelectors = '#past-projects .image-block';
  
  // Track cursor position
  document.addEventListener('mousemove', (e) => {
    cursor.style.left = e.clientX + 'px';
    cursor.style.top = e.clientY + 'px';
  });
  
  // Show custom cursor when hovering target elements
  document.querySelectorAll(targetSelectors).forEach(element => {
    element.addEventListener('mouseenter', () => {
      cursor.classList.add('active');
    });
    
    element.addEventListener('mouseleave', () => {
      cursor.classList.remove('active');
    });
  });
}

// Init on page load
document.addEventListener('DOMContentLoaded', initCustomCursor);

// Re-init on AJAX page transitions (Squarespace)
window.addEventListener('mercury:load', initCustomCursor);
</script>