script.js

// Mobile menu toggle and small niceties
const menu = document.querySelector('[data-mobile-menu]');
const toggle = document.querySelector('.nav-toggle');
if (toggle && menu) {
  toggle.addEventListener('click', () => {
    const open = menu.classList.toggle('open');
    toggle.setAttribute('aria-expanded', String(open));
  });
}

// Year in footer
const yearEl = document.getElementById('year');
if (yearEl) yearEl.textContent = String(new Date().getFullYear());

// Smooth in-page scrolling with fixed-header offset
(() => {
  const header = document.querySelector('.nav');
  const getOffset = () => (header ? header.offsetHeight + 8 : 72);

  function scrollToHash(hash, smooth = true) {
    const el = hash && document.querySelector(hash);
    if (!el) return;
    const y = el.getBoundingClientRect().top + window.pageYOffset - getOffset();
    window.scrollTo({ top: Math.max(0, y), behavior: smooth ? 'smooth' : 'auto' });
  }

  // Intercept same-page anchor clicks
  document.addEventListener('click', (e) => {
    const a = e.target.closest('a[href^="#"]');
    if (!a) return;
    const href = a.getAttribute('href');
    if (!href || href === '#') return;
    e.preventDefault();
    if (href === '#top') {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    } else {
      history.pushState(null, '', href);
      scrollToHash(href, true);
    }
  });

  // Adjust on initial load if URL has a hash
  window.addEventListener('load', () => {
    if (location.hash) {
      // Delay to ensure layout is stable
      setTimeout(() => scrollToHash(location.hash, false), 0);
    }
  });

  // Adjust on hash changes (e.g., manual edits)
  window.addEventListener('hashchange', () => scrollToHash(location.hash, true));
})();

