<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Roamvio</title>
<meta name="robots" content="noindex, nofollow">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@200;300;400;800&display=swap" rel="stylesheet">
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --brand:       #E8521A;
    --brand-light: #FF6B35;
    --navy:        #1A2B4A;
    --bg:          #0C1220;
  }

  html, body {
    width: 100%; height: 100%;
    background: var(--bg);
    font-family: 'Sora', sans-serif;
    overflow: hidden;
  }

  /* ΓöÇΓöÇ Canvas ΓöÇΓöÇ */
  #cvs {
    position: fixed;
    inset: 0;
    pointer-events: none;
  }

  /* ΓöÇΓöÇ Custom compass cursor ΓöÇΓöÇ */
  body { cursor: none; }

  #cursor {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    left: -100px; top: -100px;
    width: 38px; height: 38px;
    transform: translate(-50%, -50%);
    will-change: left, top;
  }

  #cursor svg {
    width: 100%; height: 100%;
    filter: drop-shadow(0 0 5px rgba(232,82,26,0.55));
    transform-origin: center center;
    transition: transform 0.14s ease;
  }

  .cursor-ring {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px solid rgba(232,82,26,0.22);
    animation: cursorRing 2.2s ease-in-out infinite;
    pointer-events: none;
  }

  @keyframes cursorRing {
    0%, 100% { transform: scale(1);   opacity: 0.7; }
    50%       { transform: scale(1.7); opacity: 0;   }
  }

  /* ΓöÇΓöÇ Radial glow behind logo ΓöÇΓöÇ */
  .glow {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -52%);
    width: 560px; height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,82,26,0.18) 0%, transparent 70%);
    pointer-events: none;
    animation: pulse 4s ease-in-out infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -52%) scale(1);   }
    50%       { opacity: 1;   transform: translate(-50%, -52%) scale(1.08); }
  }

  /* ΓöÇΓöÇ Center stage ΓöÇΓöÇ */
  .stage {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: 0;
    user-select: none;
  }

  /* ΓöÇΓöÇ logomark ΓöÇΓöÇ */
  .mark {
    width: 88px;
    height: 88px;
    animation: float 6s ease-in-out infinite;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0);    }
    50%       { transform: translateY(-8px); }
  }

  /* ΓöÇΓöÇ wordmark ΓöÇΓöÇ */
  .wordmark {
    margin-top: 28px;
    display: flex;
    align-items: baseline;
    gap: 0;
    letter-spacing: -0.02em;
  }

  .wordmark .roam {
    font-size: clamp(42px, 8vw, 72px);
    font-weight: 800;
    color: #F0F6FC;
    line-height: 1;
  }

  .wordmark .vio {
    font-size: clamp(42px, 8vw, 72px);
    font-weight: 200;
    color: var(--brand-light);
    line-height: 1;
  }

  /* ΓöÇΓöÇ tagline ΓöÇΓöÇ */
  .tagline {
    margin-top: 36px;
    font-size: clamp(11px, 1.6vw, 13px);
    font-weight: 300;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.28);
    animation: fadeIn 2.4s ease forwards;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ΓöÇΓöÇ divider dot ΓöÇΓöÇ */
  .dot-row {
    margin-top: 48px;
    display: flex;
    gap: 7px;
    align-items: center;
    animation: fadeIn 3s ease forwards;
  }

  .dot-row span {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--brand);
    opacity: 0.5;
  }

  .dot-row span:nth-child(2) { width: 6px; height: 6px; opacity: 0.9; }
</style>
</head>
<body>

<canvas id="cvs"></canvas>
<div class="glow"></div>

