document$.subscribe(function () {
  const hero = document.querySelector(".hero-banner");
  const header = document.querySelector(".md-header");
  const sidebarLeft = document.querySelector(".md-sidebar--primary");
  const sidebarRight = document.querySelector(".md-sidebar--secondary");

  // Add class to body if hero exists
  if (hero) {
    document.body.classList.add("has-hero");
  } else {
    // NO HERO - make header solid immediately
    if (header) {
      header.classList.add("scrolled");
    }
  }

  if (!hero || !header) return;

  // Reveal hero banner
  requestAnimationFrame(() => {
    hero.style.opacity = 1;
  });

  // Scroll logic - ONLY runs if hero exists
  function updateUI() {
    const heroBottom = hero.getBoundingClientRect().bottom;
    const hasScrolledPastHero = heroBottom <= 0;

    // Update header
    if (hasScrolledPastHero) {
      header.classList.add("scrolled");
    } else {
      header.classList.remove("scrolled");
    }

    // Handle sidebar visibility (only on wide screens)
    if (window.matchMedia("(min-width: 76.25em)").matches) {
      const show = hasScrolledPastHero;

      [sidebarLeft, sidebarRight].forEach((sidebar) => {
        if (!sidebar) return;

        if (show) {
          sidebar.style.display = "block";
          requestAnimationFrame(() => {
            sidebar.style.opacity = "1";
          });
        } else {
          sidebar.style.opacity = "0";
          setTimeout(() => {
            sidebar.style.display = "none";
          }, 300);
        }
      });
    }
  }

  // Initial and on scroll
  window.addEventListener("scroll", updateUI);
  updateUI(); // Initial run
});