// Background patterns: switchable renderers (network, waves, plasma, hex, rain)
(() => {
  const canvas = document.getElementById('bg-canvas');
  if (!canvas) return;
  const ctx = canvas.getContext('2d');
  const dpr = Math.max(1, Math.min(2, window.devicePixelRatio || 1));
  const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)');
  let width = 0, height = 0, raf = 0, current = null;
  const isLight = () => document.body.classList.contains('theme-light');

  const common = {
    resize() {
      const rect = canvas.getBoundingClientRect();
      width = Math.floor(rect.width);
      height = Math.floor(rect.height);
      canvas.width = Math.floor(width * dpr);
      canvas.height = Math.floor(height * dpr);
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    },
    backdrop() {
      const grd = ctx.createLinearGradient(0, 0, width, height);
      if (isLight()) {
        grd.addColorStop(0, 'rgba(88,101,255,0.14)');
        grd.addColorStop(1, 'rgba(0,184,138,0.10)');
      } else {
        grd.addColorStop(0, 'rgba(107,91,255,0.10)');
        grd.addColorStop(1, 'rgba(0,208,138,0.06)');
      }
      ctx.fillStyle = grd;
      ctx.fillRect(0, 0, width, height);
    },
    bottomFade() {
      const fadeH = Math.min(160, Math.floor(height * 0.25));
      if (fadeH > 0) {
        const fade = ctx.createLinearGradient(0, height - fadeH, 0, height);
        fade.addColorStop(0, 'rgba(0,0,0,0)');
        fade.addColorStop(1, 'rgba(0,0,0,1)');
        ctx.save();
        ctx.globalCompositeOperation = 'destination-out';
        ctx.fillStyle = fade;
        ctx.fillRect(0, height - fadeH, width, fadeH);
        ctx.restore();
      }
    }
  };

  const patterns = {
    network: (() => {
      let points = [];
      function init() {
        const area = width * height;
        const target = Math.max(28, Math.min(90, Math.floor(area / 14000)));
        points = new Array(target).fill(0).map(() => ({
          x: Math.random() * width,
          y: Math.random() * height,
          vx: (Math.random() - 0.5) * 0.4,
          vy: (Math.random() - 0.5) * 0.4,
          r: 1 + Math.random() * 1.3
        }));
      }
      function step() {
        ctx.clearRect(0, 0, width, height);
        common.backdrop();
        for (let p of points) {
          p.x += p.vx; p.y += p.vy;
          if (p.x < 0 || p.x > width) p.vx *= -1;
          if (p.y < 0 || p.y > height) p.vy *= -1;
        }
        const maxDist = Math.min(140, Math.max(80, Math.min(width, height) * 0.18));
        ctx.lineWidth = 1;
        for (let i = 0; i < points.length; i++) {
          const p = points[i];
          for (let j = i + 1; j < points.length; j++) {
            const q = points[j];
            const dx = p.x - q.x, dy = p.y - q.y;
            const d2 = dx*dx + dy*dy;
            if (d2 < maxDist * maxDist) {
              const a = 1 - d2 / (maxDist * maxDist);
              ctx.strokeStyle = isLight() ? `rgba(70,100,180,${Math.min(0.45, a * 0.38)})` : `rgba(166,200,255,${a * 0.35})`;
              ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(q.x, q.y); ctx.stroke();
            }
          }
        }
        for (let p of points) {
          ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI*2); ctx.fillStyle = isLight() ? 'rgba(40,60,120,0.8)' : 'rgba(230,236,255,0.8)'; ctx.fill();
        }
        common.bottomFade();
        raf = requestAnimationFrame(step);
      }
      return { init, step };
    })(),
    hex: (() => {
      let cols=0, rows=0, size=20, hoff=0;
      function init() {
        size = Math.max(16, Math.min(32, Math.floor(Math.min(width,height)/32)));
        hoff = size * Math.sqrt(3)/2;
        cols = Math.ceil(width / (size*1.5)) + 2;
        rows = Math.ceil(height / (hoff)) + 2;
      }
      function step(t=0) {
        ctx.clearRect(0,0,width,height);
        common.backdrop();
        ctx.lineWidth = 1;
        for (let r=0;r<rows;r++){
          for (let c=0;c<cols;c++){
            const x = c*size*1.5 + ((r%2)? size*0.75 : 0) - size;
            const y = r*hoff - size;
            const pulse = (Math.sin((x+y)*0.01 + t*0.002)+1)/2;
            // Slightly darken hex lines in light theme
            const alpha = (isLight() ? 0.12 : 0.12) + pulse * (isLight() ? 0.20 : 0.20);
            const light = isLight() ? 78 : 80; // a tad darker in light theme
            ctx.strokeStyle = `hsla(0, 0%, ${light}%, ${alpha})`;
            drawHex(x,y,size);
          }
        }
        common.bottomFade();
        raf = requestAnimationFrame(step);
      }
      function drawHex(x,y,r){
        ctx.beginPath();
        for (let i=0;i<6;i++){
          const a = Math.PI/3*i;
          const px = x + r*Math.cos(a);
          const py = y + r*Math.sin(a);
          if (i===0) ctx.moveTo(px,py); else ctx.lineTo(px,py);
        }
        ctx.closePath(); ctx.stroke();
      }
      return { init, step };
    })(),
    dots: (() => {
      let spacing=22, ox=0, oy=0;
      function init(){
        spacing = Math.max(16, Math.min(28, Math.floor(Math.min(width,height)/28)));
      }
      function step(t=0){
        ctx.clearRect(0,0,width,height);
        common.backdrop();
        ox = Math.sin(t*0.0006)*spacing; oy = Math.cos(t*0.0005)*spacing*0.5;
        for (let y=-spacing; y<height+spacing; y+=spacing){
          for (let x=-spacing; x<width+spacing; x+=spacing){
            const px = x + (y% (spacing*2)===0? ox : -ox)*0.2;
            const py = y + oy*0.15;
            const osc = Math.max(0, Math.cos((x+y+t*0.2)*0.01));
            // Make dots darker in light theme for stronger presence
            const alpha = isLight() ? 0.32 + 0.38*osc : 0.22 + 0.28*osc;
            const light = isLight() ? 32 : 78; // dark grey in light theme, light in dark
            ctx.fillStyle = `hsla(0, 0%, ${light}%, ${alpha})`;
            const size = isLight() ? 2.2 : 1.8;
            ctx.fillRect(px, py, size, size);
          }
        }
        common.bottomFade();
        raf = requestAnimationFrame(step);
      }
      return { init, step };
    })(),
    
  };

  function run(name){
    cancelAnimationFrame(raf);
    ctx.clearRect(0,0,canvas.width,canvas.height);
    common.resize();
    current = patterns[name] ? name : 'network';
    const p = patterns[current];
    p.init();
    if (!prefersReduced.matches) p.step();
    localStorage.setItem('bgPattern', current);
    const sel = document.getElementById('bg-select');
    if (sel) sel.value = current;
  }

  const ro = new ResizeObserver(() => { if (current) run(current); });
  ro.observe(canvas);
  const initial = localStorage.getItem('bgPattern') || 'network';
  run(initial);

  // UI select and keyboard toggle (press "b" to cycle)
  document.addEventListener('keydown', (e)=>{
    if (e.key.toLowerCase() === 'b'){
      const names = Object.keys(patterns);
      const idx = names.indexOf(current);
      run(names[(idx+1)%names.length]);
    }
  });

  document.addEventListener('visibilitychange', () => {
    if (document.hidden) cancelAnimationFrame(raf); else if (current) run(current);
  });
})();

// Make header title/background activate when hero heading passes under the bar
(() => {
  const nav = document.querySelector('.nav');
  const heroTitle = document.querySelector('.hero h1');
  if (!nav || !heroTitle) return;
  const getThreshold = () => (nav.offsetHeight + 6);
  const update = () => {
    const top = heroTitle.getBoundingClientRect().top;
    if (top <= getThreshold()) nav.classList.add('scrolled');
    else nav.classList.remove('scrolled');
  };
  ['scroll','resize','orientationchange'].forEach(evt => window.addEventListener(evt, update, { passive: true }));
  // Run on load and after fonts/layout settle
  window.addEventListener('load', () => setTimeout(update, 0));
  update();
})();

// No-op: fade handled via CSS overlap of first section