<!-- Compass cursor -->
<div id="cursor">
  <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
    <!-- outer ring -->
    <circle cx="16" cy="16" r="13" stroke="rgba(232,82,26,0.75)" stroke-width="1.2"/>
    <!-- N needle (brand) -->
    <path d="M16 4 L17.8 13 L16 11 L14.2 13 Z" fill="#E8521A"/>
    <!-- S needle (dim) -->
    <path d="M16 28 L17.8 19 L16 21 L14.2 19 Z" fill="rgba(255,255,255,0.18)"/>
    <!-- E tick -->
    <line x1="29" y1="16" x2="26" y2="16" stroke="rgba(255,255,255,0.22)" stroke-width="1"/>
    <!-- W tick -->
    <line x1="3"  y1="16" x2="6"  y2="16" stroke="rgba(255,255,255,0.22)" stroke-width="1"/>
    <!-- centre dot -->
    <circle cx="16" cy="16" r="2" fill="#E8521A"/>
  </svg>
  <div class="cursor-ring"></div>
</div>

<div class="stage">

  <!-- logomark SVG ΓÇö the route waypoint icon -->
  <svg class="mark" viewBox="0 0 56 68" fill="none" xmlns="http://www.w3.org/2000/svg">
    <!-- start dot -->
    <circle cx="10" cy="56" r="7" fill="#E8521A"/>
    <circle cx="10" cy="56" r="3" fill="#0C1220"/>
    <!-- path leg 1 -->
    <path d="M10 49 Q10 22 26 14" stroke="#E8521A" stroke-width="3" stroke-linecap="round" fill="none"/>
    <!-- mid waypoint -->
    <circle cx="26" cy="14" r="6" fill="#E8521A"/>
    <circle cx="26" cy="14" r="2.5" fill="#0C1220"/>
    <!-- path leg 2 -->
    <path d="M26 14 Q44 8 44 26" stroke="#E8521A" stroke-width="3" stroke-linecap="round" fill="none"/>
    <!-- destination pin -->
    <circle cx="44" cy="26" r="8" fill="#E8521A"/>
    <!-- arrow chevron inside destination -->
    <path d="M41 23 L44 26 L47 23" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
    <!-- subtle glow ring -->
    <circle cx="44" cy="26" r="13" stroke="#E8521A" stroke-width="1" stroke-dasharray="3 4" opacity="0.35"/>
  </svg>

  <!-- wordmark -->
  <div class="wordmark">
    <span class="roam">roam</span><span class="vio">vio</span>
  </div>

  <!-- cryptic tagline -->
  <div class="tagline">something exciting is coming</div>

  <!-- decorative dots -->
  <div class="dot-row">
    <span></span><span></span><span></span>
  </div>

</div>

