404.html

---
layout: default
title: 404 - Page Not Found
permalink: /404.html
---

<main role="main" class="nf-wrapper" aria-labelledby="nf-heading" aria-describedby="nf-text">
  <div class="nf-card">
    <div class="nf-emoji" aria-hidden="true">🚀</div>
  <h1 id="nf-heading" class="nf-heading">404 – Page <span id="rocket-typed-anchor"></span> Not Found</h1>
    <p id="nf-text" class="nf-text">Don't click the rocket...</p>
    <div class="nf-actions">
      <a class="nf-btn primary" href="{{ site.baseurl }}/index.html">Home</a>
      <a class="nf-btn" href="{{ site.baseurl }}/blogs.html">Blog</a>
    </div>
  </div>
</main>

<script>
// Interactive rocket flight on click
(function(){
  // === Rocket Flight Config (edit values or use exposed helpers before launch) ===
  const CONFIG = {
    baseNoseAngle: 45,        // Emoji nose visual offset
    exitMode: 'nose-offset',  // 'nose-offset' | 'fixed'
    exitOffsetDeg: 270,         // Extra degrees added to facing when exitMode='nose-offset'
    fixedExitAngleDeg: -90,   // Used when exitMode='fixed' (e.g. -90 = up)
    loops: 2,                 // Full loops before exit
    durationMs: 4800,         // Orbit duration
    exitDurationMs: 1400,     // Exit travel duration
    radiusScale: 0.60,        // Orbit radius vs diagonal
    quickRadiusFraction: 0.50 // Backup radius vs min(vw,vh)
  };
  // Expose minimal helpers (badge removed)
  window.ROCKET_CONFIG = CONFIG;
  window.setRocketExitOffset = deg => { CONFIG.exitOffsetDeg = deg; console.log('exitOffsetDeg =', deg); };
  window.setRocketExitMode = mode => { CONFIG.exitMode = mode; console.log('exitMode =', mode); };

  const rocket = document.querySelector('.nf-emoji');
  if(!rocket) return;
  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)');
  let launched = false;
  let typedStarted = false;

  function startTypedInsertion(){
    if(typedStarted) return; typedStarted = true;
    const anchor = document.getElementById('rocket-typed-anchor');
    if(!anchor) return;
    const phrase = '(and also rocket)';
    const prefersReduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if(prefersReduce){
      anchor.textContent = phrase;
      return;
    }
    let index = 0;
    function typeNext(){
      if(index <= phrase.length){
        anchor.textContent = phrase.slice(0, index);
        index += 1;
        setTimeout(typeNext, 55);
      }
    }
    typeNext();
  }

  rocket.style.cursor='pointer';
  rocket.setAttribute('role','button');
  rocket.setAttribute('tabindex','0');
  rocket.setAttribute('title','Launch the rocket');

  function launchNoMotion(){
    const rect = rocket.getBoundingClientRect();
    const placeholder = document.createElement('div');
    placeholder.style.height = rect.height + 'px';
    placeholder.style.marginBottom = '1.5rem';
    placeholder.className = 'nf-emoji-space';
    rocket.parentNode.insertBefore(placeholder, rocket);
    rocket.remove();
    startTypedInsertion();
  }

  function launchFancy(){
    const rect = rocket.getBoundingClientRect();
    const placeholder = document.createElement('div');
    placeholder.style.height = rect.height + 'px';
    placeholder.style.marginBottom = '1.5rem';
    placeholder.className = 'nf-emoji-space';
    rocket.parentNode.insertBefore(placeholder, rocket);

    const wrapper = document.createElement('div');
    wrapper.style.position='fixed';
    wrapper.style.left = rect.left + 'px';
    wrapper.style.top = rect.top + 'px';
    wrapper.style.width = rect.width + 'px';
    wrapper.style.height = rect.height + 'px';
    wrapper.style.zIndex = 4000;
    wrapper.style.pointerEvents='none';
    wrapper.style.willChange='transform';
    rocket.parentNode.replaceChild(wrapper, rocket);
    wrapper.appendChild(rocket);
    rocket.style.animation='none';
    rocket.style.willChange='transform';

  // Fast large circular/spiral flight around the page
  const vw = window.innerWidth, vh = window.innerHeight;
  const centerX = vw / 2; const centerY = vh / 2;
  const diag = Math.sqrt(vw*vw + vh*vh);
  const startRect = wrapper.getBoundingClientRect();
  const startCx = startRect.left + startRect.width/2;
  const startCy = startRect.top + startRect.height/2;
  const startDistance = Math.hypot(startCx - centerX, startCy - centerY);
  // Larger target radius so path reaches near edges; clamp to avoid excessive off-screen travel
  const targetRadius = Math.min(diag * CONFIG.radiusScale, Math.max(startDistance || 1, Math.min(vw, vh) * CONFIG.quickRadiusFraction));
  const radiusDrift = Math.max(0, targetRadius - startDistance);
  let startAngle = Math.atan2(startCy - centerY, startCx - centerX);
  if(startDistance === 0){ startAngle = -Math.PI/2; }
  const loops = CONFIG.loops; // number of loops
  const extraArc = Math.PI * 0.35; // exit arc
  const totalAngle = loops * Math.PI * 2 + extraArc;
  const totalDuration = CONFIG.durationMs;
    const startTime = performance.now();
  const BASE_EMOJI_NOSE_ANGLE = CONFIG.baseNoseAngle; // emoji nose offset
    let prevX = 0, prevY = 0; let frame = 0;
    let lastVX = 0, lastVY = -1; let currentRotation = 0;

  function easeInOut(t){ return t<0.5 ? 2*t*t : 1 - Math.pow(-2*t+2,2)/2; }
  function easeOutCubic(t){ return 1 - Math.pow(1-t,3); }

    function animate(now){
      const elapsed = now - startTime;
      let p = elapsed / totalDuration; if(p>1) p = 1;
    const eased = easeInOut(p);
  const ang = startAngle + eased * totalAngle;
  // Bring radius to near target quickly (within first third of flight) for full-viewport coverage
  const radialPhase = Math.min(1, p * 3);
  const currentRadius = startDistance + radiusDrift * easeOutCubic(radialPhase);
  const orbitX = centerX + currentRadius * Math.cos(ang);
  const orbitY = centerY + currentRadius * Math.sin(ang);
  const x = orbitX - startCx;
  const y = orbitY - startCy;
      if(frame === 0){ prevX = x; prevY = y; }
      const vx = x - prevX; const vy = y - prevY;
      if(vx*vx + vy*vy > 0.0001){ lastVX = vx; lastVY = vy; }
      prevX = x; prevY = y; frame++;
      wrapper.style.transform = `translate(${x}px, ${y}px)`;
      // orient rocket along motion
      const motionAngle = Math.atan2(lastVY, lastVX) * 180/Math.PI;
      currentRotation = motionAngle - BASE_EMOJI_NOSE_ANGLE;
      rocket.style.transform = `rotate(${currentRotation}deg)`;

      if(p < 1){
        requestAnimationFrame(animate);
      } else {
  // Exit: continue along current facing (tangent) direction
  // Determine nose direction (rocket rotated by currentRotation, nose offset BASE_EMOJI_NOSE_ANGLE)
  // Exit direction calculation (configurable)
  let chosenAngleDeg;
  if(CONFIG.exitMode === 'fixed'){
    chosenAngleDeg = CONFIG.fixedExitAngleDeg;
  } else {
    chosenAngleDeg = currentRotation + BASE_EMOJI_NOSE_ANGLE + CONFIG.exitOffsetDeg;
  }
  const noseTheta = chosenAngleDeg * Math.PI / 180;
  let dirX = Math.cos(noseTheta);
  let dirY = Math.sin(noseTheta);
  // Normalize (should already be unit length)
  const mag = Math.hypot(dirX, dirY) || 1; dirX/=mag; dirY/=mag;
  // Project far off-screen along nose heading
  const exitDist = Math.max(diag, vh, vw) * 1.35;
  const exitX = x + dirX * exitDist;
  const exitY = y + dirY * exitDist;
  wrapper.style.transition = `transform ${CONFIG.exitDurationMs}ms cubic-bezier(.65,.05,.36,1), opacity ${CONFIG.exitDurationMs}ms ease`;
  rocket.style.transition = `transform ${CONFIG.exitDurationMs}ms cubic-bezier(.65,.05,.36,1)`;
  wrapper.style.transform = `translate(${exitX}px, ${exitY}px)`;
  // Keep current orientation (already aligned with motion) and add slight scale
  rocket.style.transform = `rotate(${currentRotation}deg) scale(1.15)`;
  wrapper.style.opacity = '0';
  setTimeout(()=>{ wrapper.remove(); startTypedInsertion(); }, CONFIG.exitDurationMs);
      }
    }
    requestAnimationFrame(animate);
  }

  function handleLaunch(){
    if(launched) return; launched = true;
    if(reduce.matches) launchNoMotion(); else launchFancy();
  }

  rocket.addEventListener('click', handleLaunch);
  rocket.addEventListener('keydown', e => { if(e.key==='Enter' || e.key===' ') { e.preventDefault(); handleLaunch(); } });
})();
</script>