<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="sUTP-007">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Orb</title>
	<style>
		body {
			margin: 0;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #000000;
			overflow: hidden;
			font-family: Arial, sans-serif;
			cursor: none;
			position: relative;
			transition: background 0.3s ease;
		}

		.background-text {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 4rem;
			color: rgba(255, 255, 255, 0.1);
			text-align: center;
			white-space: nowrap;
			pointer-events: none;
		}

		.orb {
			position: absolute;
			width: 150px;
			height: 150px;
			border-radius: 50%;
			background: radial-gradient(circle, #ffffff 10%, #0099ff, #00008b);
			box-shadow: 0 0 25px rgba(0, 153, 255, 0.5), 0 0 50px rgba(0, 0, 139, 0.7);
			pointer-events: none;
			transform: translate(-50%, -50%);
			cursor: grab;
		}

		.orb.dragging {
			cursor: grabbing;
		}

		.dark-overlay {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: #000;
			pointer-events: none;
			z-index: -1;
			transition: background 0.3s ease;
		}
	</style>
</head>

<body>
	<div class="background-text">background</div>
	<div class="orb"></div>
	<div class="dark-overlay"></div>
	<script>
		const orb = document.querySelector('.orb');
    const body = document.body;
    const overlay = document.querySelector('.dark-overlay');

    let targetX = window.innerWidth / 2, targetY = window.innerHeight / 2;
    let currentX = targetX, currentY = targetY;
    let isDragging = false;

    orb.style.left = `${targetX}px`;
    orb.style.top = `${targetY}px`;

    document.addEventListener('mousemove', (event) => {
      if (!isDragging) {
        targetX = event.clientX;
        targetY = event.clientY;
      }
    });

    orb.addEventListener('mousedown', () => {
      isDragging = true;
      orb.classList.add('dragging');
    });

    document.addEventListener('mouseup', () => {
      isDragging = false;
      orb.classList.remove('dragging');
    });

    document.addEventListener('mousemove', (event) => {
      if (isDragging) {
        targetX = event.clientX;
        targetY = event.clientY;
      }
    });

    function animate() {
      currentX += (targetX - currentX) * 0.1;
      currentY += (targetY - currentY) * 0.1;

      orb.style.left = `${currentX}px`;
      orb.style.top = `${currentY}px`;

      const width = window.innerWidth;
      const height = window.innerHeight;

      const xPercent = (currentX / width) * 100;
      const yPercent = (currentY / height) * 100;

      const distance = Math.sqrt(Math.pow(currentX - width / 2, 2) + Math.pow(currentY - height / 2, 2));
      const maxDistance = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));

      const brightness = 0.5 + (1 - (distance / maxDistance)) * 0.5; // Range 0.5 to 1

      overlay.style.background = `radial-gradient(circle at ${xPercent}% ${yPercent}%, rgba(90, 20, 265, ${brightness}), #000 60%)`;

      requestAnimationFrame(animate);
    }

    animate();
	</script>
</body>

</html>