customer-presentation/MERGE_NOTES.md

# project-bifrost — merge notes

Site 2 (the 6-scene editorial scroll) has been merged into the Timeline's
Overview page. Timeline and Archive pages are **untouched**. Auth, CSP, and
all of `src/`, `server.js`, `deploy/` are untouched.

## Deploy — what to rsync where

From the project root on your laptop, copy the contents of this `protected/`
folder into `project-bifrost/protected/` on the VPS, preserving structure:

```
protected/
├── index.html                     ← REPLACED (timeline + 6 Bifrost scenes)
├── timeline.js                    ← REPLACED (adds `.js` class + bifrost lazy-boot)
├── bifrost.js                     ← NEW
├── vendor/
│   ├── lenis.min.js               ← NEW
│   ├── gsap.min.js                ← NEW
│   └── scrolltrigger.min.js       ← NEW
│   (d3-array, d3-geo, topojson-client, countries-110m are UNCHANGED; do not overwrite)
└── fenja/
    └── illustrations/             ← NEW FOLDER
        ├── community.svg
        ├── council.svg
        └── pilot.svg
```

After `rsync`, run the usual:
```
sudo chown -R fenja:fenja /opt/fenja
sudo systemctl restart fenja
sudo journalctl -u fenja -n 20
```

## What changed, concretely