<script>
(function () {
  // ΓöÇΓöÇ canvas & state ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
  const cvs = document.getElementById('cvs');
  const ctx = cvs.getContext('2d');
  let W, H, time = 0;
  let particles = [], cities = [], ROUTES = [];
  let trail = [];
  const cursorEl = document.getElementById('cursor');
  const cursorSvg = cursorEl.querySelector('svg');
  let lastMx = 0, lastMy = 0;

  // route animation state
  const RS = { idx: 0, t: 0, phase: 'draw', flyT: 0, pauseT: 0, fadeAlpha: 1 };
  const DRAW_SPD  = 1 / 115; // progress per frame while drawing
  const FLY_SPD   = 1 / 170; // progress per frame while flying
  const PAUSE_DUR = 55;       // frames to pause at destination
  const FADE_SPD  = 0.038;    // alpha decrease per frame

  // ΓöÇΓöÇ resize ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
  function resize() {
    W = cvs.width  = window.innerWidth;
    H = cvs.height = window.innerHeight;
    initCities();
    initParticles();
  }

  // ΓöÇΓöÇ city nodes (major travel hubs) ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
  function initCities() {
    cities = [
      { code: 'DEL', x: 0.42*W, y: 0.295*H, ph: 0.0  },  // Delhi (North)
      { code: 'BOM', x: 0.36*W, y: 0.540*H, ph: 0.72 },  // Mumbai (West)
      { code: 'BLR', x: 0.42*W, y: 0.680*H, ph: 1.4  },  // Bengaluru (South)
      { code: 'MAA', x: 0.48*W, y: 0.710*H, ph: 2.1  },  // Chennai (South-East)
      { code: 'CCU', x: 0.62*W, y: 0.360*H, ph: 2.8  },  // Kolkata (East)
      { code: 'HYD', x: 0.44*W, y: 0.625*H, ph: 3.5  },  // Hyderabad (Centre-South)
      { code: 'JAI', x: 0.38*W, y: 0.340*H, ph: 4.2  },  // Jaipur (Rajasthan)
      { code: 'AMD', x: 0.32*W, y: 0.435*H, ph: 4.9  },  // Ahmedabad (Gujarat)
      { code: 'GOI', x: 0.34*W, y: 0.630*H, ph: 5.6  },  // Goa (West-Coast)
      { code: 'LKO', x: 0.53*W, y: 0.295*H, ph: 6.3  },  // Lucknow (UP)
    ];
    ROUTES = [
      [0, 6],  // DEL ΓåÆ JAI
      [6, 7],  // JAI ΓåÆ AMD
      [7, 1],  // AMD ΓåÆ BOM
      [1, 8],  // BOM ΓåÆ GOI
      [8, 2],  // GOI ΓåÆ BLR
      [2, 3],  // BLR ΓåÆ MAA
      [3, 5],  // MAA ΓåÆ HYD
      [5, 1],  // HYD ΓåÆ BOM
      [0, 4],  // DEL ΓåÆ CCU
      [4, 9],  // CCU ΓåÆ LKO
    ];
  }

  // ΓöÇΓöÇ particles ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
  function initParticles() {
    particles = Array.from({ length: 48 }, () => ({
      x:  Math.random() * W,
      y:  Math.random() * H,
      r:  Math.random() * 1.3 + 0.3,
      vx: (Math.random() - 0.5) * 0.22,
      vy: (Math.random() - 0.5) * 0.22,
      a:  Math.random() * Math.PI * 2
    }));
  }

  // ΓöÇΓöÇ bezier helpers ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
  function bPt(t, x0, y0, cx, cy, x1, y1) {
    const m = 1 - t;
    return { x: m*m*x0 + 2*m*t*cx + t*t*x1, y: m*m*y0 + 2*m*t*cy + t*t*y1 };
  }
  function bTan(t, x0, y0, cx, cy, x1, y1) {
    const m = 1 - t;
    return { dx: 2*m*(cx-x0) + 2*t*(x1-cx), dy: 2*m*(cy-y0) + 2*t*(y1-cy) };
  }
  function ctrlPt(c1, c2) {
    const dx = c2.x - c1.x, dy = c2.y - c1.y;
    return { x: (c1.x+c2.x)/2, y: (c1.y+c2.y)/2 - Math.hypot(dx,dy)*0.24 };
  }

  // ΓöÇΓöÇ draw: globe map grid ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
  function drawGrid() {
    ctx.save();
    ctx.strokeStyle = 'rgba(100,158,230,0.042)';
    ctx.lineWidth = 0.7;
    const latN = 9;
    for (let i = 1; i < latN; i++) {
      const y = (i / latN) * H;
      const amp = 20 * Math.sin(Math.PI * i / latN);
      ctx.beginPath();
      ctx.moveTo(0, y);
      ctx.quadraticCurveTo(W / 2, y - amp, W, y);
      ctx.stroke();
    }
    const lonN = 13;
    for (let i = 1; i < lonN; i++) {
      const x = (i / lonN) * W;
      const amp = 14 * Math.sin(Math.PI * i / lonN);
      ctx.beginPath();
      ctx.moveTo(x, 0);
      ctx.quadraticCurveTo(x + amp, H / 2, x, H);
      ctx.stroke();
    }
    ctx.restore();
  }

  // ΓöÇΓöÇ draw: city dots ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
  function drawCities() {
    ctx.save();
    ctx.font = '7px Sora, sans-serif';
    ctx.textAlign = 'center';
    cities.forEach(c => {
      const pulse = 4 + 3.5 * Math.sin(time * 0.018 + c.ph);
      // pulse ring
      ctx.beginPath();
      ctx.arc(c.x, c.y, pulse, 0, Math.PI * 2);
      ctx.strokeStyle = 'rgba(232,82,26,0.11)';
      ctx.lineWidth = 0.8;
      ctx.stroke();
      // dot
      ctx.beginPath();
      ctx.arc(c.x, c.y, 2.3, 0, Math.PI * 2);
      ctx.fillStyle = 'rgba(232,82,26,0.65)';
      ctx.fill();
      // label
      ctx.fillStyle = 'rgba(255,255,255,0.14)';
      ctx.fillText(c.code, c.x, c.y - 9);
    });
    ctx.restore();
  }

  // ΓöÇΓöÇ draw: active animated route ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
  function stepRoute() {
    if (RS.phase === 'draw') {
      RS.t += DRAW_SPD;
      if (RS.t >= 1) { RS.t = 1; RS.phase = 'fly'; RS.flyT = 0; }
    } else if (RS.phase === 'fly') {
      RS.flyT += FLY_SPD;
      if (RS.flyT >= 1) { RS.flyT = 1; RS.phase = 'pause'; RS.pauseT = 0; }
    } else if (RS.phase === 'pause') {
      if (++RS.pauseT >= PAUSE_DUR) { RS.phase = 'fade'; RS.fadeAlpha = 1; }
    } else if (RS.phase === 'fade') {
      RS.fadeAlpha -= FADE_SPD;
      if (RS.fadeAlpha <= 0) {
        RS.fadeAlpha = 0;
        RS.idx = (RS.idx + 1) % ROUTES.length;
        RS.t = 0; RS.phase = 'draw';
      }
    }
  }

  function drawRoute() {
    const [ai, bi] = ROUTES[RS.idx];
    const c1 = cities[ai], c2 = cities[bi];
    if (!c1 || !c2) return;
    const cp = ctrlPt(c1, c2);
    const alpha = RS.phase === 'fade' ? RS.fadeAlpha : 1;
    const progress = RS.phase === 'draw' ? RS.t : 1;
    const steps = 64;
    const drawSteps = Math.floor(steps * progress);

    ctx.save();
    // dashed route line
    ctx.strokeStyle = `rgba(232,82,26,${0.42 * alpha})`;
    ctx.lineWidth = 1.3;
    ctx.setLineDash([5, 7]);
    ctx.beginPath();
    for (let i = 0; i <= drawSteps; i++) {
      const pt = bPt(i / steps, c1.x, c1.y, cp.x, cp.y, c2.x, c2.y);
      i === 0 ? ctx.moveTo(pt.x, pt.y) : ctx.lineTo(pt.x, pt.y);
    }
    ctx.stroke();
    ctx.setLineDash([]);

    // glow line
    ctx.strokeStyle = `rgba(255,107,53,${0.12 * alpha})`;
    ctx.lineWidth = 5;
    ctx.beginPath();
    for (let i = 0; i <= drawSteps; i++) {
      const pt = bPt(i / steps, c1.x, c1.y, cp.x, cp.y, c2.x, c2.y);
      i === 0 ? ctx.moveTo(pt.x, pt.y) : ctx.lineTo(pt.x, pt.y);
    }
    ctx.stroke();

    // airplane
    const flyT = (RS.phase === 'fly') ? RS.flyT
               : (RS.phase === 'pause' || RS.phase === 'fade') ? 1 : progress;
    const pp = bPt(flyT, c1.x, c1.y, cp.x, cp.y, c2.x, c2.y);
    const tg = bTan(flyT, c1.x, c1.y, cp.x, cp.y, c2.x, c2.y);
    drawPlane(pp.x, pp.y, Math.atan2(tg.dy, tg.dx), alpha);
    ctx.restore();
  }

  function drawPlane(x, y, angle, alpha) {
    ctx.save();
    ctx.translate(x, y);
    ctx.rotate(angle);
    ctx.globalAlpha = alpha;
    // engine glow
    const grd = ctx.createRadialGradient(0, 0, 0, 0, 0, 14);
    grd.addColorStop(0, 'rgba(232,82,26,0.35)');
    grd.addColorStop(1, 'transparent');
    ctx.fillStyle = grd;
    ctx.beginPath(); ctx.arc(0, 0, 14, 0, Math.PI*2); ctx.fill();
    // body
    ctx.fillStyle = '#FF6B35';
    ctx.beginPath();
    ctx.moveTo(9, 0); ctx.lineTo(-3, -2.5); ctx.lineTo(-2, 0); ctx.lineTo(-3, 2.5);
    ctx.closePath(); ctx.fill();
    // wings
    ctx.fillStyle = 'rgba(232,82,26,0.75)';
    ctx.beginPath();
    ctx.moveTo(1, 0); ctx.lineTo(-2, -8); ctx.lineTo(-4, -2.5);
    ctx.lineTo(-3, 0); ctx.lineTo(-4, 2.5); ctx.lineTo(-2, 8);
    ctx.closePath(); ctx.fill();
    ctx.restore();
  }

  // ΓöÇΓöÇ draw: particles ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
  function drawParticles() {
    particles.forEach(p => {
      p.x += p.vx; p.y += p.vy;
      if (p.x < 0) p.x = W; if (p.x > W) p.x = 0;
      if (p.y < 0) p.y = H; if (p.y > H) p.y = 0;
      ctx.beginPath();
      ctx.arc(p.x, p.y, p.r, 0, Math.PI*2);
      ctx.fillStyle = `rgba(232,82,26,${0.18 + 0.22 * Math.sin(p.a += 0.014)})`;
      ctx.fill();
    });
  }

  // ΓöÇΓöÇ draw: cursor trail ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
  function drawTrail() {
    for (let i = trail.length - 1; i >= 0; i--) {
      const pt = trail[i];
      pt.a *= 0.80;
      if (pt.a < 0.018) { trail.splice(i, 1); continue; }
      ctx.beginPath();
      ctx.arc(pt.x, pt.y, pt.r * pt.a, 0, Math.PI*2);
      ctx.fillStyle = `rgba(232,82,26,${pt.a * 0.6})`;
      ctx.fill();
    }
  }

  // ΓöÇΓöÇ main loop ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
  function loop() {
    time++;
    ctx.clearRect(0, 0, W, H);
    drawGrid();
    drawCities();
    if (cities.length) { stepRoute(); drawRoute(); }
    drawParticles();
    drawTrail();
    requestAnimationFrame(loop);
  }

  // ΓöÇΓöÇ cursor ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
  document.addEventListener('mousemove', e => {
    const mx = e.clientX, my = e.clientY;
    cursorEl.style.left = mx + 'px';
    cursorEl.style.top  = my + 'px';
    const dx = mx - lastMx, dy = my - lastMy;
    if (Math.abs(dx) + Math.abs(dy) > 1.5) {
      // rotate N needle toward movement direction
      const deg = Math.atan2(dy, dx) * (180 / Math.PI) + 90;
      cursorSvg.style.transform = `rotate(${deg}deg)`;
      lastMx = mx; lastMy = my;
    }
    trail.push({ x: mx, y: my, a: 1, r: 4 });
    if (trail.length > 28) trail.shift();
  });

  // hide cursor when leaving window
  document.addEventListener('mouseleave', () => { cursorEl.style.left = '-100px'; });

  window.addEventListener('resize', resize);
  resize();
  loop();
}());
</script>
</body>
</html>