.slideshow-container {
  position: relative;
  width: 100%;
  height: 100vh; /* Adjust as needed */
  overflow: hidden;
  background: linear-gradient(to bottom, #001524, #022c43); /* Night sky effect */
}

.snowflake {
  position: absolute;
  top: -50px;
  animation: fall linear infinite, fadeInOut ease-in-out infinite;
  pointer-events: none; /* Prevent interaction */
}

.snowflake-svg {
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
  opacity: 0.8;
  transform-origin: center;
  animation: glow 3s ease-in-out infinite alternate;
}

@keyframes fall {
  0% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(110vh); /* Fall off the bottom */
  }
}

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.9;
  }
}

@keyframes glow {
  from {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4));
  }
  to {
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
  }
}

const snowflakeSVGs = [
  // Simple snowflake design
  `
    <svg class="snowflake-svg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="white">
      <circle cx="50" cy="50" r="4" />
      <path d="M50 10 L50 40" stroke="white" stroke-width="2" />
      <path d="M50 60 L50 90" stroke="white" stroke-width="2" />
      <path d="M10 50 L40 50" stroke="white" stroke-width="2" />
      <path d="M60 50 L90 50" stroke="white" stroke-width="2" />
    </svg>
  `,

  // Intricate snowflake with symmetry
  `
    <svg class="snowflake-svg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="white">
      <circle cx="50" cy="50" r="4" />
      <path d="M50 10 L50 40" stroke="white" stroke-width="2" />
      <path d="M50 60 L50 90" stroke="white" stroke-width="2" />
      <path d="M10 50 L40 50" stroke="white" stroke-width="2" />
      <path d="M60 50 L90 50" stroke="white" stroke-width="2" />
      <path d="M25 25 L75 75" stroke="white" stroke-width="2" />
      <path d="M25 75 L75 25" stroke="white" stroke-width="2" />
    </svg>
  `,

  // Snowflake with extended branches
  `
    <svg class="snowflake-svg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="white">
      <circle cx="50" cy="50" r="3" />
      <path d="M50 10 L50 30" stroke="white" stroke-width="2" />
      <path d="M50 70 L50 90" stroke="white" stroke-width="2" />
      <path d="M10 50 L30 50" stroke="white" stroke-width="2" />
      <path d="M70 50 L90 50" stroke="white" stroke-width="2" />
      <path d="M30 30 L70 70" stroke="white" stroke-width="2" />
      <path d="M30 70 L70 30" stroke="white" stroke-width="2" />
      <path d="M50 30 L45 20 L55 20 Z" fill="white" />
      <path d="M50 70 L45 80 L55 80 Z" fill="white" />
    </svg>
  `,

  // Highly detailed snowflake
  `
    <svg class="snowflake-svg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="white">
      <circle cx="50" cy="50" r="3" />
      <path d="M50 10 L50 40" stroke="white" stroke-width="1" />
      <path d="M50 60 L50 90" stroke="white" stroke-width="1" />
      <path d="M10 50 L40 50" stroke="white" stroke-width="1" />
      <path d="M60 50 L90 50" stroke="white" stroke-width="1" />
      <path d="M20 20 L80 80" stroke="white" stroke-width="1" />
      <path d="M20 80 L80 20" stroke="white" stroke-width="1" />
      <circle cx="50" cy="20" r="2" fill="white" />
      <circle cx="50" cy="80" r="2" fill="white" />
      <circle cx="20" cy="50" r="2" fill="white" />
      <circle cx="80" cy="50" r="2" fill="white" />
    </svg>
  `,

  // Starburst-style snowflake
  `
    <svg class="snowflake-svg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="white">
      <circle cx="50" cy="50" r="3" />
      <path d="M50 10 L50 90" stroke="white" stroke-width="1" />
      <path d="M10 50 L90 50" stroke="white" stroke-width="1" />
      <path d="M20 20 L80 80" stroke="white" stroke-width="1" />
      <path d="M20 80 L80 20" stroke="white" stroke-width="1" />
      <path d="M35 15 L50 30 L65 15 Z" fill="white" />
      <path d="M35 85 L50 70 L65 85 Z" fill="white" />
    </svg>
  `,
];
document.addEventListener('DOMContentLoaded', () => {
  const container = document.querySelector('.slideshow-container');
  const snowflakeCount = 50; // Number of snowflakes to generate

  function createSnowflake() {
    const snowflake = document.createElement('div');
    const size = Math.random() * 20 + 10; // Random size between 10px and 30px
    const position = Math.random() * 100; // Random horizontal position
    const duration = Math.random() * 5 + 3; // Random animation duration between 3s and 8s

    // Randomly select a snowflake design
    const randomSVG = snowflakeSVGs[Math.floor(Math.random() * snowflakeSVGs.length)];

    // Style and position snowflake
    snowflake.classList.add('snowflake');
    snowflake.style.width = `${size}px`;
    snowflake.style.height = `${size}px`;
    snowflake.style.left = `${position}%`;
    snowflake.style.animationDuration = `${duration}s`;
    snowflake.innerHTML = randomSVG;

    container.appendChild(snowflake);

    // Remove after animation
    snowflake.addEventListener('animationend', () => snowflake.remove());
  }

  // Generate snowflakes at intervals
  setInterval(() => {
    createSnowflake();
  }, 300); // Adjust frequency as needed
});