script.js

(function(){
  "use strict";

  /* ----------------------------------------------------------
     Scroll progress bar
     ---------------------------------------------------------- */
  var progressBar = document.getElementById('progressBar');
  var toTop = document.getElementById('toTop');

  function onScroll(){
    var scrollTop = window.scrollY || document.documentElement.scrollTop;
    var docHeight = document.documentElement.scrollHeight - window.innerHeight;
    var pct = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
    progressBar.style.width = pct + '%';
    toTop.classList.toggle('visible', scrollTop > 600);
  }
  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();

  toTop.addEventListener('click', function(){
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });

  /* ----------------------------------------------------------
     Mobile nav toggle
     ---------------------------------------------------------- */
  var navToggle = document.getElementById('navToggle');
  var navLinks = document.getElementById('navLinks');
  var navToggleIcon = document.getElementById('navToggleIcon');

  function setNavOpen(open){
    navLinks.classList.toggle('open', open);
    document.body.classList.toggle('nav-open', open);
    navToggle.setAttribute('aria-expanded', open ? 'true' : 'false');
    navToggleIcon.innerHTML = '<use href="' + (open ? '#i-close' : '#i-menu') + '"/>';
  }

  navToggle.addEventListener('click', function(){
    setNavOpen(!navLinks.classList.contains('open'));
  });

  /* Close menu on outside tap (mobile) */
  document.addEventListener('click', function(e){
    if(navLinks.classList.contains('open') && !navLinks.contains(e.target) && !navToggle.contains(e.target)){
      setNavOpen(false);
    }
  });

  /* Close menu on Escape key */
  document.addEventListener('keydown', function(e){
    if(e.key === 'Escape' && navLinks.classList.contains('open')){
      setNavOpen(false);
    }
  });

  navLinks.querySelectorAll('a').forEach(function(link){
    link.addEventListener('click', function(){
      setNavOpen(false);
    });
  });

  /* ----------------------------------------------------------
     Section highlighting while scrolling
     ---------------------------------------------------------- */
  var sections = document.querySelectorAll('main section[id], header.hero');
  var navAnchors = navLinks.querySelectorAll('a');

  var sectionObserver = new IntersectionObserver(function(entries){
    entries.forEach(function(entry){
      if(entry.isIntersecting){
        var id = entry.target.getAttribute('id');
        navAnchors.forEach(function(a){
          a.classList.toggle('active', a.getAttribute('href') === '#' + id);
        });
      }
    });
  }, { rootMargin: '-45% 0px -50% 0px', threshold: 0 });

  sections.forEach(function(s){ if(s.id) sectionObserver.observe(s); });

  /* ----------------------------------------------------------
     Reveal-on-scroll animations
     ---------------------------------------------------------- */
  var revealObserver = new IntersectionObserver(function(entries){
    entries.forEach(function(entry){
      if(entry.isIntersecting){
        entry.target.classList.add('is-visible');
        revealObserver.unobserve(entry.target);
      }
    });
  }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });

  document.querySelectorAll('[data-reveal]').forEach(function(el){
    revealObserver.observe(el);
  });

  /* ----------------------------------------------------------
     Copy-code buttons
     ---------------------------------------------------------- */
  document.querySelectorAll('.copy-btn').forEach(function(btn){
    btn.addEventListener('click', function(){
      var block = btn.closest('.code-block') || btn.closest('.mistake-row');
      var codeEl = block ? block.querySelector('code') : null;
      var text = codeEl ? codeEl.textContent.trim() : '';
      if(!text) return;

      var restore = function(){
        setTimeout(function(){
          btn.classList.remove('copied');
          btn.innerHTML = '<svg aria-hidden="true"><use href="#i-copy"/></svg>Copy';
        }, 1600);
      };

      var showCopied = function(){
        btn.classList.add('copied');
        btn.innerHTML = '<svg aria-hidden="true"><use href="#i-check"/></svg>Copied';
        restore();
      };

      if(navigator.clipboard && navigator.clipboard.writeText){
        navigator.clipboard.writeText(text).then(showCopied).catch(function(){
          fallbackCopy(text);
          showCopied();
        });
      } else {
        fallbackCopy(text);
        showCopied();
      }
    });
  });

  function fallbackCopy(text){
    var ta = document.createElement('textarea');
    ta.value = text;
    ta.style.position = 'fixed';
    ta.style.opacity = '0';
    document.body.appendChild(ta);
    ta.select();
    try{ document.execCommand('copy'); }catch(e){}
    document.body.removeChild(ta);
  }

  /* ----------------------------------------------------------
     Hero floating showcase — gentle parallax tilt on pointer
     move. Purely cosmetic, disabled for reduced-motion users.
     ---------------------------------------------------------- */
  var heroStage = document.querySelector('.hero-stage');
  if(heroStage && !window.matchMedia('(prefers-reduced-motion: reduce)').matches){
    var heroTiltRaf = null;
    heroStage.addEventListener('mousemove', function(e){
      var rect = heroStage.getBoundingClientRect();
      var px = (e.clientX - rect.left) / rect.width - 0.5;
      var py = (e.clientY - rect.top) / rect.height - 0.5;
      if(heroTiltRaf) cancelAnimationFrame(heroTiltRaf);
      heroTiltRaf = requestAnimationFrame(function(){
        heroStage.style.transform = 'rotateX(' + (py * -3.2).toFixed(2) + 'deg) rotateY(' + (px * 4).toFixed(2) + 'deg)';
      });
    });
    heroStage.addEventListener('mouseleave', function(){
      if(heroTiltRaf) cancelAnimationFrame(heroTiltRaf);
      heroStage.style.transform = 'rotateX(0deg) rotateY(0deg)';
    });
  }

})();