script.js

const root = document.documentElement;
const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;

function bootLoader() {
  const screen = document.querySelector('#loadingScreen');
  const percent = document.querySelector('#loaderPercent');
  const bar = document.querySelector('.loader-line i');
  if (!screen || reducedMotion) return screen?.remove();
  const started = performance.now();
  function tick(now) {
    const progress = Math.min(100, Math.round(((now - started) / 1250) * 100));
    percent.textContent = String(progress).padStart(3, '0');
    bar.style.width = `${progress}%`;
    if (progress < 100) requestAnimationFrame(tick);
    else setTimeout(() => screen.classList.add('is-done'), 180);
  }
  requestAnimationFrame(tick);
}
bootLoader();

const revealObserver = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      revealObserver.unobserve(entry.target);
    }
  });
}, { threshold: 0.12 });
document.querySelectorAll('[data-reveal]').forEach(element => revealObserver.observe(element));

let lastScroll = 0;
const header = document.querySelector('.site-header');
addEventListener('scroll', () => {
  const current = scrollY;
  header.classList.toggle('is-hidden', current > lastScroll && current > 160);
  lastScroll = current;
}, { passive: true });

addEventListener('pointermove', event => {
  root.style.setProperty('--mx', `${event.clientX}px`);
  root.style.setProperty('--my', `${event.clientY}px`);
}, { passive: true });

const stage = document.querySelector('#orbitalStage');
if (stage && !reducedMotion) {
  stage.addEventListener('pointermove', event => {
    const rect = stage.getBoundingClientRect();
    const x = (event.clientX - rect.left) / rect.width - .5;
    const y = (event.clientY - rect.top) / rect.height - .5;
    stage.style.setProperty('--rx', `${x * 20}deg`);
    stage.style.setProperty('--ry', `${-y * 20}deg`);
  });
  stage.addEventListener('pointerleave', () => {
    stage.style.setProperty('--rx', '0deg');
    stage.style.setProperty('--ry', '0deg');
  });
}

document.querySelectorAll('.magnetic-link').forEach(link => {
  if (reducedMotion) return;
  link.addEventListener('pointermove', event => {
    const rect = link.getBoundingClientRect();
    link.style.transform = `translate(${(event.clientX - rect.left - rect.width / 2) * .16}px, ${(event.clientY - rect.top - rect.height / 2) * .16}px)`;
  });
  link.addEventListener('pointerleave', () => link.style.transform = '');
});

function setupCanvas() {
  const canvas = document.querySelector('#signalField');
  const context = canvas.getContext('2d');
  let width = 0;
  let height = 0;
  let dpr = 1;
  const pointer = { x: innerWidth / 2, y: innerHeight / 2 };
  let particles = [];

  function resize() {
    dpr = Math.min(devicePixelRatio || 1, 2);
    width = innerWidth;
    height = innerHeight;
    canvas.width = width * dpr;
    canvas.height = height * dpr;
    canvas.style.width = `${width}px`;
    canvas.style.height = `${height}px`;
    context.setTransform(dpr, 0, 0, dpr, 0, 0);
    const count = Math.min(90, Math.max(34, Math.floor(width / 17)));
    particles = Array.from({ length: count }, () => ({
      x: Math.random() * width,
      y: Math.random() * height,
      vx: (Math.random() - .5) * .18,
      vy: (Math.random() - .5) * .18,
      size: Math.random() * 1.4 + .3
    }));
  }
  addEventListener('resize', resize);
  addEventListener('pointermove', event => { pointer.x = event.clientX; pointer.y = event.clientY; }, { passive: true });
  resize();

  function draw() {
    context.clearRect(0, 0, width, height);
    context.fillStyle = 'rgba(200,255,54,.48)';
    for (const particle of particles) {
      particle.x += particle.vx;
      particle.y += particle.vy;
      if (particle.x < 0 || particle.x > width) particle.vx *= -1;
      if (particle.y < 0 || particle.y > height) particle.vy *= -1;
      const dx = pointer.x - particle.x;
      const dy = pointer.y - particle.y;
      const distance = Math.hypot(dx, dy);
      if (distance < 140) {
        particle.x -= dx * .0015;
        particle.y -= dy * .0015;
        context.strokeStyle = `rgba(200,255,54,${(1 - distance / 140) * .16})`;
        context.beginPath();
        context.moveTo(particle.x, particle.y);
        context.lineTo(pointer.x, pointer.y);
        context.stroke();
      }
      context.beginPath();
      context.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
      context.fill();
    }
    if (!reducedMotion) requestAnimationFrame(draw);
  }
  draw();
}
setupCanvas();

