/**
 * Marks the page as scrolled.
 *
 * A header can carry a second set of colours for the scrolled page - transparent over the hero,
 * solid once the reader has moved on, the way the Flatsome transparent header works. The
 * stylesheet holds both states; this only says which one applies. Without the script the header
 * keeps its normal colours, which is a readable page, not a broken one.
 */
export function initScrolled(doc = document) {
  const view = doc.defaultView;
  const root = doc.documentElement;
  // Der Nach-oben-Knopf blendete sich ueber eine Scroll-Animation ein. Browser, die
  // `animation-timeline: scroll()` zwar kennen, aber nicht ausfuehren, liessen ihn im ersten
  // Bild der Animation stehen - unsichtbar, dauerhaft. Deshalb entscheidet jetzt eine Klasse.
  // Ohne dieses Skript bleibt der Knopf sichtbar: erreichbar ist besser als unsichtbar.
  const after = parseInt(getComputedStyle(root).getPropertyValue('--kant-top-after'), 10);
  const schwelle = Number.isFinite(after) && after > 0 ? after : 400;
  let queued = false;
  const sync = () => {
    queued = false;
    root.classList.toggle('is-scrolled', view.scrollY > 40);
    root.classList.toggle('kant-top-shown', view.scrollY > schwelle);
  };
  const onScroll = () => { if (!queued) { queued = true; view.requestAnimationFrame(sync); } };
  view.addEventListener('scroll', onScroll, { passive: true });
  root.classList.add('kant-top-armed');
  sync();
  return () => {
    view.removeEventListener('scroll', onScroll);
    root.classList.remove('is-scrolled', 'kant-top-armed', 'kant-top-shown');
  };
}

if (!document.querySelector('#editor')) initScrolled();