script.js

(() => {
  const root = document.documentElement;
  const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const themeToggle = document.getElementById('themeToggle');
  const scrollProgress = document.getElementById('scrollProgress');
  const cursorGlow = document.getElementById('cursorGlow');
  const glassNav = document.querySelector('.glass-nav');
  const mobileDock = document.getElementById('mobileDock');
  const mobileLens = document.getElementById('mobileLens');
  const mobileItems = mobileDock ? [...mobileDock.querySelectorAll('.mobile-item[data-mobile-section]')] : [];
  const observedSections = [...document.querySelectorAll('[data-section]')];

  const savedTheme = localStorage.getItem('mdify-onepage-theme');
  if (savedTheme === 'light') root.dataset.theme = 'light';

  themeToggle?.addEventListener('click', () => {
    const isLight = root.dataset.theme === 'light';
    if (isLight) {
      delete root.dataset.theme;
      localStorage.setItem('mdify-onepage-theme', 'dark');
    } else {
      root.dataset.theme = 'light';
      localStorage.setItem('mdify-onepage-theme', 'light');
    }
  });

  const updateProgress = () => {
    const max = document.documentElement.scrollHeight - innerHeight;
    const pct = max > 0 ? Math.min(100, Math.max(0, (scrollY / max) * 100)) : 0;
    if (scrollProgress) scrollProgress.style.width = `${pct}%`;
  };

  addEventListener('scroll', updateProgress, { passive: true });
  addEventListener('resize', updateProgress, { passive: true });
  updateProgress();

  if (matchMedia('(hover:hover) and (pointer:fine)').matches) {
    addEventListener('pointermove', (event) => {
      if (cursorGlow) {
        cursorGlow.style.left = `${event.clientX}px`;
        cursorGlow.style.top = `${event.clientY}px`;
        cursorGlow.style.opacity = '1';
      }
      if (glassNav) {
        const rect = glassNav.getBoundingClientRect();
        const x = Math.max(0, Math.min(rect.width, event.clientX - rect.left));
        glassNav.style.setProperty('--nav-x', `${x}px`);
      }
    }, { passive: true });
  }

  const revealObserver = new IntersectionObserver((entries) => {
    for (const entry of entries) {
      if (entry.isIntersecting) {
        entry.target.classList.add('in-view');
        revealObserver.unobserve(entry.target);
      }
    }
  }, { threshold: 0.12, rootMargin: '0px 0px -5% 0px' });

  document.querySelectorAll('.reveal, .token-compare').forEach((el) => revealObserver.observe(el));

  const countUp = (el) => {
    const target = Number(el.dataset.count || 0);
    const suffix = el.dataset.suffix || '';
    if (!target || prefersReduced) {
      el.textContent = `${target}${suffix}`;
      return;
    }
    const duration = 1100;
    const start = performance.now();
    const tick = (now) => {
      const t = Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - t, 3);
      el.textContent = `${Math.round(target * eased)}${suffix}`;
      if (t < 1) requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);
  };

  const countObserver = new IntersectionObserver((entries) => {
    for (const entry of entries) {
      if (entry.isIntersecting) {
        countUp(entry.target);
        countObserver.unobserve(entry.target);
      }
    }
  }, { threshold: 0.8 });
  document.querySelectorAll('[data-count]').forEach((el) => countObserver.observe(el));

  function positionMobileLens(item, immediate = false) {
    if (!mobileDock || !mobileLens || !item) return;
    const dockRect = mobileDock.getBoundingClientRect();
    const itemRect = item.getBoundingClientRect();
    if (immediate) mobileLens.style.transition = 'none';
    mobileDock.style.setProperty('--lens-x', `${itemRect.left - dockRect.left}px`);
    mobileDock.style.setProperty('--lens-w', `${itemRect.width}px`);
    if (immediate) {
      mobileLens.getBoundingClientRect();
      mobileLens.style.transition = '';
    }
  }

  function activateMobile(sectionName) {
    const target = mobileItems.find((item) => item.dataset.mobileSection === sectionName);
    if (!target) return;
    mobileItems.forEach((item) => item.classList.toggle('is-active', item === target));
    positionMobileLens(target);
  }

  mobileItems.forEach((item) => {
    item.addEventListener('click', () => {
      activateMobile(item.dataset.mobileSection);
      navigator.vibrate?.(5);
    });
  });

  const sectionObserver = new IntersectionObserver((entries) => {
    const visible = entries
      .filter((entry) => entry.isIntersecting)
      .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
    if (visible) activateMobile(visible.target.dataset.section);
  }, { threshold: [0.15, 0.35, 0.55], rootMargin: '-20% 0px -58% 0px' });
  observedSections.forEach((section) => sectionObserver.observe(section));

  let lastY = scrollY;
  let compact = false;
  const setCompact = (next) => {
    if (!mobileDock || next === compact) return;
    compact = next;
    mobileDock.classList.toggle('compact', compact);
    requestAnimationFrame(() => {
      const active = mobileItems.find((item) => item.classList.contains('is-active'));
      positionMobileLens(active);
    });
  };

  addEventListener('scroll', () => {
    const y = scrollY;
    const delta = y - lastY;
    if (Math.abs(delta) > 4) {
      if (delta > 0 && y > 140) setCompact(true);
      if (delta < 0) setCompact(false);
    }
    lastY = y;
  }, { passive: true });

  mobileDock?.addEventListener('pointermove', (event) => {
    const rect = mobileDock.getBoundingClientRect();
    const x = Math.max(0, Math.min(rect.width, event.clientX - rect.left));
    mobileDock.style.setProperty('--dock-x', `${x}px`);
  }, { passive: true });

  addEventListener('resize', () => {
    const active = mobileItems.find((item) => item.classList.contains('is-active')) || mobileItems[0];
    positionMobileLens(active, true);
  }, { passive: true });

  requestAnimationFrame(() => {
    const active = mobileItems.find((item) => item.classList.contains('is-active')) || mobileItems[0];
    positionMobileLens(active, true);
  });
})();