چراغ قوه هوشمند با المنتور!

selector{
--radius: 300px;
--heading-blur: 10px;
--text-delay: 1.2s;
}
selector{
--x: 50%;
--y: 50%;
}
selector .focus-overlay{
clip-path: circle(0 at var(--x) var(--y));
transition: all 0.2s linear;
}
selector.hover .focus-overlay{
clip-path: circle(var(--radius) at var(--x) var(--y));
}


/* Heading Animtion */

selector .elementor-widget-heading{
filter: blur(var(--heading-blur));
transition: all 2s ease-in-out;
opacity: 0.75;
}
selector.animated .elementor-widget-heading{
filter: blur(0);
opacity: 1;
}


/* Text and Button Animtion */

selector .elementor-widget-text-editor,
selector .elementor-widget-button{
transform: translateY(30px);
transition: all 1s ease-in-out var(--text-delay);
opacity: 0;
animation: none;
}
selector.animated .elementor-widget-text-editor,
selector.animated .elementor-widget-button{
transform: translateY(0);
opacity: 1;
}

@media (max-width: 767px){
selector > *{
clip-path: none !important;
}
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){

$(".focus-section").on('mousemove', function(e){
var parentOffset = $(this).offset(),
x = e.pageX - parentOffset.left,
y = e.pageY - parentOffset.top

$(this).addClass('hover')

$('.focus-section').css({
'--x': x + 'px',
'--y': y + 'px',

})
})

$(".focus-section").on('mouseleave', function(){
$(this).removeClass('hover')
})

})
</script>