<style>
/**
 * Flashlight cursor effect for Elementor
 * Developed by Twist | https://twist-digital.co.il/ 
 */

/* Container element */
.flashlight-container {
  position: relative;
  overflow: hidden;
  cursor: none !important;
}


/* Dark mask */
.flashlight-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(39, 33, 77, 1);
  z-index: 2;
  mask-image: radial-gradient(circle at center, 
    transparent 0, 
    transparent 50px, 
    rgba(0, 0, 0, 0.1) 80px, 
    rgba(0, 0, 0, 0.3) 100px, 
    rgba(0, 0, 0, 0.6) 120px, 
    rgba(0, 0, 0, 0.8) 140px, 
    black 160px
  );
  -webkit-mask-image: radial-gradient(circle at center, 
    transparent 0, 
    transparent 50px, 
    rgba(0, 0, 0, 0.1) 80px, 
    rgba(0, 0, 0, 0.3) 100px, 
    rgba(0, 0, 0, 0.6) 120px, 
    rgba(0, 0, 0, 0.8) 140px, 
    black 160px
  );
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

/* Custom cursor - made more subtle */
.custom-cursor {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  position: fixed;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(1px);
  transition: width 0.2s, height 0.2s, opacity 0.2s;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Find all containers
  const containers = document.querySelectorAll('.flashlight-container');
  if (containers.length === 0) {
    console.error("No elements with class .flashlight-container found");
    return;
  }
  
  // Create custom cursor
  const cursor = document.createElement('div');
  cursor.className = 'custom-cursor';
  document.body.appendChild(cursor);
  
  // Update cursor position globally
  document.addEventListener('mousemove', function(e) {
    cursor.style.left = e.clientX + 'px';
    cursor.style.top = e.clientY + 'px';
  });
  
  // Process each container
  containers.forEach(function(container) {
    // Check if image element already exists, if not - create one
    let image = container.querySelector('.flashlight-image');
    if (!image) {
      image = document.createElement('div');
      image.className = 'flashlight-image';
      container.appendChild(image);
    }
    
    // Create mask
    const mask = document.createElement('div');
    mask.className = 'flashlight-mask';
    container.appendChild(mask);
    
    // Set fully opaque mask at start (no circle)
    const fullMask = 'radial-gradient(circle at center, black 0)';
    mask.style.maskImage = fullMask;
    mask.style.webkitMaskImage = fullMask;
    
    // Update flashlight position with cursor
    container.addEventListener('mousemove', function(e) {
      const rect = container.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      
      // Update mask position with smooth gradient
      const maskValue = `radial-gradient(circle at ${x}px ${y}px, 
        transparent 0, 
        transparent 50px, 
        rgba(0, 0, 0, 0.1) 80px, 
        rgba(0, 0, 0, 0.3) 100px, 
        rgba(0, 0, 0, 0.6) 120px, 
        rgba(0, 0, 0, 0.8) 140px, 
        black 160px
      )`;
      mask.style.maskImage = maskValue;
      mask.style.webkitMaskImage = maskValue;
    });
    
    // When cursor leaves, make mask fully opaque (no circle)
    container.addEventListener('mouseleave', function() {
      const fullMask = 'radial-gradient(circle at center, black 0)';
      mask.style.maskImage = fullMask;
      mask.style.webkitMaskImage = fullMask;
    });
    
    // Make cursor subtle on hover
    container.addEventListener('mouseenter', function() {
      cursor.style.width = '10px';
      cursor.style.height = '10px';
      cursor.style.opacity = '0.4';
    });
    
    container.addEventListener('mouseleave', function() {
      cursor.style.width = '12px';
      cursor.style.height = '12px';
      cursor.style.opacity = '0.6';
    });
  });
});
</script>

<style>
/**
 * Flashlight cursor effect for Elementor
 * Developed by Twist | https://twist-digital.co.il/ 
 */

/* Container element */
.flashlight-container {
  position: relative;
  overflow: hidden;
  cursor: none !important;
}


/* Dark mask */
.flashlight-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(39, 33, 77, 1);
  z-index: 2;
  mask-image: radial-gradient(circle at center, 
    transparent 0, 
    transparent 50px, 
    rgba(0, 0, 0, 0.1) 80px, 
    rgba(0, 0, 0, 0.3) 100px, 
    rgba(0, 0, 0, 0.6) 120px, 
    rgba(0, 0, 0, 0.8) 140px, 
    black 160px
  );
  -webkit-mask-image: radial-gradient(circle at center, 
    transparent 0, 
    transparent 50px, 
    rgba(0, 0, 0, 0.1) 80px, 
    rgba(0, 0, 0, 0.3) 100px, 
    rgba(0, 0, 0, 0.6) 120px, 
    rgba(0, 0, 0, 0.8) 140px, 
    black 160px
  );
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

/* Custom cursor - made more subtle */
.custom-cursor {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  position: fixed;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(1px);
  transition: width 0.2s, height 0.2s, opacity 0.2s;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Find all containers
  const containers = document.querySelectorAll('.flashlight-container');
  if (containers.length === 0) {
    console.error("No elements with class .flashlight-container found");
    return;
  }
  
  // Create custom cursor
  const cursor = document.createElement('div');
  cursor.className = 'custom-cursor';
  document.body.appendChild(cursor);
  
  // Update cursor position globally
  document.addEventListener('mousemove', function(e) {
    cursor.style.left = e.clientX + 'px';
    cursor.style.top = e.clientY + 'px';
  });
  
  // Process each container
  containers.forEach(function(container) {
    // Check if image element already exists, if not - create one
    let image = container.querySelector('.flashlight-image');
    if (!image) {
      image = document.createElement('div');
      image.className = 'flashlight-image';
      container.appendChild(image);
    }
    
    // Create mask
    const mask = document.createElement('div');
    mask.className = 'flashlight-mask';
    container.appendChild(mask);
    
    // Set fully opaque mask at start (no circle)
    const fullMask = 'radial-gradient(circle at center, black 0)';
    mask.style.maskImage = fullMask;
    mask.style.webkitMaskImage = fullMask;
    
    // Update flashlight position with cursor
    container.addEventListener('mousemove', function(e) {
      const rect = container.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      
      // Update mask position with smooth gradient
      const maskValue = `radial-gradient(circle at ${x}px ${y}px, 
        transparent 0, 
        transparent 50px, 
        rgba(0, 0, 0, 0.1) 80px, 
        rgba(0, 0, 0, 0.3) 100px, 
        rgba(0, 0, 0, 0.6) 120px, 
        rgba(0, 0, 0, 0.8) 140px, 
        black 160px
      )`;
      mask.style.maskImage = maskValue;
      mask.style.webkitMaskImage = maskValue;
    });
    
    // When cursor leaves, make mask fully opaque (no circle)
    container.addEventListener('mouseleave', function() {
      const fullMask = 'radial-gradient(circle at center, black 0)';
      mask.style.maskImage = fullMask;
      mask.style.webkitMaskImage = fullMask;
    });
    
    // Make cursor subtle on hover
    container.addEventListener('mouseenter', function() {
      cursor.style.width = '10px';
      cursor.style.height = '10px';
      cursor.style.opacity = '0.4';
    });
    
    container.addEventListener('mouseleave', function() {
      cursor.style.width = '12px';
      cursor.style.height = '12px';
      cursor.style.opacity = '0.6';
    });
  });
});
</script>