function createParticles() {
  const particlesContainer = document.querySelector('.particles');
  const particleCount = 50;

  for (let i = 0; i < particleCount; i++) {
    const particle = document.createElement('div');
    particle.className = 'particle';
    
    // Random size between 2px and 6px
    const size = Math.random() * 4 + 2;
    particle.style.width = `${size}px`;
    particle.style.height = `${size}px`;
    
    // Random starting position
    particle.style.left = `${Math.random() * 100}%`;
    
    // Random animation duration between 10s and 20s
    const duration = Math.random() * 10 + 10;
    particle.style.animationDuration = `${duration}s`;
    
    // Random delay
    particle.style.animationDelay = `${Math.random() * -20}s`;
    
    particlesContainer.appendChild(particle);
  }
}

document.getElementById('mysterious-button').addEventListener('click', () => {
  const button = document.getElementById('mysterious-button');
  button.style.transform = 'scale(0.95) rotate(-5deg)';
  
  setTimeout(() => {
    button.style.transform = 'scale(1.1) rotate(2deg)';
    setTimeout(() => {
      window.location.href = 'https://www.youtube.com/watch?v=xvFZjo5PgG0';
    }, 200);
  }, 200);
});

document.addEventListener('DOMContentLoaded', createParticles);

// Add hover effect to content
const content = document.querySelector('.content');
document.addEventListener('mousemove', (e) => {
  const { left, top, width, height } = content.getBoundingClientRect();
  const x = (e.clientX - left - width/2) / 25;
  const y = (e.clientY - top - height/2) / 25;
  
  content.style.transform = `rotateY(${x}deg) rotateX(${-y}deg)`;
});

content.addEventListener('mouseleave', () => {
  content.style.transform = 'rotateY(0) rotateX(0)';
});