1. **`protected/index.html`** — rewrote `#page-overview` only.
   - Europe map (`.overview-globe`) stays as absolute-positioned background.
   - Added `<div id="overview-scroll">` — the new internal scroller. All six
     Bifrost scenes live inside it. Lenis + ScrollTrigger are wired to this
     element, never `window`.
   - Removed the four editorial paragraphs + meta-strip ("Notes on a quiet
     inheritance" / entries / period / editor) — replaced by the Bifrost
     scenes in scroll order.
   - Site-1 palette applied via `#page-overview { --ink: #383831; --paper:
     #faf6ee; ...; --aurora-*: site-1 Archival Pigments; }`. Tokens are
     scoped to `#page-overview` only — they do **not** leak to the
     timeline or archive pages.
   - All `Fraunces` references replaced with `Newsreader`.
   - Site-2's top-left brand mark, top-right meta chip, and right-edge
     progress rail removed (would clash with site 1's site-mark + dot-nav).
   - Footer centre logo: swapped inlined Fenja SVG for
     `<img src="/fenja/fenja-wordmark-black.svg">`.
   - Innovationsfonden remains the redrawn placeholder — swap when the
     real asset arrives.
   - Illustration references: the big PNG data URIs in site 2's CSS were
     replaced with three `url("/fenja/illustrations/*.svg")` references
     pointing to the new illustration files.
   - Timeline section (`#page-timeline`) and Archive section
     (`#page-archive`) are byte-identical to the previous version.

2. **`protected/timeline.js`** — two changes only.
   - Added `document.documentElement.classList.add('js')` at the top so
     site-2's `.js .some-element { opacity: 0 }` hide-before-reveal rules
     work. Harmless to timeline (nothing there uses `.js`).
   - Dot-nav click handler wrapped into `activatePage(targetId)`. When
     `targetId === 'page-overview'`, it calls `window.__bifrost.init()`
     after a 60ms delay (lets the page-activation transition start).
     `init()` is idempotent — subsequent activations just trigger a
     `ScrollTrigger.refresh()`.
   - The "Read the editor's note" button's existing behaviour
     (`document.querySelector('.dot-btn[data-target="page-overview"]').click()`)
     routes through `activatePage` now, so clicking the button both
     activates the overview **and** boots the bifrost scenes.

3. **`protected/bifrost.js`** (NEW) — single-file CSP-compliant module.
   - Exposes `window.__bifrost.init()`. No auto-exec.
   - Creates a `new Lenis({ wrapper: scroller, content: scroller.firstElementChild, ... })`
     scoped to `#overview-scroll`.
   - Registers a `ScrollTrigger.scrollerProxy(scroller, ...)` and sets
     `ScrollTrigger.defaults({ scroller })` so every ScrollTrigger the
     site-2 code registers targets the overview's internal scroll.
   - Europe-map opacity is driven from Lenis's scroll event:
     - `scrollTop = 0` → 0.42 opacity (site-1's original "active" value)
     - between `0.2 × vh` and `0.8 × vh` → ramps to 0
     - scrolling back up → fades back in
     - The map does **not** rotate with scroll — it's static.
   - Reduced-motion: short-circuits to "content visible, map at 0.42, no
     animations" and bails before registering any ScrollTriggers.
   - All site-2 scene logic (HERO reveal, pinned 4-card stack, word
     fly-ins, aurora arc draw-in, treasure-map path draw-in + per-stop
     reveals, Join CTA + confirmation crossfade) transplanted verbatim.

4. **`protected/vendor/{lenis,gsap,scrolltrigger}.min.js`** (NEW) — the
   three libraries extracted verbatim from site 2's inlined vendor blobs.
   Served with `defer` so they load and execute before `bifrost.js` and
   `timeline.js`. (Script order at the bottom of `index.html`:
   lenis → gsap → scrolltrigger → bifrost → timeline.)

5. **`protected/fenja/illustrations/{community,council,pilot}.svg`** (NEW)
   — the three illustrations you uploaded, renamed for site-2's slot
   names. ~1.7 MB each (SVG wrappers around embedded PNGs).

## What I did NOT touch

- `src/` (auth, db, mail, middleware, sessions) — byte-identical.
- `server.js` — byte-identical. The request-routing order, CSP headers,
  and `requireAuth` gate are preserved exactly.
- `deploy/` — byte-identical.
- `public/entrance.html`, `public/entrance.js` — byte-identical.
- `protected/fenja/colors_and_type.css` — byte-identical. (The Bifrost
  scenes' tokens live in `index.html`'s own `<style>` block, scoped
  to `#page-overview`.)
- `protected/fenja/fonts/*` — byte-identical.
- `protected/archive.html`, `protected/archive.js` — byte-identical.
- `protected/vendor/{d3-array,d3-geo,topojson-client,countries-110m}*` —
  byte-identical. The new vendor libs are added **alongside** these.

## Security posture

CSP is `script-src 'self'` per `server.js`. The merged page contains **zero**
inline `<script>` tags — verified. All JS is in separate `.js` files served
from `/vendor/...` or `/`.

Auth gate is unchanged: `requireAuth` runs before `express.static(protected)`,
so the merged page is fully gated by the session cookie. The protected
directory's structure didn't change.

## What to spot-check after deploy (from `CHECKLIST.md` section B + D)

Primary smoke test:
- [ ] Login flow still works: `/` → email → code → welcome → click "Learn
      more" button → timeline loads as before.
- [ ] Timeline page unchanged: 23 headlines, globe rotates with wheel
      scroll, "Read the editor's note" button appears when scrolled to
      the end.
- [ ] Click "Read the editor's note" → overview activates. Europe map
      fades in on the right. Left column shows the new site-2 hero
      headline: "Secure & **Sovereign** AI, hosted where it **belongs**."
- [ ] Scroll inside the overview page — Europe map fades out between
      ~20 % and ~80 % of the first viewport scroll.
- [ ] Scroll back up — Europe map fades back in.
- [ ] Keep scrolling past the hero — the 4 architecture layer cards fall
      in, stack, then rearrange into a 2×2 grid (pinned scrub).
- [ ] Words fly in one by one.
- [ ] Project Bifrost aurora arc draws across, "Project Bifrost" headline
      appears.
- [ ] Treasure-map with 3 stops: Community / Advisory Council / Pilot
      Projects. Path draws in as you scroll. Each stop's illustration
      fades in on reach.
- [ ] Join CTA visible. Clicking "Join Project Bifrost" crossfades to
      the confirmation panel with 4 list items.
- [ ] Three-column footer at the very bottom: "Project Bifrost" (left),
      Fenja AI logo (centre), Innovationsfonden placeholder (right).
- [ ] Click dot-nav "Archive" — the 23-row archive table still works.
- [ ] Click dot-nav "Timeline" — back to the horizontal-scroll timeline.
- [ ] DevTools console: no CSP violations, no 404s. Check that
      `/bifrost.js`, `/vendor/lenis.min.js`, `/vendor/gsap.min.js`,
      `/vendor/scrolltrigger.min.js`, and all three illustration SVGs
      return 200.
- [ ] Response headers on `/timeline` still include the full six security
      headers (CSP with `script-src 'self'`, etc.). `curl -I
      https://project-bifrost.fenja.ai/timeline` should look identical
      to before.

## Known limitations

- **Innovationsfonden logo** is still a hand-drawn placeholder. Swap when
  the real asset is ready — replace the SVG + span block in the
  `.foot-innov` div in `index.html` (search for `foot-innov`).
- **Illustration file sizes** are large (~1.7 MB each — SVG wrappers
  around embedded PNGs). The gated page is slow to first-paint the
  treasure-map if bandwidth is constrained. Consider exporting flat
  PNGs later and swapping the `url(...)` in the `#page-overview
  { --illust-*: ... }` block in `index.html`.
- **Scene 2 (architecture stack)** uses `pin` with `pinType: 'transform'`
  to work inside the nested scroller. This is the correct setting for
  overflow-auto containers but means the pinned card's `position` during
  pinning is transform-based. If layout looks off on Firefox or Safari
  specifically, the first thing to investigate is the pin behaviour.
- **Resize behaviour**: we consolidated site-2's two separate resize
  listeners into one debounced `ScrollTrigger.refresh()` 220ms after the
  last resize event. If you see ScrollTrigger positions drifting on
  fast/rapid resize, the de-duper can be tuned in `bifrost.js`
  (`setTimeout(scheduleRefresh, 220)`).
- **Performance**: inlining vendor libs in site 2 was ~135 KB. They're now
  served as three separate cacheable files (~135 KB uncompressed, ~50 KB
  gzipped). Nginx `gzip` should already cover them.