//DOM load event
window.addEventListener("DOMContentLoaded", () => {
const card = document.querySelectorAll(".card");
let spotlightSize =
"#000 0px, rgba(0, 0, 0, 0.1) 30px, rgba(0, 0, 0, 0.005) 80px, rgba(0, 0, 0, 0.00) 200px";
// "#000 0px, rgba(0, 0, 0, 0.2) 100px";
card.forEach((e) => {
const spotlight = e.querySelector(".spotlight");
e.addEventListener("mousemove", (mouse) =>
updateSpotlight(mouse, spotlight)
);
e.addEventListener("mouseenter", () => {
spotlight.style.opacity = "1";
});
e.addEventListener("mouseleave", () => {
spotlight.style.opacity = "0";
});
});
function updateSpotlight(e, spotlightElement) {
const x = e.clientX - spotlightElement.getBoundingClientRect().left;
const y = e.clientY - spotlightElement.getBoundingClientRect().top;
if (spotlightElement) {
spotlightElement.style.maskImage = `radial-gradient(circle at ${x}px ${y}px, ${spotlightSize}`;
}
}
});