@bongos/core 1.21.70 → 1.21.72

package/modules/public-landing/public/projects.html

@@ -444,6 +444,56 @@ h1[tabindex="-1"]:focus:not(:focus-visible){outline:none;}
 .autoOpen{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-size:14px;line-height:1.45;color:var(--ink-soft);cursor:pointer;min-height:24px;}
 .autoOpen input{width:18px;height:18px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--accent);cursor:pointer;}
 
+/* ── the done panel's two moments (task 1004578): WAIT — one status line, a
+   thin bar and the cloud hop — then ARRIVE — the steps one at a time. The
+   panel's data-moment says which; "plain" (a snag, a teardown, a stopped
+   watch) is the panel as it always was. While waiting the strip, the locked
+   checklist and the later-lines stand down; the sign-in step can be opened
+   in place (the one step a founder can do before the project answers). ── */
+.hop{display:none;margin-top:22px;max-width:680px;}
+#panel-done[data-moment="wait"] .hop{display:block;}
+#panel-done[data-moment="wait"] #liveProgress,
+#panel-done[data-moment="wait"] #wizInvite,
+#panel-done[data-moment="wait"] #wizInviteLater,
+#panel-done[data-moment="wait"] #doneModules,
+#panel-done[data-moment="wait"] .samePath,
+#panel-done[data-moment="wait"] .again{display:none;}
+#panel-done[data-moment="wait"]:not(.hopSignin) #doneStepsHead,
+#panel-done[data-moment="wait"]:not(.hopSignin) #humanSteps{display:none;}
+#panel-done[data-moment="wait"].hopSignin .humanSteps>li:not([data-onboard-step="oauth-app"]){display:none;}
+#panel-done[data-moment="wait"].hopSignin .humanSteps>li::before{content:none;}
+.hopStatus{font-size:14px;font-weight:400;line-height:1.45;color:var(--ink-soft);margin:0;min-height:20px;}
+.hopBar{height:3px;background:var(--rule-soft);margin:10px 0 12px;overflow:hidden;}
+.hopBar span{display:block;height:100%;width:0;background:var(--accent);transition:width .8s ease;}
+.hopStage{position:relative;border-radius:14px;overflow:hidden;background:var(--space-deep);}
+.hopStage{transition:opacity .5s ease;}
+.hop.hopFading .hopStage{opacity:0;}
+.hopStage canvas{display:block;width:100%;height:340px;touch-action:none;}
+.hopStage canvas:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;}
+.hopRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;}
+.hopRow .btn{min-width:44px;}
+.hopHint{font-size:13px;color:var(--ink-faint);margin-right:auto;}
+@media (hover:none){.hopHint{display:none;}}
+.hopScore{font-family:var(--label-face);font-size:var(--label-size);letter-spacing:var(--label-space);text-transform:uppercase;color:var(--ink-soft);}
+.hopWhile{font-size:14px;color:var(--ink-soft);margin-top:16px;}
+.hopWhile button{min-height:24px;}
+/* reduced motion: the sky stands still and there is nothing to steer */
+.hop.isStill .hopRow{display:none;}
+/* ARRIVE — the strip's three dots stand down (its note stays: it carries the
+   address), and the checklist shows one step at a time under a pager */
+#panel-done[data-moment="arrive"] #liveProgress .stages{display:none;}
+#panel-done[data-moment="arrive"] .humanSteps>li:not(.cur){display:none;}
+#panel-done[data-moment="arrive"] .humanSteps>li.cur{border-bottom:1px solid var(--rule-soft);}
+#panel-done[data-moment="arrive"] .humanSteps>li.cur:not(.sdone)::before{content:attr(data-n);}
+.stepPager{display:none;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;max-width:680px;}
+#panel-done[data-moment="arrive"] .stepPager{display:flex;}
+.stepCount{font-family:var(--label-face);font-size:var(--label-size);letter-spacing:var(--label-space);text-transform:uppercase;color:var(--ink-faint);margin-right:auto;}
+@media (prefers-reduced-motion:no-preference){
+  #panel-done[data-moment="arrive"] .humanSteps>li.cur,
+  #panel-done[data-moment="arrive"] .doneHead{animation:arriveIn .7s ease both;}
+}
+@keyframes arriveIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
+
 /* ── the standup strip (task 2083), drawn as the lifecycle rail (DESIGN.md):
    three hairlines, a 7px dot, one lit step — no plate, no connector, no
    pulse. The vocabulary is the page's fixed one (F22): filed / standing it
@@ -1939,6 +1989,25 @@ summary{min-height:24px;padding:3px 0;}
             <!-- the STABLE live region: the strip inside is rebuilt every 5s tick,
                  and a live region that is itself replaced never announces -->
             <div id="liveProgress" role="status" aria-live="polite"></div>
+            <!-- the wait (task 1004578): one status line, a thin bar, and the cloud
+                 hop — one cloud per public project on the platform, in its planet's
+                 colour. Shown only while data-moment="wait"; under reduced motion
+                 the sky is drawn once and stands still. -->
+            <div class="hop" id="hop">
+              <p class="hopStatus" id="hopStatus" role="status" aria-live="polite"></p>
+              <div class="hopBar" aria-hidden="true"><span id="hopBarFill"></span></div>
+              <div class="hopStage">
+                <canvas id="hopCanvas" tabindex="0" role="img" aria-label="A cloud-hopping game to pass the wait: each cloud is a public project on the platform. Arrow keys steer, space jumps."></canvas>
+              </div>
+              <div class="hopRow">
+                <button type="button" class="btn small ghost" id="hopLeft" aria-label="Move left">←</button>
+                <button type="button" class="btn small ghost" id="hopJump">Jump</button>
+                <button type="button" class="btn small ghost" id="hopRight" aria-label="Move right">→</button>
+                <span class="hopHint">Arrows or A and D steer, space jumps.</span>
+                <span class="hopScore" id="hopScore" aria-live="polite"></span>
+              </div>
+              <p class="hopWhile" id="hopWhile" hidden>While you wait, <button type="button" class="linklike" id="hopSignin" aria-expanded="false">set up GitHub sign-in</button>.</p>
+            </div>
             <!-- the invite step (task 1002346, BV1.R27; ADR 0249) — OPTIONAL, and it stands
                  HERE because an invite needs a project that already exists. Hidden until the
                  created record carries an id and a slug; the script is the only thing that
@@ -1963,6 +2032,12 @@ summary{min-height:24px;padding:3px 0;}
             <p class="samePath" id="wizInviteLater"></p>
             <h2 class="stepsHead" id="doneStepsHead">Your steps — the parts only you can play</h2>
             <ol class="humanSteps" id="humanSteps"></ol>
+            <!-- the arrival shows the steps one at a time (task 1004578) -->
+            <div class="stepPager" id="stepPager">
+              <span class="stepCount" id="stepCount" aria-live="polite"></span>
+              <button type="button" class="btn small ghost" id="stepBack">← Back</button>
+              <button type="button" class="btn small" id="stepNext">Continue</button>
+            </div>
             <!-- the extras row was a default (task 1002342, BV1.R23) — one line saying
                  where they live afterwards, so accepting them is never a dead end -->
             <p class="samePath" id="doneModules"></p>
@@ -4644,6 +4719,9 @@ summary{min-height:24px;padding:3px 0;}
         if (h) { h.setAttribute('tabindex', '-1'); h.focus({ preventScroll: false }); }
       }
       if (step === 1) paintDoors();
+      /* the cloud hop's motion runs only while its panel is the one on show
+         (task 1004578) — a start/stop, not a paint: renderDone paints the panel */
+      if (typeof hopStart === 'function') { if ($('panel-done').classList.contains('on')) hopStart(); else hopStop(); }
       if (step === 3) { physLoadAccountOnce(); paintChecks(); }
       /* the review hosts the old steps' own controls, so it repaints them on entry.
          The repo probe is authenticated — never fire it before /me settles (a pre-auth
@@ -6637,6 +6715,7 @@ summary{min-height:24px;padding:3px 0;}
         if (html === lastStepsHtml) return;   /* change-only re-render — polls never clobber open UI */
         lastStepsHtml = html;
         $('humanSteps').innerHTML = html;
