document.addEventListener('DOMContentLoaded', function() {
  // Parallax effect
  const hero = document.querySelector('.hero');
  window.addEventListener('scroll', function() {
    const scroll = window.pageYOffset;
    hero.style.transform = `translateY(${scroll * 0.3}px)`;
  });

  // Dynamic header
  const header = document.querySelector('custom-header');
  window.addEventListener('scroll', function() {
    if (window.scrollY > 100) {
      header.shadowRoot.host.style.background = 'rgba(0, 0, 0, 0.95)';
      header.shadowRoot.host.style.boxShadow = '0 4px 30px rgba(0, 0, 0, 0.3)';
    } else {
      header.shadowRoot.host.style.background = 'rgba(0, 0, 0, 0.9)';
      header.shadowRoot.host.style.boxShadow = '0 4px 30px rgba(0, 0, 0, 0.1)';
    }
  });

  // Animate elements on scroll
  const animateOnScroll = function() {
    const elements = document.querySelectorAll('.grid-item, .about-content');
    elements.forEach(el => {
      const elementTop = el.getBoundingClientRect().top;
      if (elementTop < window.innerHeight - 100) {
        el.style.opacity = '1';
        el.style.transform = 'translateY(0)';
      }
    });
  };

  // Set initial state
  document.querySelectorAll('.grid-item, .about-content').forEach(el => {
    el.style.opacity = '0';
    el.style.transform = 'translateY(20px)';
    el.style.transition = 'all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)';
  });

  window.addEventListener('scroll', animateOnScroll);
  animateOnScroll(); // Run once on load

  // Smooth scrolling
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
      e.preventDefault();
      document.querySelector(this.getAttribute('href')).scrollIntoView({
        behavior: 'smooth'
      });
    });
  });
});