ex.css

// ===============================
// Overlay Menu Controls
// ===============================
function menuOpen() {
  // Show overlay menu
  document.getElementById('menu_area').style.display = 'block';
  document.getElementById('menu_overlay').style.display = 'block';
}

function menuClose() {
  // Hide overlay menu
  document.getElementById('menu_area').style.display = 'none';
  document.getElementById('menu_overlay').style.display = 'none';
}

// ===============================
// Smooth Scroll for In-Page Links
// ===============================
// If your HTML uses [data-scroll-to] or anchor links with #IDs:
document.querySelectorAll('a[href^="#"]').forEach(link => {
  link.addEventListener('click', function(e) {
    const targetID = this.getAttribute('href').slice(1);
    // If there's no target or it's just "#", skip
    if (!targetID) return;
    e.preventDefault();
    const targetEl = document.getElementById(targetID);
    if (targetEl) {
      window.scrollTo({
        top: targetEl.offsetTop - 50, // offset if needed
        behavior: 'smooth'
      });
    }
    // Also close the menu if link was inside overlay
    menuClose();
  });
});

// ===============================
// Modal Controls
// ===============================
const openModalButtons = document.querySelectorAll('.openModal');
const modal = document.getElementById('modal');
const closeModalBtn = document.getElementById('closeModal');

if (openModalButtons && modal) {
  openModalButtons.forEach(btn => {
    btn.addEventListener('click', () => {
      modal.classList.remove('hidden');
    });
  });
}
if (closeModalBtn && modal) {
  closeModalBtn.addEventListener('click', () => {
    modal.classList.add('hidden');
  });
}

// ===============================
// Scroll To Top Button
// ===============================
const scrollBtn = document.getElementById('scrollToTop');

window.addEventListener('scroll', () => {
  if (window.scrollY > 400) {
    scrollBtn.classList.remove('hidden');
  } else {
    scrollBtn.classList.add('hidden');
  }
});

if (scrollBtn) {
  scrollBtn.addEventListener('click', () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  });
}

// ===============================
// Page Load Animations
// (Optional if you're using "fade-in" with CSS keyframes)
// ===============================
document.addEventListener('DOMContentLoaded', () => {
  // If you want immediate fade in from ex.css animation,
  // you can rely on the .fade-in class alone.
  // Or do additional JS-driven animations here.
});