document.addEventListener('DOMContentLoaded', () => {
  const stickyItems = document.querySelectorAll('[data-display="sticky-image"]');
  const cardItems = document.querySelectorAll('.item_specialties[data-key]');
  if (!stickyItems.length || !cardItems.length) return;

  const stickyByKey = new Map();
  stickyItems.forEach(item => {
    const key = item.getAttribute('data-key');
    if (key) stickyByKey.set(key, item);
  });

  const setActive = key => {
    stickyByKey.forEach((el, mapKey) => {
      const isActive = mapKey === key;
      el.style.opacity = isActive ? '1' : '0';
      el.style.zIndex = isActive ? '2' : '1';
    });
    cardItems.forEach(card => {
      card.classList.toggle('is-active', card.getAttribute('data-key') === key);
    });
  };

  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (!entry.isIntersecting) return;
      const key = entry.target.getAttribute('data-key');
      if (key) setActive(key);
    });
  }, {
    root: null,
    threshold: 0.01,
    rootMargin: '-45% 0px -45%'
  });

  cardItems.forEach(card => observer.observe(card));

  const firstKey = cardItems[0]?.getAttribute('data-key');
  if (firstKey) setActive(firstKey);
});