const fallback = {
  public_repos: 7,
  followers: 8,
  repos: [
    { name: 'HTWallpaper', description: 'Cross-platform dynamic wallpaper application', language: 'JavaScript', stargazers_count: 0, html_url: 'https://github.com/ViTa-Chara/HTWallpaper' },
    { name: 'vita-chara.github.io', description: 'Personal signal observatory', language: 'HTML', stargazers_count: 0, html_url: 'https://github.com/ViTa-Chara/vita-chara.github.io' },
    { name: 'mdf', description: 'An archive of digital experiments', language: 'Python', stargazers_count: 0, html_url: 'https://github.com/ViTa-Chara/mdf' }
  ]
};

function animateNumber(element, value) {
  const start = performance.now();
  const duration = 900;
  function update(now) {
    const progress = Math.min(1, (now - start) / duration);
    const eased = 1 - Math.pow(1 - progress, 3);
    element.textContent = Math.round(value * eased).toLocaleString();
    if (progress < 1 && !reducedMotion) requestAnimationFrame(update);
  }
  requestAnimationFrame(update);
}

function renderRepos(repos) {
  const stream = document.querySelector('#repoStream');
  stream.innerHTML = repos.slice(0, 5).map(repo => `
    <a class="repo-row" href="${repo.html_url}" target="_blank" rel="noreferrer">
      <h3>${repo.name}</h3>
      <p>${repo.description || 'Open-source transmission without description.'}</p>
      <span>${repo.language || 'Mixed signal'}</span>
      <b>★ ${repo.stargazers_count}</b>
    </a>`).join('');
}

async function syncGitHub() {
  let profile = fallback;
  let repos = fallback.repos;
  try {
    const [profileResponse, reposResponse] = await Promise.all([
      fetch('https://api.github.com/users/ViTa-Chara', { headers: { Accept: 'application/vnd.github+json' } }),
      fetch('https://api.github.com/users/ViTa-Chara/repos?sort=updated&per_page=100', { headers: { Accept: 'application/vnd.github+json' } })
    ]);
    if (!profileResponse.ok || !reposResponse.ok) throw new Error('Signal unavailable');
    profile = await profileResponse.json();
    repos = await reposResponse.json();
    document.querySelector('#headerStatus').textContent = 'LIVE SIGNAL';
  } catch (error) {
    document.querySelector('#headerStatus').textContent = 'STABLE CACHE';
  }
  animateNumber(document.querySelector('#repoCount'), profile.public_repos || repos.length);
  animateNumber(document.querySelector('#followerCount'), profile.followers || 0);
  animateNumber(document.querySelector('#starCount'), repos.reduce((sum, repo) => sum + repo.stargazers_count, 0));
  renderRepos(repos.sort((a, b) => new Date(b.pushed_at || 0) - new Date(a.pushed_at || 0)));
  document.querySelector('#syncTime').textContent = `SYNCED ${new Date().toLocaleTimeString('zh-CN', { hour12: false })}`;
}
syncGitHub();

function updateClock() {
  const now = new Date();
  document.querySelector('#localTime').textContent = now.toLocaleTimeString('zh-CN', { hour12: false, timeZone: 'Asia/Shanghai', hour: '2-digit', minute: '2-digit' });
  document.querySelector('#footerDate').textContent = now.toLocaleDateString('en-CA');
}
updateClock();
setInterval(updateClock, 1000);

const memeCloud = document.querySelector('#memeCloud');
if (memeCloud && !reducedMotion) {
  memeCloud.addEventListener('pointermove', event => {
    const rect = memeCloud.getBoundingClientRect();
    const x = (event.clientX - rect.left) / rect.width - .5;
    const y = (event.clientY - rect.top) / rect.height - .5;
    memeCloud.querySelectorAll('figure').forEach((figure, index) => {
      const depth = (index % 3 + 1) * 5;
      figure.style.marginLeft = `${x * depth}px`;
      figure.style.marginTop = `${y * depth}px`;
    });
  });
}