+        if (typeof stepsPaint === 'function') stepsPaint();
         maybeAutoOpen();
       });
     }
@@ -6655,6 +6734,7 @@ summary{min-height:24px;padding:3px 0;}
       $('doneModules').innerHTML = 'Add or remove modules later in ' + projectPageLink('the project’s settings') + '.';
       /* the invite step waits for the hall (task 1004503): until it answers, one line */
       paintInviteGate(false);
+      setMoment('wait');   /* the cloud hop until the project answers (task 1004578) */
       renderSteps();
     }
 
@@ -6859,6 +6939,32 @@ summary{min-height:24px;padding:3px 0;}
       if (!el || html === lastProgHtml) return;
       lastProgHtml = html;
       el.innerHTML = html;
+      if (typeof hopSync === 'function') hopSync(el);
+    }
+    /* The done panel's moment (task 1004578): 'wait' while the project is being
+       stood up (the cloud hop), 'arrive' once it answers, and 'plain' for a snag,
+       a teardown, a settings change, or a project standing with no address (it
+       will never answer, so there is nothing to arrive at) — each keeps the strip
+       as it always was. Same branch order as renderProgress below. */
+    function momentFor(inst) {
+      var s = inst && inst.status, oi = inst && inst.open_intent;
+      /* only the intents renderProgress itself speaks for count — any other
+         (a running standup, say) falls through to the status, as it does there */
+      var spoken = oi && s !== 'provisioning' && s !== 'tearing_down' && s !== 'requested' ? oi.action : '';
+      if (spoken === 'teardown' || spoken === 'settings-apply') return 'plain';
+      if (spoken === 'provision') return 'wait';
+      if (s === 'error' || s === 'tearing_down' || s === 'torn_down') return 'plain';
+      if (s === 'active') {
+        if (!inst.domain) return 'plain';
+        if (addressReady(inst) && inst.last_verified_up) return 'arrive';
+      }
+      return 'wait';
+    }
+    function setMoment(m) {
+      var panel = $('panel-done');
+      if (!panel) return;
+      if (typeof hopMoment === 'function') hopMoment(panel, m);
+      else panel.setAttribute('data-moment', m);
     }
     /* Renders the current instance state; returns true when the state is terminal
        (no further polling wanted). The strip is chosen by the OPEN INTENT first,
@@ -6866,6 +6972,7 @@ summary{min-height:24px;padding:3px 0;}
        told to "start another project". */
     function renderProgress(inst) {
       if (!$('liveProgress')) return true;
+      if (inst) setMoment(momentFor(inst));
       var s = inst && inst.status;
       var revive = !!(inst && inst.torn_down_at);
       var oi = inst && inst.open_intent;
@@ -6987,6 +7094,7 @@ summary{min-height:24px;padding:3px 0;}
             setProgress(progressMarkup(1, 1,
               'Still working — this tab will stop watching now. Follow it any time on <a href="?view=mine">your projects page</a>.', '', watchFlow));
           }
