welcome.js

// KnightSense welcome page — subtle interactive polish.
(function () {
  // Fade the card in smoothly after fonts/layout settle.
  const card = document.querySelector('.card');
  const orbA = document.querySelector('.orb-1');
  const orbB = document.querySelector('.orb-2');

  // Gentle parallax on the decorative orbs with the pointer.
  document.addEventListener('mousemove', (e) => {
    const x = (e.clientX / window.innerWidth - 0.5);
    const y = (e.clientY / window.innerHeight - 0.5);
    if (orbA) orbA.style.transform = `translate(${x * 30}px, ${y * 24}px)`;
    if (orbB) orbB.style.transform = `translate(${x * -22}px, ${y * -18}px)`;
  });

  // Typewriter effect for the tagline.
  const tagline = document.querySelector('.tagline');
  if (tagline) {
    const text = tagline.textContent;
    tagline.textContent = '';
    let i = 0;
    const step = () => {
      if (i <= text.length) {
        tagline.textContent = text.slice(0, i);
        i++;
        setTimeout(step, 34);
      }
    };
    setTimeout(step, 400);
  }

  // Tilt the logo slightly toward the cursor for depth.
  const logo = document.querySelector('.logo');
  if (logo) {
    document.addEventListener('mousemove', (e) => {
      const r = logo.getBoundingClientRect();
      const cx = r.left + r.width / 2;
      const cy = r.top + r.height / 2;
      const rx = ((e.clientY - cy) / r.height) * -12;
      const ry = ((e.clientX - cx) / r.width) * 12;
      logo.style.transform = `perspective(500px) rotateX(${rx}deg) rotateY(${ry}deg)`;
    });
  }
})();