document.addEventListener(”DOMContentLoaded”, function () {
const gradientHover = document.querySelector(”.gradient-hover”);

if (!gradientHover) return;

// Select only the direct .fusion-column-wrapper inside .gradient-hover
const columnWrapper = gradientHover.querySelector(”:scope > .fusion-column-wrapper”);

if (!columnWrapper) return;

let isVisible = false;

// Observe visibility of .gradient-hover
const observer = new IntersectionObserver(
(entries) => {
isVisible = entries[0].isIntersecting;
},
{ threshold: 0.1 }
);
observer.observe(gradientHover);

// Change this value to control smoothness (0.1 – 0.9 = slow to fast movement, 0 = instant movement, 1 = no movement)
let transitionSmoothness = 0.4;

let remappedSmoothness = transitionSmoothness * (0.08 / 0.5);

// Set up initial and target positions
let targetXPrimary = 50, targetYPrimary = 50;
let targetXSecondary = 95, targetYSecondary = 95;
let currentXPrimary = 50, currentYPrimary = 50;
let currentXSecondary = 95, currentYSecondary = 95;

// Track time to limit updates
let lastUpdateTime = performance.now();
const updateInterval = 16; // 16ms ~ 60FPS

document.addEventListener(”mousemove”, function (event) {
if (!isVisible) return;

const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
const rect = gradientHover.getBoundingClientRect();

// Find the center of the viewport
const centerXViewport = viewportWidth / 2;
const centerYViewport = viewportHeight / 2;

// Find the center of .fusion-column-wrapper
const centerXElement = rect.left + rect.width / 2;
const centerYElement = rect.top + rect.height / 2;

// Calculate how far the mouse is from the center of the viewport (-1 to 1 range)
const xDelta = (event.clientX – centerXViewport) / centerXViewport;
const yDelta = (event.clientY – centerYViewport) / centerYViewport;

// Set new target positions for the gradients
targetXPrimary = 50 + (xDelta * 50);
targetYPrimary = 50 + (yDelta * 50);
targetXSecondary = 95 + (xDelta * 10);
targetYSecondary = 95 + (yDelta * 10);
});

function updateGradients(currentTime) {
if (currentTime – lastUpdateTime < updateInterval) {
requestAnimationFrame(updateGradients);
return;
}
lastUpdateTime = currentTime;

// Compute distance to target positions
let distancePrimary = Math.hypot(targetXPrimary – currentXPrimary, targetYPrimary – currentYPrimary);
let distanceSecondary = Math.hypot(targetXSecondary – currentXSecondary, targetYSecondary – currentYSecondary);

// Calculate smoothing factor based on distance (closer = slower, farther = faster)
let smoothingFactorPrimary = transitionSmoothness === 0 ? 1 : Math.min(0.2, distancePrimary * remappedSmoothness * 0.02);
let smoothingFactorSecondary = transitionSmoothness === 0 ? 1 : Math.min(0.2, distanceSecondary * remappedSmoothness * 0.02);

// Gradually interpolate (lerp) towards the target positions based on smoothness
currentXPrimary += (targetXPrimary – currentXPrimary) * smoothingFactorPrimary;
currentYPrimary += (targetYPrimary – currentYPrimary) * smoothingFactorPrimary;
currentXSecondary += (targetXSecondary – currentXSecondary) * smoothingFactorSecondary;
currentYSecondary += (targetYSecondary – currentYSecondary) * smoothingFactorSecondary;

// Apply the new smoothly updated positions
columnWrapper.style.setProperty("–primary-gradient-position", `${currentXPrimary}% ${currentYPrimary}%`);
columnWrapper.style.setProperty("–secondary-gradient-position", `${currentXSecondary}% ${currentYSecondary}%`);

// Continuously update
requestAnimationFrame(updateGradients);
}

// Start the animation loop
requestAnimationFrame(updateGradients);
});