We toured Karachi's Red Line to bring you this update

function placeOverLabels(over, W, H, navRes, dOver, elSize) {
// Pick a side for each opening label that keeps it off the red line, the stops, the text box and other labels.
const pts = [];
for (let d = 0; d [S.x * over.s + over.tx, S.y * over.s + over.ty]);
const box = { x: intro.offsetLeft, y: intro.offsetTop, w: intro.offsetWidth, h: intro.offsetHeight };
const lh = elSize * 1.62, g = dOver / 2 + 7, taken = [];
const rectOf = (o, side) => {
const [x, y] = stops[o.i];
if (side === ‘right’) return [x + g, y – lh / 2, x + g + o.w, y + lh / 2];
if (side === ‘left’) return [x – g – o.w, y – lh / 2, x – g, y + lh / 2];
if (side === ‘above’) return [x – o.w / 2, y – g – lh, x + o.w / 2, y – g];
return [x – o.w / 2, y + g, x + o.w / 2, y + g + lh];
};
const order = […overLabels].sort((a, b) => (b.end – a.end));
for (const o of order) {
const prefs = o.i === N – 1 ? [‘left’, ‘below’, ‘above’, ‘right’] : o.i === 0 ? [‘right’, ‘left’, ‘below’, ‘above’] : [‘right’, ‘left’, ‘above’, ‘below’];
let best = null;
prefs.forEach((side, k) => {
const r = rectOf(o, side);
let cost = k * .5;
if (r[0] W – 4 || r[1] H – navRes) cost += 100;
if (introAlpha > 0 && r[0] box.x – 6 && r[1] box.y – 6) cost += 60;
for (const p of pts) if (p[0] > r[0] – 3 && p[0] r[1] – 3 && p[1] { if (j !== o.i && p[0] > r[0] – 6 && p[0] r[1] – 6 && p[1] < r[3] + 6) cost += 25; });
for (const t of taken) if (r[0] t[0] – 4 && r[1] t[1] – 4) cost += 80;
if (!best || cost = 1.2;
const navRes = nav.offsetHeight + 24;
const cover = Math.max(W / MAP.w, H / MAP.h);
const sF = wide ? Math.max(2 * W / MAP.w, 1.5 * cover) : Math.max(.8, 1.45 * cover);
const dFocus = wide ? clamp(W / MAP.w * 24, 12, 17) : 12;
const dOver = wide ? clamp(W / MAP.w * 20, 8, 13) : clamp(W / MAP.w * 44, 6, 10);
const flSize = (wide ? clamp(W / MAP.w * 44, 18, 30) : 18) * .75; // stop name when a stop is in focus
const elSize = wide ? clamp(W / MAP.w * 27, 12, 18) : clamp(W / MAP.w * 80, 11, 14);
const AR = arrangements(W, H, navRes, wide);

// Opening view: the whole map where the screen allows it, always the whole route.
measure.font = ‘700 ‘ + elSize + ‘px Raleway, “Avenir Next”, “Segoe UI”, sans-serif’;
overLabels.forEach((o) => { o.w = measure.measureText(STATIONS[o.i].name).width + elSize + 4; });
const numaishW = (overLabels.find((o) => o.i === N – 1) || { w: 80 }).w;
let over = null, panel = false;
if (wide) {
intro.className = ‘intro intro–panel’; intro.style.top = ”;
const padL = numaishW + 34, padR = 44, padT = 40, padB = navRes + 20;
const s = Math.min(cover, (W – padL – padR) / (BB.x1 – BB.x0), (H – padT – padB) / (BB.y1 – BB.y0));
let tx = (padL + W – padR) / 2 – (BB.x0 + BB.x1) / 2 * s, ty = (padT + H – padB) / 2 – (BB.y0 + BB.y1) / 2 * s;
tx = MAP.w * s >= W ? clamp(tx, W – MAP.w * s, 0) : (W – MAP.w * s) / 2;
ty = MAP.h * s >= H ? clamp(ty, H – MAP.h * s, 0) : (H – MAP.h * s) / 2;
over = { s, tx, ty };
const r = { x: intro.offsetLeft, y: intro.offsetTop, w: intro.offsetWidth, h: intro.offsetHeight };
const m = dOver + 12;
const clear = (o) => !ALL.some((p) => { const x = p[0] * o.s + o.tx, y = p[1] * o.s + o.ty; return x > r.x – m && x r.y – m && y < r.y + r.h + m; });
panel = clear(over) && r.y + r.h < H – navRes;
if (!panel && r.y + r.h = W ? clamp(tx2, W – MAP.w * s2, 0) : (W – MAP.w * s2) / 2;
ty2 = MAP.h * s2 >= H ? clamp(ty2, H – MAP.h * s2, 0) : (H – MAP.h * s2) / 2;
const o2 = { s: s2, tx: tx2, ty: ty2 };
if (s2 > s * .4) { over = o2; panel = true; } // wide screens always keep the side panel
}
}
const phone = !wide;
if (phone) loadPhoneMap();
if (!panel && phone) {
// Phones: the portrait phone map fills the screen; the route sits between the text and the stop bar.
intro.className = ‘intro intro–stack on-map’;
intro.style.top = ‘0px’;
const P = PHONE_MAP, px = P.x, py = P.y, pw = P.w * P.scale, ph = P.h * P.scale;
const ih = intro.offsetHeight;
const s = Math.max(W / pw, H / ph);
let tx = W / 2 – (BB.x0 + BB.x1) / 2 * s;
tx = clamp(tx, W – (px + pw) * s, -px * s);
let ty = (ih + 8 + H – navRes – 14) / 2 – (BB.y0 + BB.y1) / 2 * s;
ty = clamp(ty, H – (py + ph) * s, -py * s);
over = { s, tx, ty };
} else if (!panel) {
intro.className = ‘intro intro–stack’;
intro.style.top = ‘0px’;
const ih = intro.offsetHeight, gap = 18, room = H – navRes – 6;
const s = Math.min(W / MAP.w, Math.max(120, room – ih – gap) / MAP.h);
const off = Math.max(0, (room – ih – gap – MAP.h * s) * .4); // text and map sit together as one block
intro.style.top = off + ‘px’;
over = { s, tx: (W – MAP.w * s) / 2, ty: off + ih + gap };
}
const overSlack = slackOf(over, W, H);
outro.className = intro.className; outro.style.top = intro.style.top; // closing box sits where the opening box sits
placeOverLabels(over, W, H, navRes, dOver, elSize);

pr = Math.min(window.devicePixelRatio || 1, 3);
const pxCap = GL ? 6e6 : 9e6;
if (W * H * pr * pr > pxCap) pr = Math.sqrt(pxCap / (W * H)); // stay well inside phone canvas limits
const cw = Math.round(W * pr), chh = Math.round(H * pr);
if (canvas.width !== cw || canvas.height !== chh) { canvas.width = cw; canvas.height = chh; }
mapDirty = true;

L = { W, H, wide, phone, navRes, cover, sF, dFocus, dOver, flSize, elSize, st: [], over, overSlack,
strokeOver: wide ? clamp(W / MAP.w * 5.2, 2.4, 4) : 2.2, strokeFocus: wide ? clamp(W / MAP.w * 8, 4, 6) : 3.6 };
stage.style.setProperty(‘–el’, elSize + ‘px’);
L.busLen1 = wide ? clamp(W / MAP.w * 64, 30, 46) : 30; // bus length on screen when a stop is in focus
L.busLen0 = wide ? clamp(W / MAP.w * 30, 15, 22) : 13; // … and on the full map
L.chaseY = wide ? .68 : .64; // where the bus sits on screen while the camera follows it
L.overCam = flatCam(over); L.startCam = flatCam(over, STATIONS[0]); L.endCam = flatCam(over, STATIONS[N – 1]);
const PB = PHONE_MAP; // the ground the camera may show: the map (phones: the phone map)
L.bounds = phone ? { x0: PB.x + 2, y0: PB.y + 2, x1: PB.x + PB.w * PB.scale – 2, y1: PB.y + PB.h * PB.scale – 2 } : { x0: 2, y0: 2, x1: MAP.w – 2, y1: MAP.h – 2 };
L.busGap = L.busLen1 / sF * BUS_LENGTH * CAMERA.busGap + 4; // where the bus parks short of a stop, in map units
zoomProfile();
// Two views of each stop: the chase view (scrolling; the bus parked short of the circle, the sign on it)
// and the flat view the stop bar flies to (as before the 3D map).
sizeSigns();
measure.font = ‘800 ‘ + flSize + ‘px Raleway, “Avenir Next”, “Segoe UI”, sans-serif’;
L.st = STATIONS.map((S, i) => {
const pick = FRAME_LAYOUT[S.id] || [‘split-left’, ‘pair-right’, ‘below’, ‘split-right-low’][i % 4];
const flat = solveFlat(S, AR, sF, W, H, measure.measureText(S.name).width + flSize + 4, flSize * 1.7, dFocus * .9 + 3, navRes, wide ? pick : PHONE_LAYOUT[pick], i, wide);
const st = { cam: chaseCam(STOP_AT[i] – L.busGap), flat, side: flat.side, pick: wide ? pick : PHONE_LAYOUT[pick] };
st.sign = signPlace(i, st.cam);
return st;
});
L.st.forEach((st, i) => { st.chase = solveChase(STATIONS[i], AR, i, st.pick); });
measurePuck();
snapBus = true;

// Scroll length. Height only follows big changes, so a phone’s collapsing address bar does not shift the page.
if (W !== lastW || Math.abs(H – lastH) > 140 || !lastH) {
lastW = W; lastH = H;
stepH = Math.max(480, Math.round(H * .9));
story.style.height = Math.round(H + (N + 1.3) * stepH) + ‘px’; // opening, 12 stops, closing view
[…stepsEl.children].forEach((el, i) => { el.style.top = (i + 1) * stepH + ‘px’; el.style.height = stepH + ‘px’; });
storyTop = story.getBoundingClientRect().top + window.scrollY;
if (keepP !== null && keepP > 0 && !jump) window.scrollTo(0, storyTop + keepP * stepH);
} else {
storyTop = story.getBoundingClientRect().top + window.scrollY;
}
if (boxStation >= 0) placeBoxes(boxStation);
snap = true;
}

/* ———- cameras ———- */
const progress = () => clamp((window.scrollY – storyTop) / stepH, 0, N + 1);
const wrapA = (a) => Math.atan2(Math.sin(a), Math.cos(a));
const smooth = (a, b, x) => { const u = clamp((x – a) / (b – a), 0, 1); return u * u * (3 – 2 * u); };
function mixCam(A, B, t) { // in-between camera: positions glide, distance zooms evenly, the turn takes the short way
return { x: lerp(A.x, B.x, t), y: lerp(A.y, B.y, t), D: A.D * Math.pow(B.D / A.D, t), pitch: lerp(A.pitch, B.pitch, t),
yaw: A.yaw + wrapA(B.yaw – A.yaw) * t, ox: lerp(A.ox, B.ox, t), oy: lerp(A.oy, B.oy, t) };
}
function flatCam(o, S) { // the flat full map as a camera, looking at stop S (or the screen centre)
const x = S ? S.x : (L.W / 2 – o.tx) / o.s, y = S ? S.y : (L.H / 2 – o.ty) / o.s;
return { x, y, D: FOCAL / o.s, pitch: 0, yaw: NORTH, ox: x * o.s + o.tx, oy: y * o.s + o.ty };
}
function roadYaw(d) { // the road’s direction around d, averaged so small kinks don’t jolt the camera
const a = pointAt(clamp(d – 35, 0, TOTAL)), b = pointAt(clamp(d + 55, 0, TOTAL));
return Math.atan2(b[1] – a[1], b[0] – a[0]);
}
function chaseCam(d) { // behind the bus, looking down the road, as far back as the map allows
const p = pointAt(d);
const z = chaseAt(d);
return fitView({ x: p[0], y: p[1], D: z.D, pitch: FLAT ? 0 : z.pitch, yaw: roadYaw(d), ox: L.W / 2, oy: L.H * L.chaseY });
}
// The flat stop view used by the stop bar, and the flat flight to it (both as before the 3D map).
const navCam = (k) => (k >= 1 && k (k >= 1 && k ({ x: (L.W / 2 – c.tx) / c.s, y: (L.H / 2 – c.ty) / c.s, D: FOCAL / c.s, pitch: 0, yaw: NORTH, ox: L.W / 2, oy: L.H / 2 });
const to2 = (c) => { const s = FOCAL / c.D; return { s, tx: c.ox – c.x * s, ty: c.oy – c.y * s }; };
function fly2D(A, B, e, k) { // direct flight used when a stop is picked from the bar
const { W, H } = L;
const c0 = k > 0 && k L.over.s * 1.25;
const dip = zoomed ? clamp(Math.hypot(mB[0] – mA[0], mB[1] – mA[1]) * Math.min(A.s, B.s) / Math.max(W, H) * .2, 0, .42) : 0;
let s = A.s * Math.pow(B.s / A.s, e) * (1 – dip * Math.sin(Math.PI * e));
if (zoomed) s = Math.max(s, L.cover * 1.04);
const c = { s, tx: c0[0] – lerp(mA[0], mB[0], e) * s, ty: c0[1] – lerp(mA[1], mB[1], e) * s };
return hold(c, lerpSlack(slackOf(A, W, H), slackOf(B, W, H), e), W, H);
}
function camFromP(p, d) {
const i = Math.min(Math.floor(p), N), f = p – i;
if (i === 0) { // flat map -> swoop down behind the bus at the first stop
const e = ease(clamp(f / T.move1, 0, 1)), m = mixCam(L.startCam, L.st[0].cam, e);
m.pitch = lerp(0, L.st[0].cam.pitch, smooth(.25, 1, e)); // the tilt arrives late, after most of the zoom
return fitted(m, smooth(.05, .45, e));
}
if (i === N) { // last stop -> rise and turn back to the flat full map
const e = ease(clamp((f – T.move0) / (T.outMove1 – T.move0), 0, 1)), m = mixCam(L.st[N – 1].cam, L.endCam, e);
m.pitch = lerp(L.st[N – 1].cam.pitch, 0, smooth(0, .75, e));
return fitted(m, 1 – smooth(.55, .95, e));
}
return chaseCam(d); // from the first stop to the last, the camera stays behind the bus
}
const camOf = (k) => (k === 0 || k === N + 1 ? L.overCam : navMode ? navCam(k) : L.st[k – 1].cam);
function lineFromP(p) { // how much of the red line is drawn
const i = Math.floor(p);
if (i = N) return TOTAL;
return STOP_AT[i – 1] + SEGS[i – 1].len * ease(clamp((p – i – T.line0) / (T.line1 – T.line0), 0, 1));
}
const fullFromP = (p) => (p Math.min(fromFlat ? smooth(0, .35, e) : 1, toFlat ? 1 – smooth(.6, 1, e) : 1);

/* ———- navigation ———- */
let jump = null, peek = null, navMode = false, navBack = null;
function setNavMode(on) { // switching views re-places the frames for the new view
if (on === navMode) return;
navMode = on;
if (boxesOn) setBoxes(false);
boxStation = -1;
}
function goTo(k, flat = false) { // flat: picked from the stop bar or a stop on the map
if (!L) return;
peek = null; navBack = null;
setNavMode(flat);
const y1 = storyTop + k * stepH;
if (motion.matches) { jump = null; window.scrollTo(0, y1); return; }
const p = progress(), fromFlat = cam.pitch < .01 && Math.abs(wrapA(cam.yaw – NORTH)) { if ([‘ArrowUp’, ‘ArrowDown’, ‘PageUp’, ‘PageDown’, ‘Home’, ‘End’, ‘ ‘].includes(e.key)) leaveNav(); });
const cancelJump = () => { jump = null; };
addEventListener(‘wheel’, cancelJump, { passive: true });
addEventListener(‘touchstart’, (e) => { if (!e.target.closest(‘.stop,.mk,.cue,#restart,#fullmap,#soundBtn,#soundMini,#soundMini2’)) cancelJump(); }, { passive: true });
addEventListener(‘keydown’, (e) => { if ([‘ArrowUp’, ‘ArrowDown’, ‘PageUp’, ‘PageDown’, ‘Home’, ‘End’, ‘ ‘].includes(e.key)) cancelJump(); });
const cue = $(‘#cue’), cueText = cue.firstChild;
cue.addEventListener(‘click’, () => (peek && peek.phase === ‘out’ ? peekBack() : goTo(1)));

// Full-map button: zoom out to the whole route from any stop; scrolling (or pressing it again) zooms back in.
/* ———- sound: a looping background, plus a random station clip whenever the bus is at a stop ———- */
const soundBtn = $(‘#soundBtn’);
const SND = { on: false, ctx: null, master: null, bgGain: null, bgSrc: null, buffers: new Map(), voice: null, at: -1, want: -1, wantSince: 0, recent: [], engine: null, engineLevel: 0, rolling: false, brakeAt: 0 };
const audioUrl = (name) => (AUDIO.inline && AUDIO.inline[name]) || AUDIO.dir + name;
function loadBuffer(name) {
if (SND.buffers.has(name)) { const b = SND.buffers.get(name); SND.buffers.delete(name); SND.buffers.set(name, b); return b; } // most recent last
if (SND.buffers.size > 6) { // keep at most a few decoded clips in memory
for (const k of SND.buffers.keys()) { if (k !== AUDIO.background && k !== AUDIO.engine && k !== AUDIO.brakes) { SND.buffers.delete(k); break; } }
}
{
SND.buffers.set(name, fetch(audioUrl(name))
.then((r) => { if (!r.ok) throw new Error(name); return r.arrayBuffer(); })
.then((b) => new Promise((ok, no) => SND.ctx.decodeAudioData(b, ok, no)))
.catch(() => null));
}
return SND.buffers.get(name);
}
function ramp(param, value, secs) {
const t = SND.ctx.currentTime;
param.cancelScheduledValues(t);
param.setValueAtTime(param.value, t);
param.linearRampToValueAtTime(value, t + Math.max(.02, secs));
}
function soundStart() {
const AC = window.AudioContext || window.webkitAudioContext;
if (!AC) return;
if (!SND.ctx) { // made at load; the browser lets it play from the first tap or click
SND.ctx = new AC();
SND.duck = SND.ctx.createGain(); SND.duck.connect(SND.ctx.destination); // dips the whole soundscape while a video plays
SND.master = SND.ctx.createGain(); SND.master.gain.value = 0; SND.master.connect(SND.duck);
SND.bgGain = SND.ctx.createGain(); SND.bgGain.gain.value = AUDIO.backgroundVolume; SND.bgGain.connect(SND.master);
}
SND.ctx.resume().catch(() => {});
SND.on = true;
ramp(SND.master.gain, 1, .6);
if (!SND.bgSrc) {
SND.bgSrc = ‘loading’;
loadBuffer(AUDIO.background).then((buf) => {
if (!buf) { SND.bgSrc = null; return; }
const src = SND.ctx.createBufferSource();
src.buffer = buf; src.loop = true;
const d = buf.getChannelData(0), sr = buf.sampleRate; // loop between the first and last real samples,
let a = 0, z = d.length – 1; // skipping the silent padding MP3 adds at each end
while (a < Math.min(d.length, sr) && Math.abs(d[a]) d.length – sr && Math.abs(d[z]) {
if (!buf) return;
const src = SND.ctx.createBufferSource();
src.buffer = buf; src.loop = true; src.connect(SND.engine.gain); src.start();
SND.engine.src = src;
});
}
if (AUDIO.brakes) loadBuffer(AUDIO.brakes);
AUDIO.stationClips.slice().sort(() => Math.random() – .5).slice(0, 3).forEach(loadBuffer); // warm up a few
SND.want = -2; // re-evaluate the current stop straight away
}
function soundStop() {
SND.on = false;
if (!SND.ctx) return;
ramp(SND.master.gain, 0, .35);
stopVoice(SND.voice); SND.voice = null; SND.at = -1;
setTimeout(() => { if (!SND.on) SND.ctx.suspend(); }, 450);
}
function pickClip() { // random, but never one of the last few heard
const pool = AUDIO.stationClips.filter((c) => !SND.recent.includes(c));
const pick = (pool.length ? pool : AUDIO.stationClips)[Math.floor(Math.random() * (pool.length || AUDIO.stationClips.length))];
SND.recent.push(pick);
while (SND.recent.length > Math.min(3, AUDIO.stationClips.length – 1)) SND.recent.shift();
return pick;
}
function startVoice() {
const v = { gain: SND.ctx.createGain(), src: null, dead: false, timer: 0 };
v.gain.gain.value = 0; v.gain.connect(SND.master);
loadBuffer(pickClip()).then((buf) => {
if (!buf || v.dead) return;
const src = SND.ctx.createBufferSource();
src.buffer = buf; src.connect(v.gain); src.start();
v.src = src;
ramp(v.gain.gain, AUDIO.stationVolume, AUDIO.fadeIn);
// still parked when the section runs out? cross-fade into another random one
v.timer = setTimeout(() => { if (SND.voice === v) { SND.voice = startVoice(); stopVoice(v); } }, Math.max(1, buf.duration – AUDIO.fadeOut) * 1000);
});
return v;
}
function stopVoice(v) {
if (!v) return;
v.dead = true; clearTimeout(v.timer);
ramp(v.gain.gain, 0, AUDIO.fadeOut);
setTimeout(() => { try { if (v.src) v.src.stop(); } catch (e) {} v.gain.disconnect(); }, AUDIO.fadeOut * 1000 + 120);
}
function playBrakes() {
loadBuffer(AUDIO.brakes).then((buf) => {
if (!buf || !SND.on) return;
const g = SND.ctx.createGain(), src = SND.ctx.createBufferSource();
g.gain.value = AUDIO.brakesVolume; g.connect(SND.master);
src.buffer = buf; src.playbackRate.value = .94 + Math.random() * .12; // a little different each stop
src.connect(g); src.start();
src.onended = () => g.disconnect();
});
}
function soundTick(now) {
if (!SND.on) return;
if (SND.duck) { // a station video is playing: the soundscape steps back so its voice is clear
const playing = boxes.some((b) => !b.video.paused && !b.video.ended && !b.video.muted);
SND.duck.gain.setTargetAtTime(playing ? AUDIO.underVideo : 1, SND.ctx.currentTime, playing ? .15 : .6);
}
if (SND.engine) { // engine follows the bus: silent when parked, up and revving when moving
const m = BM.level, t = SND.ctx.currentTime;
SND.engine.gain.gain.setTargetAtTime(AUDIO.engineVolume * Math.min(1, m * 1.4), t, m > SND.engineLevel ? .12 : .45);
if (SND.engine.src) SND.engine.src.playbackRate.setTargetAtTime(.86 + .3 * m, t, .3);
SND.engineLevel = m;
}
// background level: lower under a station clip, lower still while the bus drives or the brakes hiss
let bg = AUDIO.backgroundVolume * (SND.at !== -1 ? AUDIO.backgroundUnderStation : 1);
bg *= lerp(1, AUDIO.backgroundWhileMoving, clamp(BM.level * 1.5, 0, 1));
if (now – (SND.brakeAt || -1e9) < 3200) bg = Math.min(bg, AUDIO.backgroundVolume * AUDIO.backgroundUnderBrakes);
SND.bgGain.gain.setTargetAtTime(bg, SND.ctx.currentTime, bg Math.abs(lineNow – x) .25) SND.rolling = true;
if (SND.rolling && BM.level 1500) { SND.rolling = false; SND.brakeAt = now; playBrakes(); }
if (BM.level = 1 && k = k – .5 && p 220) { SND.at = want; SND.voice = startVoice(); }
}
const soundMini = $(‘#soundMini’), soundMini2 = $(‘#soundMini2’), sndHint = $(‘#sndHint’);
function soundButtonState() { // both speaker buttons: on when sound is actually playing
const audible = SND.on && SND.ctx && SND.ctx.state === ‘running’, waiting = SND.on && !audible;
const tip = audible ? ‘Mute sound’ : waiting ? ‘Click for audio’ : ‘Turn sound on’;
[soundBtn, soundMini, soundMini2].forEach((b) => { b.setAttribute(‘aria-pressed’, audible ? ‘true’ : ‘false’); b.setAttribute(‘aria-label’, tip); });
soundBtn.dataset.tip = tip; soundMini.title = soundMini2.title = tip;
sndHint.classList.toggle(‘is-gone’, !waiting); // “Click for audio” fades away once sound is playing
}
function soundToggle() {
if (performance.now() – (SND.justUnlocked || -1e9) {}); // not yet audible: this click starts it
else if (SND.on) soundStop(); else soundStart();
soundButtonState();
}
soundBtn.addEventListener(‘click’, soundToggle);
soundMini.addEventListener(‘click’, soundToggle);
soundMini2.addEventListener(‘click’, soundToggle);
// Sound is always on. The page tries to play the moment it loads; where the browser holds sound back
// until the reader’s first tap, click or key press (a rule no page can override), it starts right then.
function unlockSound() {
if (!SND.on || !SND.ctx) return;
if (SND.ctx.state !== ‘running’) { SND.justUnlocked = performance.now(); SND.ctx.resume().then(soundButtonState, () => {}); }
if (SND.ctx.state === ‘running’) UNLOCK.forEach((t) => removeEventListener(t, unlockSound, true));
}
const UNLOCK = [‘pointerdown’, ‘pointerup’, ‘mousedown’, ‘keydown’, ‘touchend’, ‘click’];
UNLOCK.forEach((t) => addEventListener(t, unlockSound, true));
try { soundStart(); } catch (e) {}
if (SND.ctx) {
SND.ctx.onstatechange = soundButtonState;
soundButtonState();
}
document.addEventListener(‘visibilitychange’, () => {
if (!SND.ctx) return;
if (document.hidden) SND.ctx.suspend(); else if (SND.on) SND.ctx.resume().catch(() => {});
});

const fullBtn = $(‘#fullmap’);
function peekOut() {
if (!L || peek) return;
jump = null;
peek = { phase: ‘out’, from: { …cam }, t0: performance.now(), dur: motion.matches ? 1 : 950, y: window.scrollY, full0: fullNow };
if (boxesOn) setBoxes(false);
}
function peekBack() {
if (!peek || peek.phase === ‘in’) return;
peek = { phase: ‘in’, from: { …cam }, t0: performance.now(), dur: motion.matches ? 1 : 900, full0: fullNow, intro0: introAlpha };
}
fullBtn.addEventListener(‘click’, () => (peek && peek.phase !== ‘in’ ? peekBack() : peekOut()));
addEventListener(‘wheel’, () => peekBack(), { passive: true });
addEventListener(‘touchmove’, () => peekBack(), { passive: true });
addEventListener(‘keydown’, (e) => { if ([‘ArrowUp’, ‘ArrowDown’, ‘PageUp’, ‘PageDown’, ‘Home’, ‘End’, ‘ ‘, ‘Escape’].includes(e.key)) peekBack(); });
$(‘#restart’).addEventListener(‘click’, () => goTo(1));

/* ———- drawing ———- */
let cam = { x: 0, y: 0, D: 1000, pitch: 0, yaw: NORTH, ox: 0, oy: 0 }, snap = true, last = 0, lastY = 0, snapBus = true;
let introAlpha = 1, outroAlpha = 0, activeNow = -1, boxesOn = false, lastZ = -1, labelOn = new Array(N).fill(false);
let lineNow = 0, fullNow = 1, lineDrawn = -1, fullShown = -1;
const HIDE = ‘translate(-9999px,-9999px)’;

function draw() { // stops and names sit on the projected map points
const V = view(cam, L.W, L.H), z = zoomOf(cam);
if (Math.abs(z – lastZ) > .002) {
lastZ = z;
stage.style.setProperty(‘–mk’, lerp(L.dOver, L.dFocus, z).toFixed(2) + ‘px’);
stage.style.setProperty(‘–fl’, lerp(Math.min(14, L.flSize), L.flSize, z).toFixed(2) + ‘px’);
}
const d = lerp(L.dOver, L.dFocus, z), pts = [];
for (let i = 0; i -300 && P[0] -300 && P[1] < L.H + 300 ? P : null);
}
for (let i = 0; i {
const P = pts[o.i];
if (!P) { o.el.style.transform = HIDE; return; }
const x = P[0], y = P[1], g = d / 2 + 7;
const at = (a, b, ox, oy) => ‘translate(‘ + a.toFixed(1) + ‘px,’ + b.toFixed(1) + ‘px) translate(‘ + ox + ‘,’ + oy + ‘)’;
o.el.style.transform = o.side === ‘right’ ? at(x + g, y, ‘0’, ‘-50%’) : o.side === ‘left’ ? at(x – g, y, ‘-100%’, ‘-50%’)
: o.side === ‘above’ ? at(x, y – g, ‘-50%’, ‘-100%’) : at(x, y + g, ‘-50%’, ‘0’);
});
}

/* ———- the stop bar’s highlight: one puck that glides from stop to stop with the bus ———- */
const puck = document.createElement(‘span’);
puck.className = ‘puck’; puck.setAttribute(‘aria-hidden’, ‘true’); nav.appendChild(puck);
const PK = { x: null, v: 0, y: 0, s: { x: 1, v: 0 }, cx: [] };
function measurePuck() {
const n = nav.getBoundingClientRect();
PK.cx = dots.map((d) => { const r = d.getBoundingClientRect(); return r.left + r.width / 2 – n.left; });
const r0 = dots[0].getBoundingClientRect(); PK.y = r0.top + r0.height / 2 – n.top;
PK.x = null;
}
function updatePuck(dt, active) {
if (!PK.cx.length || !PK.cx[N – 1]) measurePuck();
let a = 0;
while (a STOP_AT[a + 1]) a++;
const s = clamp((lineNow – STOP_AT[a]) / SEGS[a].len, 0, 1), tx = lerp(PK.cx[a], PK.cx[a + 1], s);
if (PK.x === null || motion.matches) { PK.x = tx; PK.v = 0; PK.s.x = 1; PK.s.v = 0; }
// elastic: the puck rides a bouncy spring, overshoots the stop and settles; its jelly body stretches long
// with speed and then wobbles (squash, stretch, squash) as it lands
const h = Math.min(dt, .034), steps = Math.ceil(dt / h);
for (let i = 0; i = 1 && active x.toFixed(1) + ‘px ‘ + y.toFixed(1) + ‘px’;
switch (style) {
case ‘iris’: {
const near = Math.hypot(G.ox – G.cx, G.oy – G.cy);
const far = Math.max(…[[0, 0], [G.w, 0], [0, G.h], [G.w, G.h]].map(([x, y]) => Math.hypot(G.ox – x, G.oy – y))) + 40;
return { origin: at(G.ox, G.oy), dur: 720, easing: ‘cubic-bezier(.45,0,.2,1)’, frames: [
{ clipPath: ‘circle(‘ + near.toFixed(0) + ‘px at ‘ + at(G.ox, G.oy) + ‘)’, opacity: 1 },
{ clipPath: ‘circle(‘ + far.toFixed(0) + ‘px at ‘ + at(G.ox, G.oy) + ‘)’, opacity: 1 }] };
}
case ‘unfold’:
return { origin: at(G.cx, G.cy), dur: 760, easing: ‘linear’, frames: [
{ transform: ‘scale(.02,.008)’, opacity: 0, borderColor: ‘#EE0608’, easing: ‘cubic-bezier(.3,.7,.3,1)’ },
{ transform: ‘scale(1,.008)’, opacity: 1, borderColor: ‘#EE0608’, offset: .42, easing: ‘cubic-bezier(.25,1.25,.4,1)’ },
{ transform: ‘scale(1,1)’, opacity: 1, borderColor: ‘#4C4A4B’ }] };
case ‘swing’: {
const dx = G.ox – G.w / 2, dy = G.oy – G.h / 2;
const horiz = Math.abs(dx) / G.w >= Math.abs(dy) / G.h;
const origin = horiz ? (dx < 0 ? 'left center' : 'right center') : (dy < 0 ? 'center top' : 'center bottom');
const axis = horiz ? 'rotateY' : 'rotateX', sign = horiz ? (dx < 0 ? -1 : 1) : (dy < 0 ? 1 : -1);
const P = 'perspective(1200px) ';
return { origin, dur: 820, easing: 'linear', frames: [
{ transform: P + axis + '(' + 88 * sign + 'deg)', opacity: 0, easing: 'cubic-bezier(.2,.7,.3,1)' },
{ transform: P + axis + '(' + 50 * sign + 'deg)', opacity: 1, offset: .2, easing: 'cubic-bezier(.3,.6,.35,1)' },
{ transform: P + axis + '(' + -9 * sign + 'deg)', opacity: 1, offset: .68, easing: 'ease-in-out' },
{ transform: P + axis + '(0deg)', opacity: 1 }] };
}
case 'fly': {
const dx = G.ox – G.w / 2, dy = G.oy – G.h / 2, len = Math.hypot(dx, dy) || 1;
const px = -dy / len * 48, py = dx / len * 48, tilt = dx < 0 ? -10 : 10;
return { origin: 'center', dur: 780, easing: 'linear', frames: [
{ transform: 'translate(' + dx.toFixed(0) + 'px,' + dy.toFixed(0) + 'px) scale(.06) rotate(' + tilt + 'deg)', opacity: 0, easing: 'cubic-bezier(.2,.6,.3,1)' },
{ opacity: 1, offset: .12 },
{ transform: 'translate(' + (dx * .2 + px).toFixed(0) + 'px,' + (dy * .2 + py).toFixed(0) + 'px) scale(.9) rotate(' + (-tilt * .3) + 'deg)', opacity: 1, offset: .58, easing: 'cubic-bezier(.3,.5,.3,1)' },
{ transform: 'none', opacity: 1 }] };
}
case 'bloom':
return { origin: at(G.ox, G.oy), dur: 760, easing: 'cubic-bezier(.16,.9,.3,1)', frames: [
{ transform: 'scale(.3)', filter: 'blur(16px)', opacity: 0 },
{ opacity: 1, offset: .3 },
{ transform: 'none', filter: 'blur(0px)', opacity: 1 }] };
case 'elastic':
return { origin: at(G.ox, G.oy), dur: 960, easing: 'linear', frames: [
{ transform: 'scale(.04,.04)', opacity: 0, easing: 'cubic-bezier(.3,.8,.4,1)' },
{ transform: 'scale(1.14,.86)', opacity: 1, offset: .32, easing: 'ease-in-out' },
{ transform: 'scale(.93,1.07)', offset: .52, easing: 'ease-in-out' },
{ transform: 'scale(1.04,.97)', offset: .7, easing: 'ease-in-out' },
{ transform: 'scale(.99,1.01)', offset: .86, easing: 'ease-in-out' },
{ transform: 'scale(1,1)' }] };
default: // 'pop'
return { origin: at(G.ox, G.oy), dur: 620, easing: 'cubic-bezier(.3,1.45,.55,1)', frames: [
{ transform: 'scale(.04)', opacity: 0 }, { opacity: 1, offset: .15 }, { transform: 'none', opacity: 1 }] };
}
}
function showBox(box, delay) {
const el = box.el;
if (box.anim) box.anim.cancel();
if (box.empty) { el.classList.remove('is-on'); return; }
el.classList.add('is-on');
if (motion.matches || !el.animate) { if (el.animate) box.anim = el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 200 }); return; }
const style = popStyleFor(), K = popKeyframes(style, popGeometry(box));
el.style.transformOrigin = K.origin;
box.anim = el.animate(K.frames, { duration: K.dur, easing: K.easing, delay, fill: 'backwards' });
}
function hideBox(box) {
const el = box.el;
if (box.anim) box.anim.cancel();
box.video.pause();
if (!el.classList.contains('is-on')) return;
if (motion.matches || !el.animate || boxStation { if (box.anim === a) { el.classList.remove(‘is-on’); a.cancel(); box.anim = null; } };
}
function setBoxes(on) {
boxesOn = on;
boxes.forEach((b, j) => (on ? showBox(b, j ? (popStyleFor() === ‘unfold’ ? 170 : 110) : 0) : hideBox(b)));
boxes[0].wantAuto = on;
if (on) setTimeout(autoPlayMain, 650); // once the pop has played
}
// The main video starts on its own when the frames pop. Playing the second one pauses it (and the other way round).
// Browsers only allow sound to start by itself after the reader has clicked or tapped the page once; before that the
// main video starts muted and its sound comes on at the first tap.
function autoPlayMain() {
const m = boxes[0];
if (!boxesOn || !m.wantAuto || m.empty || !m.video.getAttribute(‘src’) || boxes.some((b) => !b.video.paused)) return;
if (m.video.readyState { m.video.muted = true; m.video.play().catch(() => {}); });
}
boxes[0].video.addEventListener(‘canplay’, autoPlayMain);
[‘pointerdown’, ‘touchend’, ‘keydown’].forEach((t) => addEventListener(t, () => boxes.forEach((b) => { if (b.video.muted && !b.video.paused) b.video.muted = false; }), true));

function applyUI(ui) {
lineNow = ui.line; fullNow = ui.full;
const canPeek = ui.peek || (ui.active >= 1 && ui.active <= N && !jump);
if (fullBtn.disabled === canPeek) fullBtn.disabled = !canPeek;
if ((fullBtn.getAttribute('aria-pressed') === 'true') !== ui.peek) {
fullBtn.setAttribute('aria-pressed', ui.peek ? 'true' : 'false');
const tip = ui.peek ? 'Back to ' + (STATIONS[clamp(ui.active, 1, N) – 1] || STATIONS[0]).name : 'Show the full map';
fullBtn.dataset.tip = tip; fullBtn.setAttribute('aria-label', tip);
cueText.nodeValue = ui.peek ? tip + ' ' : 'Start at Malir Halt '; // the title box's button returns to the stop
}
if (ui.active !== activeNow) {
activeNow = ui.active;
for (let i = 0; i < N; i++) {
const on = i + 1 === activeNow;
markers[i].classList.toggle('is-active', on);
dots[i].classList.toggle('is-active', on);
dots[i].classList.toggle('is-done', i + 1 = 0 && !(boxesOn && !ui.box)) { fillBoxes(ui.boxIdx); if (boxesOn && ui.box) setBoxes(true); }
if (ui.box !== boxesOn) setBoxes(ui.box);
for (let i = 0; i .004 || ui.intro === 0 || ui.intro === 1) {
introAlpha = ui.intro;
intro.style.opacity = introAlpha.toFixed(3);
intro.style.visibility = introAlpha .02 && !intro.dataset.shown) { intro.dataset.shown = ‘1’; playEntrance(intro); }
if (introAlpha .004 || ui.outro === 0 || ui.outro === 1) {
outroAlpha = ui.outro;
outro.style.opacity = outroAlpha.toFixed(3);
outro.style.visibility = outroAlpha .02 && !outro.dataset.shown) { outro.dataset.shown = ‘1’; playEntrance(outro); }
if (outroAlpha o.el.classList.toggle(‘is-on’, introAlpha > .45 || outroAlpha > .45));
}

function uiFromP(p) {
const k = Math.round(p), near = Math.abs(p – k);
return { active: p = N + .5 ? N + 1 : clamp(k, 1, N),
box: k >= 1 && k T.line1 – 1 + .03 && p – k = .45 && p navMode && Math.abs(p – (i + 1)) {
const t = h.textContent.trim();
h.setAttribute(‘aria-label’, t);
const red = (h.dataset.red || ”).split(/s+/).filter(Boolean); // words shown in the route’s red
h.innerHTML = t.split(/s+/).map((w) => {
const bare = w.replace(/[^w-]+$/, ”), tail = w.slice(bare.length);
const word = red.includes(bare) ? ‘‘ + bare + ‘‘ + tail : w;
return ” + word + ”;
}).join(‘ ‘);
});
function playEntrance(box) {
if (motion.matches || !box.animate) return;
const parts = […box.children];
[box, …parts, …box.querySelectorAll(‘.w’)].forEach((el) => el.getAnimations().forEach((a) => a.cancel()));
const out = { easing: ‘cubic-bezier(.2,.8,.2,1)’, fill: ‘backwards’ };
box.animate([{ clipPath: ‘inset(0 100% 0 0)’ }, { clipPath: ‘inset(0 0% 0 0)’ }], { duration: 560, easing: ‘cubic-bezier(.65,0,.35,1)’ });
let t = 360;
parts.forEach((el) => {
const words = el.querySelectorAll(‘.w’);
if (words.length) { // headline: word by word, rising out of a soft blur
words.forEach((w, i) => w.animate([{ opacity: 0, transform: ‘translateY(.42em)’, filter: ‘blur(5px)’ }, { opacity: 1, transform: ‘none’, filter: ‘blur(0)’ }],
{ …out, duration: 560, delay: t + i * 60 }));
t += words.length * 60 + 140;
} else {
el.animate([{ opacity: 0, transform: ‘translateY(8px)’ }, { opacity: 1, transform: ‘none’ }], { …out, duration: 460, delay: t });
t += 110;
}
});
}

/* ———- the bus: a 3D box at the tip of the red line, turning with the road. It is drawn through the same
camera as the map, so the tilted views show it from behind and above. It sits above the stop circles and
beneath the stop names, so it can pull right into each station. ———- */
const BUS = [‘busShadow’, ‘busF0’, ‘busF1’, ‘busF2’, ‘busF3’, ‘busBumper’, ‘busStripe’, ‘busWheels’, ‘busHubs’, ‘busGlass’, ‘busLamps’, ‘busTail’, ‘busRoof’, ‘busRoofGlass’, ‘busVents’, ‘busBlink’].reduce((o, id) => (o[id] = $(‘#’ + id), o), {});
let busTh = null, busKey = ”, busD = null, busDir = 1;
const BM = { t: 0, d: null, speed: 0, level: 0, phase: 0, wasMoving: false, settle: 0, tf: ”, acc: 0, th: null,
pitch: { x: 0, v: 0 }, roll: { x: 0, v: 0 }, hop: 0, puffAt: 0, puffDist: 0, endArm: false, wasFast: false, ds: null, smokeFront: false };
const puffLayer = $(‘#busPuffs’), busBody = $(‘#busBody’), busG = $(‘#bus’);
// Exhaust: a continuous stream of cartoon smoke clouds. Each puff is pinned to the map where it left the
// exhaust and rises off it, so a moving bus leaves a trail along the road; standing still it idles out a slow trickle.
const PUFFS = [], SVGNS = ‘http://www.w3.org/2000/svg’;
const PUFF_TONES = [[‘#8C9198’, ‘#C3C7CC’, ‘#DEE0E3’], [‘#7C8189’, ‘#A9AEB5’, ‘#C4C8CD’]]; // rim, body, highlight
function puff(now, at, size, life, drift, bubble) {
const g = document.createElementNS(SVGNS, ‘g’), [rim, body, hi] = PUFF_TONES[Math.random() ”;
if (bubble) g.innerHTML = c(0, 0, 1.2, rim) + c(0, 0, 1, body) + c(-.32, -.32, .3, hi);
else {
// a fresh shape every time: 3-7 lobes scattered around a randomly stretched, randomly tilted oval
const R = (lo, hi) => lo + Math.random() * (hi – lo);
const n = 3 + Math.floor(Math.random() * 5), ax = R(.5, 1.05), ay = R(.3, .7), tilt = R(-.6, .6), a0 = R(0, 6.3);
const lobes = [[R(-.15, .15), R(-.1, .1), R(.75, 1.05)]];
for (let k = 1; k < n; k++) {
const t = a0 + k / (n – 1) * 6.28 + R(-.45, .45), px = Math.cos(t) * ax, py = Math.sin(t) * ay;
lobes.push([px * Math.cos(tilt) – py * Math.sin(tilt), px * Math.sin(tilt) + py * Math.cos(tilt), R(.42, .85)]);
}
if (Math.random() q[2] – p[2]).slice(0, 1 + Math.floor(Math.random() * 2));
const creases = lobes.filter(() => Math.random() {
const t = R(-.6, 1.4), c0 = [x + Math.cos(t) * r * .55, y + Math.sin(t) * r * .55], c1 = [x + Math.cos(t + 1.1) * r * .7, y + Math.sin(t + 1.1) * r * .7];
return ‘M’ + c0[0].toFixed(2) + ‘ ‘ + c0[1].toFixed(2) + ‘Q’ + (x + Math.cos(t + .55) * r * .95).toFixed(2) + ‘ ‘ + (y + Math.sin(t + .55) * r * .95).toFixed(2) + ‘ ‘ + c1[0].toFixed(2) + ‘ ‘ + c1[1].toFixed(2);
}).join(”);
const shine = lit.map(([x, y, r]) => {
const s0 = R(3.4, 3.9), s1 = s0 + R(.8, 1.3), rr = r * R(.55, .7);
return ‘M’ + (x + Math.cos(s0) * rr).toFixed(2) + ‘ ‘ + (y + Math.sin(s0) * rr).toFixed(2) + ‘A’ + rr.toFixed(2) + ‘ ‘ + rr.toFixed(2) + ‘ 0 0 1 ‘ + (x + Math.cos(s1) * rr).toFixed(2) + ‘ ‘ + (y + Math.sin(s1) * rr).toFixed(2);
}).join(”);
g.innerHTML = ‘<g transform="scale(' + (Math.random() ‘ +
lobes.map(([x, y, r]) => c(x, y, r + .17, rim)).join(”) + lobes.map(([x, y, r]) => c(x, y, r, body)).join(”) +
(creases ? ” : ”) +
”;
}
puffLayer.appendChild(g);
PUFFS.push({ g, at, size, life, born: now, drift, spin: (Math.random() – .5) * 40 });
while (PUFFS.length > 56) PUFFS.shift().g.remove();
}
function tickPuffs(now, V, size, tail) { // tail: the exhaust; the trail never reaches further back than one bus length
const reach = size * BUS_LENGTH;
for (let i = PUFFS.length – 1; i >= 0; i–) {
const q = PUFFS[i], a = (now – q.born) / q.life;
if (a >= 1) { q.g.remove(); PUFFS.splice(i, 1); continue; }
const e = 1 – Math.pow(1 – a, 2.2);
const x = q.at[0] + q.drift[0] * e * size, y = q.at[1] + q.drift[1] * e * size, h = q.at[2] + q.drift[2] * e * size;
const far = Math.hypot(x – tail[0], y – tail[1], h – tail[2]) / reach; // 0 at the exhaust, 1 one bus length back
const P = V.lift(x, y, h);
if (far >= 1 || !P) { q.g.remove(); PUFFS.splice(i, 1); continue; }
const sc = q.size * size * (.35 + 1 * e + .06 * Math.sin(a * 9)) * V.F / P[2] * (1 – .45 * V.flat); // swells as it drifts; smaller seen up close
const op = Math.min(a .6 ? 1 – (a – .6) / .4 : 1, far > .75 ? (1 – far) / .25 : 1);
q.g.setAttribute(‘transform’, ‘translate(‘ + P[0].toFixed(1) + ‘ ‘ + P[1].toFixed(1) + ‘) rotate(‘ + (q.spin * e).toFixed(1) + ‘) scale(‘ + sc.toFixed(2) + ‘)’);
q.g.setAttribute(‘opacity’, op.toFixed(2));
}
}
function headingAt(d) { // (before Malir Halt the road simply continues straight back)
const a = pointAt(clamp(d – 12, -400, TOTAL)), b = pointAt(clamp(d + 12, -400, TOTAL));
return Math.atan2(b[1] – a[1], b[0] – a[0]);
}
// D bends the body like the reference: fx / rx shift the roof forward / sideways (fractions of the
// body height), nose raises the front and lowers the back, sq squashes or stretches the height.
const STILL = { fx: 0, rx: 0, nose: 0, sq: 0 };
const OFF = [-9999, -9999, 1];
function busGeom(V, bx, by, th, size, D = STILL) { // a box on the map (size in map units), seen through the camera
const len = size * BUS_LENGTH, wd = size * .38, ht = size * .3, f = [Math.cos(th), Math.sin(th)], r = [-f[1], f[0]];
const W3 = (u, v, h = 0) => {
const k = h * ht, up = k * (1 + D.sq) * (1 + D.nose * u);
return [bx + f[0] * u * len / 2 + r[0] * v * wd / 2 + (D.fx * f[0] + D.rx * r[0]) * k,
by + f[1] * u * len / 2 + r[1] * v * wd / 2 + (D.fx * f[1] + D.rx * r[1]) * k, up];
};
const P = (u, v, h = 0) => { const w = W3(u, v, h); return V.lift(w[0], w[1], w[2]) || OFF; };
return { len, wd, ht, f, r, P, W3 };
}
const poly = (pts) => ‘M’ + pts.map((p) => p[0].toFixed(1) + ‘ ‘ + p[1].toFixed(1)).join(‘L’) + ‘Z’;
const area = (pts) => { let s = 0; for (let i = 0; i { const w = G0.W3(u, v); return V.lift(w[0] + size * .05, w[1] + size * .07, 0) || OFF; });
BUS.busShadow.setAttribute(‘d’, poly(sh));
// the four sides: front (+u), right (+v), back (-u), left (-v); only those turned toward the camera are drawn
const faces = [[[1, -1], [1, 1], G.f], [[1, 1], [-1, 1], G.r], [[-1, 1], [-1, -1], [-G.f[0], -G.f[1]]], [[-1, -1], [1, -1], [-G.r[0], -G.r[1]]]];
let glass = ”, wheels = ”, hubs = ”, stripe = ”, bumper = ”, lamps = ”, tail = ”, backShown = false;
faces.forEach(([a, b, n], i) => {
const el = BUS[‘busF’ + i], corners = [P(…a, 0), P(…b, 0), P(…b, 1), P(…a, 1)];
if (area(corners) P(lerp(a[0], b[0], t), lerp(a[1], b[1], t), h);
const quad = (t0, t1, h0, h1) => poly([at(t0, h0), at(t1, h0), at(t1, h1), at(t0, h1)]);
if (i % 2 === 1) { // long sides: windows, a white stripe beneath them, two wheels with hubs
for (const [w0, w1] of [[.12, .27], [.71, .86]]) {
wheels += quad(w0, w1, -.08, .22);
hubs += quad(lerp(w0, w1, .36), lerp(w0, w1, .64), .02, .12);
}
stripe += quad(.02, .98, .3, .38);
const segs = 5;
for (let k = 0; k poly([P(u0, -.42, 1.06), P(u0, .42, 1.06), P(u1, .42, 1.06), P(u1, -.42, 1.06)]);
BUS.busVents.setAttribute(‘d’, vent(.45, .2) + vent(-.05, -.3) + vent(-.5, -.72)); // roof vents, as in the reference
// seen from behind, the smoke comes toward the camera, so it is drawn in front of the body
const front = backShown && V.flat > .5;
if (front !== BM.smokeFront) { BM.smokeFront = front; if (front) busG.appendChild(puffLayer); else busG.insertBefore(puffLayer, busBody); }
}
// The bus eases after the tip of the red line rather than jumping with each scroll step, so it accelerates
// and brakes like a vehicle (and the springy body has real starts and stops to react to). The camera follows it.
function stepBus(now, line, snapIt) {
const dt0 = BM.t ? Math.min(.1, (now – BM.t) / 1000) : .016;
const gapGoal = navMode || (jump && jump.flat) ? 0 : L.busGap; // short of the circle while scrolling, on it in the flat view
BM.gap = BM.gap === undefined || snapIt ? gapGoal : BM.gap + (gapGoal – BM.gap) * (1 – Math.exp(-dt0 / .3));
const target = clamp(line, 0, TOTAL) – BM.gap;
if (BM.ds === null || snapIt || motion.matches || Math.abs(target – BM.ds) * L.sF > L.W * 1.5) BM.ds = target;
else BM.ds += (target – BM.ds) * (1 – Math.exp(-dt0 / .16));
if (Math.abs(target – BM.ds) .05) busDir = d > busD ? 1 : -1;
busD = d;
const th = headingAt(d) + (busDir BM.speed ? .08 : .25)));
const moving = clamp(BM.speed / 260, 0, 1);
BM.level = moving;

// the springy body: pulling away leaves the roof behind and lifts the nose, braking pitches it forward,
// turning rolls it outward; each spring overshoots and wobbles back like the reference
const calm = motion.matches;
const accel = (BM.speed – prevSpeed) / Math.max(dt, .001);
BM.acc += (accel – BM.acc) * (1 – Math.exp(-dt / .06));
const turnRate = BM.th === null ? 0 : Math.atan2(Math.sin(busTh – BM.th), Math.cos(busTh – BM.th)) / Math.max(dt, .001);
BM.th = busTh;
const spring = (S, target, k, c) => { S.v += (k * (target – S.x) – c * S.v) * dt; S.x += S.v * dt; };
spring(BM.pitch, calm ? 0 : clamp(-BM.acc / 5200, -.42, .42), 120, 9);
spring(BM.roll, calm ? 0 : clamp(-turnRate * BM.speed / 2600, -.32, .32), 140, 10);
// the happy hop at the last stop
if (Math.abs(d – (TOTAL – BM.gap)) < 1.5) { if (BM.endArm && BM.speed < 60 && !calm) { BM.hop = now; BM.endArm = false; } }
else if (d < TOTAL – BM.gap – 30) BM.endArm = true; // armed once the bus is on its way to Numaish
const hopT = BM.hop ? (now – BM.hop) / 1000 : 9;
const hop = hopT < .9 ? Math.max(0, Math.sin(Math.min(1, hopT / .42) * Math.PI)) * (hopT = .42 && hopT < .74 ? .35 * Math.sin((hopT – .42) / .32 * Math.PI) : 0) : 0;
const land = hopT .05 && !calm) {
const ahead = headingAt(clamp(d + busDir * 26, 0, TOTAL)) + (busDir .45) blink = { side: turn > 0 ? 1 : -1, on: Math.floor(now / 340) % 2 === 0 };
}

const key = cam.x.toFixed(2) + cam.y.toFixed(2) + cam.D.toFixed(2) + cam.pitch.toFixed(4) + cam.yaw.toFixed(4) + cam.ox.toFixed(1) + cam.oy.toFixed(1) + ‘,’ +
d.toFixed(2) + ‘,’ + busTh.toFixed(3) + ‘,’ + size.toFixed(2) + ‘,’ +
D.fx.toFixed(3) + D.rx.toFixed(3) + D.sq.toFixed(3) + (blink ? blink.side + ” + blink.on : ‘-‘);
if (key !== busKey) { busKey = key; drawBus(V, pt[0], pt[1], busTh, size, D, blink); }

// exhaust: always smoking; more, bigger puffs the faster it goes, a gentle idle trickle at a standstill
const G = busGeom(V, pt[0], pt[1], busTh, size), tail = G.W3(-1.06, .5, .14);
if (!calm) {
BM.puffDist += step;
const every = lerp(380, 45, moving);
if (now – BM.puffAt > every || (moving > .15 && BM.puffDist > L.busLen1 * .13)) {
BM.puffAt = now; BM.puffDist = 0;
const bubble = Math.random() (Math.random() – .5) * .16;
const sz = lerp(.12, .2, moving) * (.8 + Math.random() * .4) * (bubble ? .32 : 1);
puff(now, tail, sz, lerp(2400, 1500, moving) * (.85 + Math.random() * .3),
[-G.f[0] * lerp(.38, .24, moving) + G.r[0] * .25 + j(), -G.f[1] * lerp(.38, .24, moving) + G.r[1] * .25 + j(), lerp(.5, .3, moving) + j()], bubble);
}
}
tickPuffs(now, V, size, tail);
// gentle road bumps: the body rides up and down and rolls slightly; the faster, the more often
BM.phase += step / Math.max(6, L.busLen1 * .45);
if (BM.speed > 80) BM.wasFast = true;
if (BM.wasFast && BM.speed .02 ? ‘translate(0 ‘ + (-lifted).toFixed(2) + ‘) rotate(‘ + roll.toFixed(2) + ‘ ‘ + cx.toFixed(1) + ‘ ‘ + cy.toFixed(1) + ‘)’ : ”;
if (tf !== BM.tf) { BM.tf = tf; busBody.setAttribute(‘transform’, tf); }
BM.wasMoving = moving > .08;
}
function camShift(a, b) { // roughly how many screen pixels the view moved between two cameras
return (Math.abs(a.x – b.x) + Math.abs(a.y – b.y)) * FOCAL / b.D + Math.abs(Math.log(a.D / b.D)) * L.W +
Math.abs(a.pitch – b.pitch) * L.H + Math.abs(wrapA(a.yaw – b.yaw)) * L.W + Math.abs(a.ox – b.ox) + Math.abs(a.oy – b.oy);
}
function frame(now) {
requestAnimationFrame(frame);
if (!L) return;
const dtRaw = (now – last) / 1000 || .016, dt = Math.min(.05, dtRaw); last = now;
let ui;
if (jump) {
const u = clamp((now – jump.t0) / jump.dur, 0, 1), e = ease(u), k = jump.k, jflat = jump.flat;
window.scrollTo(0, lerp(jump.y0, jump.y1, e));
ui = { active: k, box: false, boxIdx: k > 0 && k .3 ? k – 1 : -1, label: (i) => jflat && i + 1 === k && e > .6,
intro: lerp(jump.intro0, k === 0 ? 1 : 0, clamp(e * 1.6 – (k === 0 ? .6 : 0), 0, 1)),
outro: lerp(jump.outro0, k === N + 1 ? 1 : 0, clamp(e * 1.6 – (k === N + 1 ? .6 : 0), 0, 1)),
line: lerp(jump.line0, lineFromP(k), e), full: lerp(jump.full0, fullFromP(k), e) };
stepBus(now, ui.line, snapBus);
if (jump.flat) { // the stop bar: the flat flight, as before the 3D map
const c3 = to3(fly2D(jump.from2, navCam2(k), e, k));
cam = jump.fromFlat ? c3 : mixCam(jump.from, c3, smooth(0, .45, e));
} else cam = fitted(fly(jump.from, jump.to, e), flyFit(jump.fromFlat, k === 0 || k === N + 1, e));
if (u >= 1) { cam = { …jump.to }; jump = null; }
} else if (peek) {
const p = progress(), u = clamp((now – peek.t0) / peek.dur, 0, 1), e = ease(u);
if (peek.phase === ‘out’ && Math.abs(window.scrollY – peek.y) > 2) peekBack(); // any scroll brings the stop back
ui = uiFromP(p);
stepBus(now, ui.line, snapBus);
if (peek.phase === ‘out’) { // the opening screen: title box, stop names, the whole route
cam = fitted(fly(peek.from, L.overCam, e), flyFit(peek.from.pitch false;
ui.full = lerp(peek.full0, 1, e);
ui.intro = clamp(e * 1.4 – .3, 0, 1); ui.outro = 0;
} else { // back to exactly where the scroll position says we are
cam = navMode ? fly(peek.from, navCam(clamp(Math.round(p), 0, N + 1)), e) : fitted(fly(peek.from, camFromP(p, BM.ds), e), flyFit(true, false, e));
ui.box = ui.box && u > .85; ui.label = u > .7 ? ui.label : () => false;
ui.full = lerp(peek.full0, ui.full, e);
ui.intro = lerp(peek.intro0, ui.intro, clamp(e * 1.8, 0, 1)); ui.outro = 0;
if (u >= 1) peek = null;
}
} else if (navBack) { // easing from the flat stop view back into the chase view
const p = progress(), u = clamp((now – navBack.t0) / navBack.dur, 0, 1), e = ease(u);
ui = uiFromP(p);
ui.box = ui.box && u > .85;
stepBus(now, ui.line, snapBus);
cam = fitted(fly(navBack.from, camFromP(p, BM.ds), e), flyFit(true, false, e));
if (u >= 1) navBack = null;
} else {
const p = progress();
ui = uiFromP(p);
stepBus(now, ui.line, snapBus);
const target = navMode ? navCam(clamp(Math.round(p), 0, N + 1)) : camFromP(p, BM.ds);
cam = snap || motion.matches ? target : mixCam(cam, target, 1 – Math.exp(-dt / .1));
snap = false;
}
ui.peek = !!peek && peek.phase === ‘out’;
lineNow = ui.line; fullNow = ui.full;
// Redraw the map only when the camera moved, the line grew or a tile arrived; fetch tiles a few times a second.
frameNo++;
const prev = lastCam || cam, shift = camShift(prev, cam);
moving = !!jump || shift > 2.5;
const y = window.scrollY;
if (Math.abs(y – lastY) > 1) { lastDir = y > lastY ? 1 : -1; lastY = y; }
updateBlur(prev, cam, Math.min(.25, dtRaw));
if (shift > .01 || mapDirty || blur.amt > 0 || lineNow !== lineDrawn || fullNow !== fullShown) {
drawMap(now); lastCam = { …cam }; lineDrawn = lineNow; fullShown = fullNow;
}
if (now – lastPlan > 160) plan(now);
draw();
applyUI(ui);
placeBus(now, snapBus); snapBus = false;
const V = view(cam, L.W, L.H);
updateSigns(now, dt, V);
updatePuck(dt, ui.active);
soundTick(now);
}

/* ———- start ———- */
layout();
const startAt = STATIONS.findIndex((S, i) => location.hash === ‘#’ + S.id || location.hash === ‘#station-‘ + pad2(i + 1));
if (startAt >= 0) window.scrollTo(0, storyTop + (startAt + 1) * stepH);
new ResizeObserver(layout).observe(stage);
if (document.fonts && document.fonts.ready) document.fonts.ready.then(layout);
requestAnimationFrame(frame);
})();

(function() {
var scripts = document.getElementsByTagName(‘script’);
var currentScript = document.currentScript || scripts[scripts.length – 1];
var wrapper = currentScript;
while (wrapper && (!wrapper.classList || !wrapper.classList.contains(‘raw-html-embed-wrapper’))) {
wrapper = wrapper.parentNode;
}
if (!wrapper || wrapper._rawHtmlMounted) return;
wrapper._rawHtmlMounted = true;

var host = wrapper.querySelector(‘.raw-html-host’);
var sourceEl = wrapper.querySelector(‘script.raw-html-source’);
if (!host || !sourceEl) return;

// 1. Upgrade ancestor overflow:hidden / overflow-x:hidden to clip so native position:sticky works
var anc = wrapper;
while (anc && anc !== document) {
if (anc.nodeType === 1) {
var cs = window.getComputedStyle(anc);
if (cs.overflow === ‘hidden’) {
anc.style.overflow = ‘clip’;
} else {
if (cs.overflowX === ‘hidden’) anc.style.overflowX = ‘clip’;
if (cs.overflowY === ‘hidden’) anc.style.overflowY = ‘clip’;
}
}
anc = anc.parentNode;
}

// 2. Parse the raw HTML using the browser’s native C++ DOMParser (inert: scripts don’t run, images don’t decode yet)
var rawHtml = sourceEl.textContent.replace(/<\/script/gi, '4KB) into binary Blob URLs to prevent iOS Safari Jetsam crashes
function b64ToBlobUrl(dataUri) {
try {
var comma = dataUri.indexOf(‘,’);
if (comma === -1) return dataUri;
var mime = (dataUri.slice(5, comma).split(‘;’)[0]) || ‘image/webp’;
var raw = atob(dataUri.slice(comma + 1));
var len = raw.length;
var bytes = new Uint8Array(len);
for (var i = 0; i < len; i++) {
bytes[i] = raw.charCodeAt(i);
}
return URL.createObjectURL(new Blob([bytes], { type: mime }));
} catch (e) {
return dataUri;
}
}

function optimizeImages(root) {
if (!root || !root.querySelectorAll) return;
var imgs = root.querySelectorAll('img[src^="data:image/"], image[href^="data:image/"]');
for (var i = 0; i 4096) {
el.setAttribute(attr, b64ToBlobUrl(val));
}
if (el.tagName === ‘IMG’ && !el.hasAttribute(‘decoding’)) {
el.setAttribute(‘decoding’, ‘async’);
}
}
var tpls = root.querySelectorAll(‘template’);
for (var j = 0; j < tpls.length; j++) {
optimizeImages(tpls[j].content);
}
var allEls = root.querySelectorAll('*');
for (var k = 0; k < allEls.length; k++) {
if (allEls[k].shadowRoot) {
optimizeImages(allEls[k].shadowRoot);
}
}
}

optimizeImages(parsedDoc);

// 4. Extract executable tags before mounting so they don’t run against global document
// We replace each inline script in the DOM with a dummy marker so that DOM traversal
// patterns like `document.querySelectorAll(‘script’)` and `script.previousElementSibling`
// remain intact when the scripts execute.
var executableScripts = [];
var allScripts = Array.prototype.slice.call(parsedDoc.querySelectorAll(‘script’));
for (var i = 0; i < allScripts.length; i++) {
var s = allScripts[i];
var type = (s.getAttribute('type') || '').trim().toLowerCase();
if (!type || type === 'text/javascript' || type === 'application/javascript' || type === 'module') {
executableScripts.push(s);
var marker = parsedDoc.createElement('script');
if (s.id) marker.id = s.id;
marker.type = 'text/plain';
marker.className = 'raw-html-script-marker';
marker.dataset.scriptIndex = String(executableScripts.length – 1);
s.parentNode.replaceChild(marker, s);
s._domMarker = marker;
}
}

// 5. Promote to parent document.head so @font-face declarations load
var links = parsedDoc.querySelectorAll(‘link[rel=”stylesheet”]’);
for (var l = 0; l :host, html and overflow-x:hidden -> overflow-x:clip in tags
var styles = parsedDoc.querySelectorAll(‘style’);
for (var stIdx = 0; stIdx < styles.length; stIdx++) {
styles[stIdx].textContent = styles[stIdx].textContent
.replace(/:rootb/g, ':host, html')
.replace(/overflow-xs*:s*hidden/gi, 'overflow-x:clip');
}

// 7. Mount the real …… tree into the Shadow Root
var shadow = host.attachShadow({ mode: ‘open’ });
var resetStyle = document.createElement(‘style’);
resetStyle.textContent = ‘:host { all: initial; display: block; width: 100%; isolation: isolate; font-family: system-ui, -apple-system, sans-serif; color: #111; box-sizing: border-box; } html, body { display: block; margin: 0; padding: 0; width: 100%; box-sizing: border-box; } head, title, meta { display: none; }’;
shadow.appendChild(resetStyle);

var shadowHtml = parsedDoc.documentElement;
var shadowHead = parsedDoc.head;
var shadowBody = parsedDoc.body;
shadow.appendChild(shadowHtml);

// 8. Smooth scroll for internal #hash anchor clicks inside Shadow DOM
shadow.addEventListener(‘click’, function(e) {
var a = e.target && e.target.closest ? e.target.closest(‘a[href^=”#”]’) : null;
if (!a) return;
var hash = a.getAttribute(‘href’);
if (!hash || hash === ‘#’) return;
var id = decodeURIComponent(hash.slice(1));
var target = shadow.getElementById(id) || shadow.querySelector(hash);
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: ‘smooth’, block: ‘start’ });
}
});

// 9. Lightweight document Proxy that routes DOM queries to the Shadow Root
// while leaving window and all native JS constructors 100% untouched.
var activeScript = null;
var shadowDocument = new Proxy(document, {
get: function(target, prop) {
if (prop === ‘getElementById’) {
return function(id) { return shadow.getElementById(id); };
}
if (prop === ‘querySelector’) {
return function(sel) { return shadow.querySelector(sel); };
}
if (prop === ‘querySelectorAll’) {
return function(sel) { return shadow.querySelectorAll(sel); };
}
if (prop === ‘getElementsByClassName’) {
return function(cls) { return shadowHtml.getElementsByClassName(cls); };
}
if (prop === ‘getElementsByTagName’) {
return function(tag) {
var t = String(tag).toLowerCase();
if (t === ‘html’) return [shadowHtml];
if (t === ‘head’) return [shadowHead];
if (t === ‘body’) return [shadowBody];
return shadowHtml.getElementsByTagName(tag);
};
}
if (prop === ‘documentElement’) return shadowHtml;
if (prop === ‘head’) return shadowHead;
if (prop === ‘body’) return shadowBody;
if (prop === ‘currentScript’) return (activeScript && activeScript._domMarker) || activeScript;
if (prop === ‘addEventListener’) {
return function(type, listener, options) {
if (type === ‘DOMContentLoaded’ && document.readyState !== ‘loading’) {
setTimeout(function() { listener.call(shadowDocument, new Event(‘DOMContentLoaded’)); }, 0);
return;
}
return document.addEventListener(type, listener, options);
};
}
var val = target[prop];
return typeof val === ‘function’ ? val.bind(target) : val;
}
});

// 10. Execute scripts sequentially
function runNextScript(idx) {
if (idx >= executableScripts.length) {
// Free inert and payloads after initialization
var cleanup = shadow.querySelectorAll(‘template, script[type=”text/plain”]’);
for (var c = 0; c < cleanup.length; c++) {
cleanup[c].remove();
}
optimizeImages(shadow);
return;
}
var s = executableScripts[idx];
activeScript = s;
var src = s.getAttribute('src');
if (src) {
var ext = document.createElement('script');
ext.src = src;
ext.async = false;
ext.onload = ext.onerror = function() {
runNextScript(idx + 1);
};
shadowHead.appendChild(ext);
return;
}
try {
var fn = new Function('document', s.textContent);
fn.call(window, shadowDocument);
} catch (err) {
console.error('RawHtml script error:', err);
}
runNextScript(idx + 1);
}

runNextScript(0);
})();

.template__main {
width: 100vw;
padding: 0;
}
.template–hero .template__main {
margin-bottom: 0;
padding-bottom: 0;
}
.story-header-container,
.story__content > :not(.raw-html-embed-wrapper):not(raw-html)
{
max-width: 700px;
margin-left: auto;
margin-right: auto;
padding: 0 20px;
}
.raw-html-embed-wrapper {
margin-bottom: 30px;
}
.template__footer {
padding: 0 20px;
}
.media–right.media–embed .media__item div {
margin: 0 40px !important;
}

.template__header, .prism__footer, .story__title, .story__excerpt, .story__byline,
.story-header-container, header {
display: none;
}

.template__footer {
xdisplay: none;
}

Few things test Karachi commuters’ patience like its roads and public transport. For nearly five years, construction of the Red Line has added another obstacle to daily journeys, with traffic diversions, dust and disrupted businesses along the corridor.

We wanted to understand why the project was taking so long. So we travelled the route, documented the work on the ground and spoke to the people living and working beside it.

The idea for the Red Line was born in the early 2010s when it was clear Karachi could not survive its own traffic. The Japan International Cooperation Agency, known globally as the sensei of city surveys, was asked to help. It counted the cars and motorcycles and studied the madness before coming up with a simple plan: Make six Bus Rapid Transit corridors.

BRT, as it is called, is a short form for giving buses their own lane in the middle of the road where no other vehicles can enter. This allows the bus to zoom people up and down a road without being hemmed in by pesky lane-violators.

One of the six corridors, the Red Line, ran from Numaish near Quaid-e-Azam’s Mazar to Malir Halt, a little further after the Karachi airport. This 26.6km strip is Karachi’s busiest and includes University Road. The planners gauged that it would need over 260 electric buses for it. “We found that more than 60 per cent of regular commuters cross Numaish every day,” said Zubair Channa, CEO of TransKarachi, a public sector company in charge of the project.

Back in 2011, that looked like up to 166,000 vehicles a day at the busiest intersections surveyed on the corridor. Roughly half to two-thirds of them are motorbikes and rickshaws, with just 5pc buses.

Project timeline

The Red Line work began in March 2022 and is less than half done more than four years later. Documents of the Asian Development Bank (ADB), a major financier, note April 30, 2027, as the loan closing date.

According to the Asian Development Bank’s project data sheet, the four financiers had disbursed approximately $128.93 million by August 20, 2026. ADB had disbursed $87.63m of its $235m loan, while the French Development Agency and the Asian Infrastructure Investment Bank had disbursed $21.38m and $19.92m, respectively, out of $71.8m each. No disbursements had been recorded against the Green Climate Fund’s combined $49m grant and loan commitments.

For a project of such scale, two years of inconvenience is a given, said Channa. TransKarachi estimates the corridor work will be done by December 20, 2026.

It said other components of the project will be completed progressively. The Malir Halt Depot is targeted for completion by April 2027, while the Bagh-e-Karachi Depot is expected to be completed by July 2027. The remaining structural and station works are targeted for completion by June 2028.

The Red Line has been divided into two lots or batches. The first is a 9.4km stretch from Malir Halt to Mosamiyat with six stations and two bus depots (at Malir Halt and Bagh-e-Karachi). The contract was awarded to Zahir Khan & Brothers (ZKB) for Rs13.8 billion. The company’s key projects include Swat Motorway, Lahore Eastern Bypass, and New Jam Sadiq Bridge in Karachi. The company was also previously involved in the construction of mass transit, such as the Islamabad-Rawalpindi and Multan Metro Bus systems and the Lahore Orange Line Metro and depot. ZKB began work on Red Line’s Lot-1 on May 10, 2022 and had an initial completion deadline of May 9, 2024, which was later extended to June 30, 2026.

The second lot covers a 12.85-kilometre stretch with 16 stations and was awarded to China Railway No. 3 Engineering Group-AM Associates (joint venture) on January 4, 2022, for Rs15.93bn, and construction commenced on August 15 of the same year. The original completion deadline was August 14, 2024, which was later extended to June 30, 2026. Per its website, AM Associates earlier also worked on the 19.21km Hazara Motorway and the Kohala–Muzaffarabad road for the National Highway Authority.

On April 21, 2026, TransKarachi terminated its contract with China Railway No. 3 Engineering Group–AM Associates for Lot-2, citing slow progress, unsatisfactory performance and violations related to health, safety and the environment. The contractor challenged the decision in the Sindh High Court, which referred the matter to the contract’s Dispute Resolution Board.

The board subsequently declared the termination “unlawful and invalid”, finding that it had been hasty and had failed to adequately account for the project’s complexity. It also identified shortcomings on TransKarachi’s part, including its failure to provide complete designs and an unobstructed work site — factors that contributed to delays. The dispute therefore went beyond disagreements over the contractor’s performance: it also raised questions about the project authority’s own contractual obligations and how the stalled works would be completed.

After the termination, the Sindh cabinet approved off-budget emergency funding and directly engaged the Frontier Works Organisation (FWO) under a government-to-government arrangement to stabilise the corridor and restore essential infrastructure, i.e. mixed traffic lanes, service roads, and drainage along Lot-2. FWO took over the site in May 2026 and is scheduled to complete the assigned works by the end of the year.

The contract for the remaining works—structural works and BRT station works—is in the tendering process and procurement will take place through ADB Open Competitive Bidding.

According to the bank, the method “facilitates open competition among all eligible bidders” through advertising to provide an equal opportunity to as many qualified bidders as possible.

“The lowest bidder gets the contract,” said Rehan. Bids for the replacement Lot-2 structural works had been submitted on October 8 and were being evaluated, with a contract award expected within about a month.

Delays

TransKarachi gave a number of reasons for the delay in the project: post-Covid inflation, land acquisition for bus depots, design revisions, and delays in utility line relocation. There is no justification for it, said Channa, but he reiterated the position that inconvenience caused by a project meant to provide long-term respite to Karachiites was meant to be.

The people directly affected by work on the corridor described the ‘inconvenience’.

“This construction work has been going on for more than 3.5 years. Initially, it was very slow but has picked up speed over the last two months. The dust is the worst part … because of the construction, the traffic jams are bad here. The roadwork has affected our work … there is no work.”
— Stallholder, Safoora Chowrangi

“Before the construction work began, my stall would be crowded with customers. Now, there is barely anyone. I used to set up my stall on the main road previously, but now we are down here.”
— stallholder, Mosamiyat

“A project that was supposed to be completed in two years is going on and on and on with no end in sight. Our business has shut down because they have dug up the road right in front of my shop.”
— shop owner, University Road

“My house is at a 20-25 min distance from here but because of the construction I have been missing my morning classes almost every day. In the evening, our rickshaw is usually stuck in the traffic for an hour or so.”
— student, University of Karachi

“It is like 60pc of my day is spent in traffic.”
— commuter, NIPA

According to TransKarachi, people displaced because of the Red Line construction are compensated. The compensation rates vary according to the type and category, from Rs27,500 to Rs302,500. So far, 131 people have been compensated, with payments made during 2022, 2023, 2024 and 2025. Rehan said the displaced people primarily included vendors operating from extended structures and movable pushcarts.

“No permanent structures were affected by the project,” he added.

TransKarachi also has a Grievance Redress Mechanism in place, where all complaints by commuters, affected communities and other stakeholders along the Red Line corridor are registered. During September 2026, a total of 14 complaints were received, of which the highest were concerning traffic, followed by utility, access, and environment.

Depending on the nature of the complaint, Rehan explained, a Corrective Action Plan is prepared, or an appropriate resolution is provided in coordination with the concerned department, project team, or contractor. The relevant stakeholders undertake the necessary actions to address the issue, and progress is monitored through the GRM portal.

Once the issue has been addressed, the complainant is informed via email, along with corresponding photographs where applicable, and requested to provide feedback on the resolution.The complainant is subsequently given three days to respond. If no response is received within this period, the complaint is closed in accordance with the approved procedure. Any feedback received from the complainant is documented in the GRM records.

The post We toured Karachi's Red Line to bring you this update appeared first on Dawn – Home.