+          setMoment('plain');
           stopPolling();
           return;
         }
@@ -7036,6 +7144,7 @@ summary{min-height:24px;padding:3px 0;}
             var m = String(err && err.message || '');
             if (m.indexOf('gone:') === 0) {
               setProgress(progressMarkup(1, 1, m.slice(5), 'isErr', watchFlow));
+              setMoment('plain');
               stopPolling();
               return;
             }
@@ -7060,6 +7169,7 @@ summary{min-height:24px;padding:3px 0;}
       live = { instStatus: null, addrReady: false, manifest: null, manifestMsg: '', manifestCode: '', manifestFailure: null, appSlug: null };
       lastStepsHtml = '';
       lastProgHtml = '';
+      hopReset();
       try { sessionStorage.removeItem(DRAFT_KEY); } catch (e) {}
       /* Every key the initial state declares has to be re-declared here. `modules`
          is three-valued and null is its "nothing said" sentinel; leaving the key out
@@ -7095,6 +7205,477 @@ summary{min-height:24px;padding:3px 0;}
     }
     wireAgain();
 
+    /* ══ THE CLOUD HOP (task 1004578) — the wait, made into something to do.
+       One cloud per PUBLIC project on the platform (the featured feed's planets,
+       never a star or a black hole), in that project's planet accent with its
+       name under it, over a full-width "Your planet" cloud that always catches.
+       The owner's rules, from a played prototype: the clouds stand still, the
+       sky stands still (no parallax — both read as nausea), the view does not
+       follow a jump and glides only after a landing (or a fall off the bottom),
+       no shake. Steer left and right, jump; a miss falls to whatever is below.
+       Past the last cloud: "Max projects reached — build more to jump more".
+
+       Motion: the same posture as the map's sky (C9) — the loop never starts
+       under prefers-reduced-motion, and the rest frame (drawn once) is a
+       complete still sky. Colours are read off the page's own tokens at run
+       time, so a re-brand repaints the game too; the only literals are white
+       and black with alpha. The loop stops whenever the canvas is not on
+       screen or the tab is hidden. ══ */
+    var HOP_GAP = 92, HOP_SPD = 4.2, HOP_JUMP = 11.2, HOP_G = 0.45, HOP_H = 340;
+    var hop = { raf: 0, last: 0, since: 0, target: '', w: 0, dpr: 1, col: null, sky: null, font: 'sans-serif',
+      feed: null, clouds: [], best: 0, maxed: false, p: null, cam: 0, camT: 0, L: false, R: false,
+      stars: [], shoot: null, nextShoot: 0, tr: 0, puffs: null, sparks: null };
+
+    function hopRgb(c) {
+      var n = (String(c).match(/-?[\d.]+/g) || []).map(Number);
+      if (/^color\(/.test(String(c))) return [n[0] * 255, n[1] * 255, n[2] * 255].map(Math.round);
+      return [n[0] || 0, n[1] || 0, n[2] || 0];
+    }
+    function hopRead(expr) {
+      var el = document.createElement('span');
+      el.style.color = expr; el.style.display = 'none';
+      $('hop').appendChild(el);
+      var c = hopRgb(getComputedStyle(el).color);
+      el.parentNode.removeChild(el);
+      return c;
+    }
+    function hopMix(a, b, t) { return [0, 1, 2].map(function (i) { return Math.round(a[i] + (b[i] - a[i]) * t); }); }
+    function hopCss(c, a) { return 'rgba(' + c[0] + ',' + c[1] + ',' + c[2] + ',' + (a == null ? 1 : a) + ')'; }
+    var HOP_WHITE = [255, 255, 255];
+    function hopColors() {
+      var c = {};
+      ORB_ACCENT_NAMES.forEach(function (nm) { c[nm] = hopRead('var(--' + nm + ')'); });
+      ['space-deep', 'space-mid', 'space-high', 'nebula', 'gold'].forEach(function (nm) { c[nm] = hopRead('var(--' + nm + ')'); });
+      c.base = hopMix(c['gold-soft'], HOP_WHITE, 0.78);
+      c.baseInk = c['space-mid'];
+      c.head = hopMix(c['gold-soft'], HOP_WHITE, 0.55);
+      c.drum = c.terracotta;
+      return c;
+    }
+
+    /* the feed: the same accent rule as the map — the owner's pick, else the
+       position in the origin-sorted FULL catalog — so a project wears the same
+       colour here as in the sky. Fail soft: no feed, no project clouds. */
+    function hopLoadFeed() {
+      if (hop.feed || hop.loading) return;
+      hop.loading = true;
+      fetch(API + '/projects/featured', { credentials: 'same-origin' })
+        .then(function (res) { if (!res.ok) throw new Error('feed'); return res.json(); })
+        .then(function (d) {
+          var rows = ((d && d.projects) || []).slice().sort(function (a, b) { return String(a.origin).localeCompare(String(b.origin)); });
+          hop.feed = rows.map(function (p, i) {
+            var acc = ORB_ACCENT_NAMES.indexOf(p.planet_accent) !== -1 ? p.planet_accent : ORB_ACCENT_NAMES[i % ORB_ACCENT_NAMES.length];
+            return { name: String(p.name || ''), acc: acc, orb: p.orb };
+          }).filter(function (p) { return p.orb === 'planet' && p.name; }).slice(0, 40);
+          hopBuild();
+        })
+        .catch(function () { hop.feed = []; hopBuild(); });
+    }
+
+    function hopBuild() {
+      var w = hop.w || 600;
+      hop.clouds = [{ i: 0, base: true, y: 0 }];
+      var f = 0.5;
+      (hop.feed || []).forEach(function (p, k) {
+        var i = k + 1, cw = Math.max(64, Math.min(110, w * 0.22) - Math.min(24, i));
+        var reach = Math.min(170, w * 0.4), lo = (cw / 2 + 12) / w, hi = 1 - lo, nf, tries = 0;
+        do { nf = f + (Math.random() < 0.5 ? -1 : 1) * (60 + Math.random() * (reach - 60)) / w; tries++; }
+        while ((nf < lo || nf > hi) && tries < 40);
+        f = Math.max(lo, Math.min(hi, nf));
+        hop.clouds.push({ i: i, f: f, cw: cw, y: -i * HOP_GAP, name: p.name, acc: p.acc });
+      });
+      /* no public project at all is the same truth as having climbed them all */
+      hop.best = 0; hop.maxed = hop.feed !== null && hop.clouds.length === 1;
+      hop.p = { x: w / 2, y: -14, vy: 0, on: hop.clouds[0], face: 1 };
+      hop.cam = hop.camT = -HOP_H * 0.8;
+      hopScore();
+      if (!hop.raf) hopDraw(performance.now());
+    }
+    function hopCloudX(c) { return c.base ? 0 : c.f * hop.w - c.cw / 2; }
+    function hopCloudW(c) { return c.base ? hop.w : c.cw; }
+
+    function hopScore() {
+      var n = hop.clouds.length - 1, el = $('hopScore');
+      if (!el) return;
+      if (hop.feed === null || !hop.p) { el.textContent = ''; return; }
+      el.textContent = hop.maxed ? 'Max projects reached — build more to jump more' : 'Best: ' + hop.best + ' of ' + n + (n === 1 ? ' project' : ' projects');
+    }
+
+    /* the still sky, painted once per size: night ground, a nebula haze in
+       the planet colours, the Milky Way, three far planets */
+    function hopSky() {
+      var w = hop.w, h = HOP_H, dpr = hop.dpr, c = hop.col;
+      var cv = document.createElement('canvas');
+      cv.width = Math.round(w * dpr); cv.height = Math.round(h * dpr);
+      var g = cv.getContext('2d');
+      g.setTransform(dpr, 0, 0, dpr, 0, 0);
+      var bg = g.createLinearGradient(0, 0, 0, h);
+      bg.addColorStop(0, hopCss(c['space-deep'])); bg.addColorStop(1, hopCss(hopMix(c['space-high'], c.nebula, 0.5)));
+      g.fillStyle = bg; g.fillRect(0, 0, w, h);
+      [[0.22, 0.24, c.sea, 0.32], [0.8, 0.7, c.terracotta, 0.3], [0.56, 0.1, c.nebula, 0.6], [0.92, 0.16, c['gold-soft'], 0.2]].forEach(function (n) {
+        var x = n[0] * w, y = n[1] * h, r = Math.max(w, h) * n[3];
+        var rg = g.createRadialGradient(x, y, 0, x, y, r);
+        rg.addColorStop(0, hopCss(n[2], 0.17)); rg.addColorStop(1, hopCss(n[2], 0));
+        g.fillStyle = rg; g.fillRect(0, 0, w, h);
+      });
+      var dots = Math.round(w * 2.6);
+      for (var k = 0; k < dots; k++) {
+        var t = Math.random(), off = (Math.random() + Math.random() + Math.random() - 1.5) * h * 0.2;
+        var tint = Math.random() < 0.5 ? HOP_WHITE : hopMix(c.gold, HOP_WHITE, 0.6);
+        g.fillStyle = hopCss(tint, 0.15 + Math.random() * 0.4);
+        var s = Math.random() < 0.92 ? 1 : 1.6;
+        g.fillRect(t * w + off * 0.5, h * 0.88 - t * h * 0.78 + off, s, s);
+      }
+      for (k = 0; k < w * 0.6; k++) { g.fillStyle = hopCss(HOP_WHITE, 0.1 + Math.random() * 0.3); g.fillRect(Math.random() * w, Math.random() * h, 1, 1); }
+      function planet(x, y, r, col, ring, moon) {
+        var pg = g.createRadialGradient(x - r * 0.4, y - r * 0.4, r * 0.1, x, y, r);
+        pg.addColorStop(0, hopCss(hopMix(col, HOP_WHITE, 0.85))); pg.addColorStop(0.3, hopCss(col)); pg.addColorStop(1, hopCss(c['space-deep']));
+        g.strokeStyle = hopCss(HOP_WHITE, 0.35); g.lineWidth = 2;
+        if (ring) { g.beginPath(); g.ellipse(x, y, r * 1.8, r * 0.45, -0.35, Math.PI, 2 * Math.PI); g.stroke(); }
+        g.fillStyle = pg; g.beginPath(); g.arc(x, y, r, 0, 7); g.fill();
+        if (ring) { g.beginPath(); g.ellipse(x, y, r * 1.8, r * 0.45, -0.35, 0, Math.PI); g.stroke(); }
+        if (moon) { g.fillStyle = hopCss(hopMix(c.nebula, HOP_WHITE, 0.8)); g.beginPath(); g.arc(x + r * 2.2, y - r * 0.8, r * 0.3, 0, 7); g.fill(); }
+      }
+      planet(w * 0.13, h * 0.19, Math.min(28, w * 0.05), c.sea, true, false);
+      planet(w * 0.88, h * 0.76, Math.min(16, w * 0.03), c.terracotta, false, true);
+      planet(w * 0.68, h * 0.25, Math.min(10, w * 0.02), c['gold-soft'], false, false);
+      hop.sky = cv;
+      hop.stars = [];
+      for (k = 0; k < Math.round(w / 6); k++) {
+        hop.stars.push({ x: Math.random() * w, y: Math.random() * h, s: 0.6 + Math.random() * 1.6, ph: Math.random() * 6.28,
+          sp: 0.5 + Math.random() * 0.8, tint: [HOP_WHITE, hopMix(c.gold, HOP_WHITE, 0.5), hopMix(c.sea, HOP_WHITE, 0.6)][k % 3], flare: Math.random() < 0.08 });
+      }
+    }
+
+    /* size the canvas to its stage; the clouds keep their place as a fraction
+       of the width, the player keeps theirs */
+    function hopSize() {
+      var cv = $('hopCanvas');
+      var w = Math.round(cv.clientWidth);
+      if (!w) return false;
+      var dpr = window.devicePixelRatio || 1;
+      if (w === hop.w && dpr === hop.dpr && hop.sky) return true;
+      if (hop.p && hop.w) hop.p.x = hop.p.x * w / hop.w;
+      hop.w = w; hop.dpr = dpr;
+      cv.width = Math.round(w * dpr); cv.height = Math.round(HOP_H * dpr);
+      if (!hop.col) hop.col = hopColors();
+      hop.font = getComputedStyle(cv).fontFamily || 'sans-serif';
+      hopSky();
+      if (!hop.p) hopBuild();
+      return true;
+    }
+
+    function hopRunning() {
+      var cv = $('hopCanvas');
+      return !REDUCED && !document.hidden && hop.target === 'wait' && !!cv && cv.offsetWidth > 0;
+    }
+    function hopStart() {
+      var hopEl = $('hop');
+      if (!hop || !hopEl) return;   /* hoisted: show() can ask before the hop is declared */
+      hopEl.classList.toggle('isStill', REDUCED);
+      hopLoadFeed();
+      if (!hopSize()) return;
+      if (!hopRunning()) { if (!hop.raf) hopDraw(performance.now()); return; }
+      if (hop.raf) return;
+      hop.last = performance.now();
+      if (!hop.since) hop.since = hop.last;
+      hop.raf = requestAnimationFrame(hopFrame);
+    }
+    function hopStop() { if (!hop) return; if (hop.raf) { cancelAnimationFrame(hop.raf); hop.raf = 0; } hop.L = hop.R = false; }
+
+    function hopJump() {
+      if (hop.p && hop.p.on && !hop.maxed && !hop.tr && hop.target === 'wait') { hop.p.vy = -HOP_JUMP; hop.p.on = null; }
+    }
+
+    function hopStep(k) {
+      var p = hop.p, w = hop.w;
+      if (!p) return;
+      var mv = (hop.R ? 1 : 0) - (hop.L ? 1 : 0);
+      if (mv) p.face = mv;
+      p.x = Math.max(10, Math.min(w - 10, p.x + mv * HOP_SPD * k));
+      if (p.on) {
+        p.y = p.on.y - 14;
+        var ox = hopCloudX(p.on);
+        if (!p.on.base && (p.x < ox - 6 || p.x > ox + hopCloudW(p.on) + 6)) { p.on = null; p.vy = 0; }
+      }
+      if (!p.on) {
+        var py = p.y;
+        p.vy = Math.min(p.vy + HOP_G * k, 14);
+        p.y += p.vy * k;
+        if (p.vy > 0) {
+          for (var i = 0; i < hop.clouds.length; i++) {
+            var c = hop.clouds[i], top = c.y - 14, cx = hopCloudX(c);
+            if (py <= top && p.y >= top && (c.base || (p.x > cx - 6 && p.x < cx + c.cw + 6))) {
+              p.on = c; p.y = top; p.vy = 0;
+              if (c.i > hop.best) {
+                hop.best = c.i;
+                if (hop.best === hop.clouds.length - 1) hop.maxed = true;
+                hopScore();
+              }
+              break;
+            }
+          }
+        }
+      }
+      if (p.on) hop.camT = p.on.y - HOP_H * (p.on.base ? 0.8 : 0.62);
+      else if (p.y - hop.camT > HOP_H - 30) hop.camT = p.y - HOP_H + 30;
+      hop.cam += (hop.camT - hop.cam) * Math.min(1, 0.07 * k);
+    }
+
+    function hopPuff(g, x, y, w, col, name) {
+      g.fillStyle = hopCss(col);
+      [[0.5, 6, 0.5, 10], [0.32, -2, 0.22, 13], [0.62, -5, 0.26, 16]].forEach(function (e) {
+        g.beginPath(); g.ellipse(x + w * e[0], y + e[1], w * e[2], e[3], 0, 0, 7); g.fill();
+      });
+      if (name) {
+        g.fillStyle = hopCss(HOP_WHITE, 0.82); g.font = '11px ' + hop.font; g.textAlign = 'center';
+        g.fillText(name.length > 18 ? name.slice(0, 17) + '…' : name, x + w / 2, y + 28);
+      }
+    }
+    function hopBase(g, y) {
+      var c = hop.col, w = hop.w;
+      g.fillStyle = hopCss(c.base);
+      /* one path per bump: ellipses sharing a path are joined by stray chords */
+      for (var k = 0; k * 80 < w + 80; k++) { g.beginPath(); g.ellipse(k * 80 + 20, y + 8 + (k % 2) * 6, 66, 24, 0, 0, 7); g.fill(); }
+      g.fillRect(0, y + 10, w, HOP_H);
+      g.fillStyle = hopCss(c.baseInk); g.font = '12px ' + hop.font; g.textAlign = 'center';
+      g.fillText('Your planet', w / 2, y + 38);
+    }
+    function hopPlayer(g, x, y, f) {
+      var c = hop.col;
+      g.fillStyle = hopCss(c.drum);
+      g.fillRect(x - 14, y - 10, 12, 13); g.fillRect(x + 2, y - 7, 11, 10);
+      g.fillStyle = hopCss(c.head);
+      g.beginPath(); g.ellipse(x - 8, y - 10, 6, 2.6, 0, 0, 7); g.fill();
+      g.beginPath(); g.ellipse(x + 7.5, y - 7, 5.5, 2.4, 0, 0, 7); g.fill();
+      g.fillStyle = hopCss(HOP_WHITE, 0.7);
+      g.fillRect(x + (f > 0 ? 3 : -11), y - 3, 2, 2);
+    }
+
+    function hopDraw(now) {
+      var cv = $('hopCanvas');
+      if (!cv || !hop.sky || !hop.col) return;
+      var g = cv.getContext('2d'), w = hop.w, h = HOP_H, c = hop.col;
+      g.setTransform(hop.dpr, 0, 0, hop.dpr, 0, 0);
+      g.drawImage(hop.sky, 0, 0, w, h);
+      var t = now / 1000, still = REDUCED;
+      hop.stars.forEach(function (s) {
+        var a = still ? 0.75 : 0.4 + 0.6 * (0.5 + 0.5 * Math.sin(t * s.sp + s.ph));
+        g.fillStyle = hopCss(s.tint, a); g.beginPath(); g.arc(s.x, s.y, s.s * 0.6, 0, 7); g.fill();
+        if (s.flare) { g.fillStyle = hopCss(s.tint, a * 0.5); g.fillRect(s.x - s.s * 3, s.y - 0.5, s.s * 6, 1); g.fillRect(s.x - 0.5, s.y - s.s * 3, 1, s.s * 6); }
+      });
+      if (!still) {
+        if (!hop.shoot && now > hop.nextShoot) {
+          var fromL = Math.random() < 0.5;
+          hop.shoot = { x: fromL ? Math.random() * w * 0.4 : w * (0.6 + Math.random() * 0.4), y: 10 + Math.random() * h * 0.35,
+            vx: (fromL ? 1 : -1) * (9 + Math.random() * 3), vy: 2.5 + Math.random() * 1.5, life: 0 };
+        }
+        if (hop.shoot) {
+          var sh = hop.shoot; sh.life++; sh.x += sh.vx; sh.y += sh.vy;
+          var sa = Math.max(0, 1 - sh.life / 45);
+          var sg = g.createLinearGradient(sh.x, sh.y, sh.x - sh.vx * 9, sh.y - sh.vy * 9);
+          sg.addColorStop(0, hopCss(hopMix(c.gold, HOP_WHITE, 0.7), sa)); sg.addColorStop(1, hopCss(HOP_WHITE, 0));
+          g.strokeStyle = sg; g.lineWidth = 2; g.beginPath(); g.moveTo(sh.x, sh.y); g.lineTo(sh.x - sh.vx * 9, sh.y - sh.vy * 9); g.stroke();
+          if (sh.life > 45) { hop.shoot = null; hop.nextShoot = now + 3500 + Math.random() * 3500; }
+        }
+      }
+      hop.clouds.forEach(function (cl) {
+        var y = cl.y - hop.cam;
+        if (y < -40 || y > h + 60) return;
+        if (cl.base) hopBase(g, y); else hopPuff(g, hopCloudX(cl), y, cl.cw, c[cl.acc] || c.accent, cl.name);
+      });
+      if (hop.p) hopPlayer(g, hop.p.x, hop.p.y - hop.cam, hop.p.face);
+      if (hop.maxed && hop.feed !== null && !hop.tr) {
+        /* a band across the top of the sky — the player stands on the last cloud below it */
+        g.fillStyle = 'rgba(0,0,0,0.6)'; g.fillRect(0, 18, w, 76);
+        g.textAlign = 'center';
+        g.fillStyle = hopCss(c['gold-soft']); g.font = '500 19px ' + hop.font; g.fillText('Max projects reached', w / 2, 50);
+        g.fillStyle = hopCss(HOP_WHITE, 0.88); g.font = '14px ' + hop.font; g.fillText('Build more to jump more', w / 2, 76);
+      }
+      if (hop.tr) hopVeil(g, (now - hop.tr) / 1000);
+    }
+
+    /* the arrival's curtain: planet-coloured clouds sweep in from every edge
+       with the stars twinkling over them until they fill the stage */
+    function hopEase(t) { t = Math.max(0, Math.min(1, t)); return 1 - Math.pow(1 - t, 3); }
+    function hopVeil(g, t) {
+      hop.sparks.forEach(function (s) {
+        var k = t - s.dl; if (k < 0) return;
+        var a = Math.max(0, Math.sin(k * 5)) * Math.min(1, k * 3);
+        g.fillStyle = hopCss(HOP_WHITE, a);
+        g.fillRect(s.x - s.s / 2, s.y - s.s / 2, s.s, s.s); g.fillRect(s.x - s.s * 2, s.y - 0.5, s.s * 4, 1); g.fillRect(s.x - 0.5, s.y - s.s * 2, 1, s.s * 4);
+      });
+      hop.puffs.forEach(function (q) {
+        var k = hopEase((t - q.dl) / 1.1); if (k <= 0) return;
+        var px = q.sx + (q.tx - q.sx) * k, py = q.sy + (q.ty - q.sy) * k;
+        g.fillStyle = hopCss(q.col);
+        g.beginPath(); g.ellipse(px, py, q.r * k, q.r * 0.6 * k, 0, 0, 7); g.fill();
+        g.beginPath(); g.ellipse(px - q.r * 0.5 * k, py + q.r * 0.15 * k, q.r * 0.6 * k, q.r * 0.45 * k, 0, 0, 7); g.fill();
+      });
+    }
+    function hopCurtain(done) {
+      var w = hop.w, h = HOP_H, c = hop.col;
+      var cols = ORB_ACCENT_NAMES.map(function (nm) { return c[nm]; });
+      hop.puffs = []; hop.sparks = [];
+      for (var k = 0; k < 70; k++) {
+        var a = Math.random() * 6.28, d = Math.max(w, h) * 0.75 + Math.random() * 120;
+        hop.puffs.push({ tx: Math.random() * w, ty: Math.random() * h, sx: w / 2 + Math.cos(a) * d, sy: h / 2 + Math.sin(a) * d,
+          r: 50 + Math.random() * 70, col: Math.random() < 0.35 ? c.base : cols[k % cols.length], dl: Math.random() * 0.5 });
+      }
+      for (k = 0; k < 90; k++) hop.sparks.push({ x: Math.random() * w, y: Math.random() * h, dl: Math.random() * 0.9, s: 1 + Math.random() * 2.5 });
+      hop.L = hop.R = false;
+      hop.tr = performance.now();
+      hop.trDone = done;
+    }
+
+    function hopFrame(now) {
+      hop.raf = 0;
+      if (hop.tr) {
+        hopDraw(now);
+        /* the filled stage fades out, then the arrival fades in */
+        if (now - hop.tr > 1250) $('hop').classList.add('hopFading');
+        if (now - hop.tr > 1800) { var done = hop.trDone; hop.tr = 0; hop.trDone = null; if (done) done(); return; }
+        hop.raf = requestAnimationFrame(hopFrame);
+        return;
+      }
+      if (!hopRunning()) { hopDraw(now); return; }
+      hopSize();
+      var k = Math.min(2.5, Math.max(0.2, (now - hop.last) / (1000 / 60)));
+      hop.last = now;
+      hopStep(k);
+      hopDraw(now);
+      hop.raf = requestAnimationFrame(hopFrame);
+    }
+
+    /* the panel's moment, from renderProgress (setMoment). Arriving from a
+       game that has been running gets the curtain first; a resume onto a
+       project that is already live, or reduced motion, switches straight. */
+    function hopMoment(panel, m) {
+      if (!hop) { panel.setAttribute('data-moment', m); return; }
+      if (hop.target === m) return;
+      var was = hop.target;
+      hop.target = m;
+      if (hop.tr) return;   /* the curtain is up — it applies the LATEST target when it lands */
+      function apply() {
+        panel.setAttribute('data-moment', hop.target);
+        $('hop').classList.remove('hopFading');
+        if (hop.target === 'wait') hopStart(); else hopStop();
+        if (hop.target === 'arrive') stepsPaint(true);
+        if (hop.target !== 'wait') { panel.classList.remove('hopSignin'); $('hopSignin').setAttribute('aria-expanded', 'false'); }
+      }
+      if (m === 'arrive' && was === 'wait' && !REDUCED && hop.raf && performance.now() - hop.since > 2500) {
+        cancelAnimationFrame(hop.raf); hop.raf = 0;
+        hopCurtain(apply);
+        hop.raf = requestAnimationFrame(hopFrame);
+        return;
+      }
+      apply();
+    }
+    function hopReset() {
+      if (!hop) return;
+      hopStop();
+      hop.target = ''; hop.since = 0; hop.tr = 0; hop.trDone = null; hop.p = null;
+      hop.best = 0; hop.maxed = false;
+      if (hop.w) hopBuild();
+      stepIdx = -1; stepAuto = true;
+      var panel = $('panel-done');
+      panel.removeAttribute('data-moment'); panel.classList.remove('hopSignin');
+    }
+
+    /* the status line and the bar read what the strip already says — one
+       vocabulary, one source (renderProgress), never a second copy */
+    function hopSync(el) {
+      var st = $('hopStatus');
+      if (!st || !el) return;
+      var note = el.querySelector('.pnote');
+      var text = note ? note.textContent : '';
+      if (st.textContent !== text) st.textContent = text;
+      var lis = el.querySelectorAll('.stages li').length;
+      var done = el.querySelectorAll('.stages li.done').length + (el.querySelector('.stages li.now') ? 0.5 : 0);
+      $('hopBarFill').style.width = Math.max(4, lis ? Math.min(100, done / lis * 100) : 0) + '%';
+    }
+
+    /* the arrival's steps, one at a time. The list is still rendered whole
+       (renderSteps, change-only); this marks the one on show, numbers it, and
+       paints the pager. Until the founder pages for themselves, the step on
+       show follows the first one not yet done — the checklist ticks itself, so
+       a step finishing moves them on. Once they page, their choice holds. */
+    var stepIdx = -1, stepAuto = true;
+    function stepsPaint(fresh) {
+      var panel = $('panel-done'), list = $('humanSteps');
+      if (!panel || !list) return;
+      var items = Array.prototype.slice.call(list.children);
+      var oauth = list.querySelector('[data-onboard-step="oauth-app"]');
+      var open = panel.classList.contains('hopSignin');
+      var can = !!oauth && !oauth.classList.contains('slocked') && !oauth.classList.contains('sdone');
+      $('hopWhile').hidden = !(can || open);
+      if (!items.length) { $('stepCount').textContent = ''; $('stepBack').hidden = true; $('stepNext').hidden = true; return; }
+      if (fresh) stepAuto = true;
+      if (stepAuto || !(stepIdx >= 0)) {
+        stepIdx = 0;
+        for (var i = 0; i < items.length; i++) { if (!items[i].classList.contains('sdone')) { stepIdx = i; break; } }
+      }
+      stepIdx = Math.max(0, Math.min(items.length - 1, stepIdx));
+      items.forEach(function (li, j) {
+        li.classList.toggle('cur', j === stepIdx);
+        /* a hidden step never counts, so the one on show carries its own number */
+        li.setAttribute('data-n', (j < 9 ? '0' : '') + (j + 1));
+      });
+      $('stepCount').textContent = 'Step ' + (stepIdx + 1) + ' of ' + items.length;
+      $('stepBack').hidden = stepIdx <= 0;
+      $('stepNext').hidden = stepIdx >= items.length - 1;
+    }
+    function stepGo(d) {
+      stepAuto = false;
+      stepIdx += d;
+      stepsPaint();
+      var cur = $('humanSteps').querySelector('li.cur');
+      if (cur) { cur.setAttribute('tabindex', '-1'); cur.focus(); }
+    }
+    $('stepNext').addEventListener('click', function () { stepGo(1); });
+    $('stepBack').addEventListener('click', function () { stepGo(-1); });
+
+    $('hopSignin').addEventListener('click', function () {
+      var panel = $('panel-done');
+      var open = !panel.classList.contains('hopSignin');
+      panel.classList.toggle('hopSignin', open);
+      this.setAttribute('aria-expanded', open ? 'true' : 'false');
+      var li = $('humanSteps').querySelector('[data-onboard-step="oauth-app"]');
+      if (open && li) { li.setAttribute('tabindex', '-1'); li.focus(); }
+    });
+
+    (function hopInput() {
+      var cv = $('hopCanvas');
+      function key(ev, down) {
+        var k = ev.code;
+        if (k === 'Space' || k === 'ArrowUp' || k === 'KeyW') { ev.preventDefault(); if (down) hopJump(); }
+        else if (k === 'ArrowLeft' || k === 'KeyA') { ev.preventDefault(); hop.L = down; }
+        else if (k === 'ArrowRight' || k === 'KeyD') { ev.preventDefault(); hop.R = down; }
+      }
+      cv.addEventListener('keydown', function (ev) { key(ev, true); });
+      cv.addEventListener('keyup', function (ev) { key(ev, false); });
+      cv.addEventListener('blur', function () { hop.L = hop.R = false; });
+      cv.addEventListener('pointerdown', function (ev) {
+        cv.focus();
+        var r = cv.getBoundingClientRect(), fx = (ev.clientX - r.left) / (r.width || 1);
+        if (fx < 0.33) hop.L = true; else if (fx > 0.67) hop.R = true; else hopJump();
+      });
+      ['pointerup', 'pointerleave', 'pointercancel'].forEach(function (t) { cv.addEventListener(t, function () { hop.L = hop.R = false; }); });
+      /* the on-screen pad: hold to steer; a keyboard press on a pad button nudges */
+      function pad(id, side) {
+        var b = $(id);
+        b.addEventListener('pointerdown', function (ev) { ev.preventDefault(); hop[side] = true; });
+        ['pointerup', 'pointerleave', 'pointercancel'].forEach(function (t) { b.addEventListener(t, function () { hop[side] = false; }); });
+        b.addEventListener('click', function (ev) {
+          if (ev.detail === 0 && hop.p) hop.p.x = Math.max(10, Math.min(hop.w - 10, hop.p.x + (side === 'R' ? 36 : -36)));
+        });
+      }
+      pad('hopLeft', 'L'); pad('hopRight', 'R');
+      $('hopJump').addEventListener('click', hopJump);
+      document.addEventListener('visibilitychange', function () { if (!document.hidden) hopStart(); });
+      window.addEventListener('resize', function () { if (hop.target === 'wait') { hop.sky = null; hopStart(); } });
+    })();
+
     /* ── the hub's three doors ── */
     function createdRecord() {
       try { return JSON.parse(sessionStorage.getItem(CREATED_KEY) || 'null'); } catch (e) { return null; }