// Function to generate a random number between min and max
function getRandom(min, max) {
    return Math.random() * (max - min) + min;
}

// Select all stars
document.addEventListener('DOMContentLoaded', function () {
    const animationBackground = document.querySelector('.animation-sparkling_background');

    // Check if class starts with "animation-" and data-animation is empty or not present
    if (animationBackground && animationBackground.className.startsWith('animation-') && !animationBackground.getAttribute('data-animation')) {
        const stars = document.querySelectorAll('.animation-sparkling_background .star');
        stars.forEach((star) => {
            // Hide the stars
            star.style.display = 'none';
        });
        return; // Exit the function since no animation is needed
    }

    const stars = document.querySelectorAll('.animation-sparkling_background .star');
    const container = document.querySelector('#backgroundAnimation .container');

    // Get container dimensions
    const containerRect = container.getBoundingClientRect();
    const containerLeft = containerRect.left;
    const containerRight = containerRect.right;
    const windowWidth = window.innerWidth;
    const windowHeight = window.innerHeight;

    // Calculate container left and right in percentages
    const containerLeftPercent = (containerLeft / windowWidth) * 100;
    const containerRightPercent = (containerRight / windowWidth) * 100;

    // Apply random positions to each star
    stars.forEach((star) => {
        let leftPercent;

        // Ensure the star is placed only on the left or right of the container
        if (Math.random() < 0.5) {
            // Left side of the container - clustering stars closer
            leftPercent = getRandom(containerLeftPercent - 5, containerLeftPercent + 5) + '%';
        } else {
            // Right side of the container - clustering stars closer
            leftPercent = getRandom(containerRightPercent - 5, containerRightPercent + 5) + '%';
        }

        // Cluster the top positions within a smaller vertical range (e.g., 40% to 60%)
        const topPercent = getRandom(40, 60) + '%'; // Clustered top position
        const delay = getRandom(0, 15) + 's';

        star.style.top = topPercent;
        star.style.left = leftPercent;
        star.style.animationDelay = delay;
    });
});







//floating stars
// Function to generate a random number between min and max
// function getRandom(min, max) {
//     return Math.random() * (max - min) + min;
//   }
  
//   // Function to randomize size, position, and animation delay for initial load
//   function scatterFloatingStars() {
//     const stars = document.querySelectorAll('.floatingstar');
  
//     stars.forEach((star) => {
//       // Random size between 5px and 30px
//       const starSize = getRandom(5, 30) + 'px';
//       star.style.width = starSize;
//       star.style.height = starSize;
  
//       // Set random initial position: top between 0% and 100% (random vertical position)
//       const topPosition = getRandom(0, 100) + '%';  // Random vertical position from top to bottom
//       star.style.top = topPosition;
  
//       // Random horizontal position (left)
//       const leftPosition = getRandom(0, 100) + '%';  // Random horizontal position
//       star.style.left = leftPosition;
  
//       // Random animation delay to stagger floating stars
//       const delay = getRandom(0, 20) + 's';
//       star.style.animationDelay = delay;
//     });
//   }
  
//   // Function to reset a star to the bottom after it floats out of view
//   function resetStar(star) {
//     // Reset the position of the star to the bottom with new random size and position
//     star.style.top = '100%'; // Start at the bottom of the container
//     star.style.left = getRandom(0, 100) + '%';  // New random horizontal position
//     star.style.width = getRandom(5, 30) + 'px';  // Random size
//     star.style.height = getRandom(5, 30) + 'px';  // Random size
//     star.style.animationDelay = '0s';  // No delay, restart immediately
//   }
  
//   // Function to create and ensure there are always 30 floating stars
//   function maintainFloatingStars() {
//     const container = document.querySelector('#backgroundAnimation.animation-floating_stars');
  
//     // Only proceed if the container exists and has the appropriate class
//     if (container) {
//       // Get the current number of stars
//       let existingStars = container.querySelectorAll('.floatingstar').length;
  
//       // If fewer than 30 stars exist, add more
//       const starsToAdd = 30 - existingStars;
//       for (let i = 0; i < starsToAdd; i++) {
//         const star = document.createElement('div');
//         star.classList.add('floatingstar');
//         container.appendChild(star);
  
//         // Add event listener to reset the star once its animation ends
//         star.addEventListener('animationend', () => resetStar(star));
//       }
  
//       // Scatter the initial stars on load
//       scatterFloatingStars();
//     }
//   }
  
//   // When DOM content is loaded, ensure 30 stars are scattered and floating
//   document.addEventListener('DOMContentLoaded', function () {
//     maintainFloatingStars();  // Ensure 30 stars
  
//     // Continuously ensure that there are 30 stars on the screen
//     setInterval(maintainFloatingStars, 2000);  // Check every 2 seconds
//   });