script.js

(() => {
  const root = document.documentElement;
  const flowList = document.querySelector('.flow-list');
  const parallaxItems = [...document.querySelectorAll('[data-parallax]')];
  const navLinks = [...document.querySelectorAll('[data-nav]')];
  const navSections = [...document.querySelectorAll('[data-nav-section]')];
  const footer = document.querySelector('.footer');
  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  let ticking = false;

  const clamp = (value, min, max) => Math.min(max, Math.max(min, value));

  function updateScroll() {
    if (!reduceMotion) {
      parallaxItems.forEach((item) => {
        const rect = item.getBoundingClientRect();
        const centerDelta = rect.top + rect.height / 2 - window.innerHeight / 2;
        const speed = Number(item.dataset.parallax || 0);
        item.style.transform = `translate3d(0, ${clamp(centerDelta * speed, -24, 24)}px, 0)`;
      });
    }

    if (flowList) {
      const rect = flowList.getBoundingClientRect();
      const range = rect.height + window.innerHeight * .45;
      const passed = window.innerHeight * .72 - rect.top;
      flowList.style.setProperty('--flow-progress', clamp(passed / range, 0, 1));
    }

    ticking = false;
  }

  function requestScrollUpdate() {
    if (!ticking) {
      window.requestAnimationFrame(updateScroll);
      ticking = true;
    }
  }

  const revealObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: .12, rootMargin: '0px 0px -7% 0px' });

  document.querySelectorAll('.reveal').forEach((item) => revealObserver.observe(item));

  const navObserver = new IntersectionObserver((entries) => {
    const visible = entries.filter((entry) => entry.isIntersecting).sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
    if (!visible) return;
    const active = visible.target.dataset.navSection;
    navLinks.forEach((link) => link.classList.toggle('is-active', link.dataset.nav === active));
  }, { rootMargin: '-25% 0px -55% 0px', threshold: [0, .1, .5] });

  navSections.forEach((section) => navObserver.observe(section));

  if (footer) {
    const footerEdgeObserver = new IntersectionObserver(([entry]) => {
      root.classList.toggle('is-footer-visible', entry.isIntersecting);
    }, { threshold: .01 });
    footerEdgeObserver.observe(footer);
  }

  document.querySelectorAll('[data-carousel]').forEach((carousel) => {
    const viewport = carousel.querySelector('[data-carousel-viewport]');
    const track = carousel.querySelector('.feature-track');
    const slides = [...carousel.querySelectorAll('[data-carousel-slide]')];
    let activeIndex = 0;
    let scrollTimer;

    if (!viewport || !track || slides.length === 0) return;

    const slideLeft = (slide) => slide.offsetLeft - track.offsetLeft;

    function updateCarousel(nextIndex) {
      activeIndex = clamp(nextIndex, 0, slides.length - 1);
    }

    function moveTo(index, smooth = true) {
      const nextIndex = clamp(index, 0, slides.length - 1);
      viewport.scrollTo({
        left: slideLeft(slides[nextIndex]),
        behavior: smooth && !reduceMotion ? 'smooth' : 'auto',
      });
      updateCarousel(nextIndex);
    }

    function syncToScroll() {
      const viewportCenter = viewport.scrollLeft + viewport.clientWidth / 2;
      const nearestIndex = slides.reduce((nearest, slide, index) => {
        const currentCenter = slideLeft(slide) + slide.offsetWidth / 2;
        const nearestCenter = slideLeft(slides[nearest]) + slides[nearest].offsetWidth / 2;
        const currentDistance = Math.abs(currentCenter - viewportCenter);
        const nearestDistance = Math.abs(nearestCenter - viewportCenter);
        return currentDistance < nearestDistance ? index : nearest;
      }, 0);
      updateCarousel(nearestIndex);
    }

    viewport.addEventListener('scroll', () => {
      window.clearTimeout(scrollTimer);
      scrollTimer = window.setTimeout(syncToScroll, 80);
    }, { passive: true });
    viewport.addEventListener('keydown', (event) => {
      if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
      event.preventDefault();
      moveTo(activeIndex + (event.key === 'ArrowRight' ? 1 : -1));
    });
    window.addEventListener('resize', () => moveTo(activeIndex, false), { passive: true });
    updateCarousel(0);
  });

  window.addEventListener('scroll', requestScrollUpdate, { passive: true });
  window.addEventListener('resize', requestScrollUpdate, { passive: true });
  updateScroll();
})();