const container = document.createElement("div");
container.style.position = "fixed";
container.style.top = "0";
container.style.left = "0";
container.style.width = "100vw";
container.style.height = "100vh";
container.style.pointerEvents = "none";
container.style.overflow = "hidden";
container.style.zIndex = "9999";
document.body.appendChild(container);

for (let i = 0; i < 60; i++) {
	const star = document.createElement("div");
	const size = Math.random() * 2 + 1;
	star.style.position = "absolute";
	star.style.width = `${size}px`;
	star.style.height = `${size}px`;
	star.style.background = "white";
	star.style.borderRadius = "50%";
	star.style.opacity = Math.random();
	star.style.top = `${Math.random() * 100}vh`;
	star.style.left = `${Math.random() * 100}vw`;
	star.style.animation = `twinkle ${Math.random() * 3 + 2}s infinite alternate ease-in-out`;
	container.appendChild(star);
}

function createShootingStar() {
	const star = document.createElement("div");
	star.classList.add("shooting-star");

	let x = Math.random() * window.innerWidth * 0.8;
	let y = Math.random() * window.innerHeight * 0.3;
	const angle = (Math.random() * Math.PI) / 6 + Math.PI / 8;
	const speed = 10;
	const totalFrames = 60;

	const deg = angle * (180 / Math.PI);
	star.style.left = `${x}px`;
	star.style.top = `${y}px`;
	star.style.transform = `rotate(${deg}deg)`;

	container.appendChild(star);

	let frame = 0;
	function animate() {
		x += Math.cos(angle) * speed;
		y += Math.sin(angle) * speed;
		star.style.left = `${x}px`;
		star.style.top = `${y}px`;
		star.style.opacity = `${1 - frame / totalFrames}`;

		frame++;
		if (frame < totalFrames) {
			requestAnimationFrame(animate);
		} else {
			container.removeChild(star);
		}
	}

	animate();
}

setInterval(() => {
	if (Math.random() < 0.3) createShootingStar();
}, 1000);