customer-presentation/CHANGES 2.md

Site update v3 — Welcome dot, smaller cards, parallax topography, sticky scroll, hero polish

Six changes land together. All in protected/. Server-side untouched.

Files to replace

File	What changed
protected/index.html	Welcome dot added; card sizes reduced 15%; topography layer added (markup + CSS); hero padding reduced; hero-foot restructured (moved into left column, arrow points down)
protected/timeline.js	Dot-nav click handler now supports external-* targets (Welcome routes back to /); setActiveDot skips external dots
protected/bifrost.js	cellSize and targetW adjusted for the shrunk grid; topography SVG generator + parallax driver added; sticky-scroll velocity damping added for non-pinned scenes

Change-by-change

1. Welcome dot (nav position 1)

• 8th dot, placed FIRST in the dot-nav (before Timeline).
• On click, navigates to / — the entrance page. Since the user's session is still valid, they land on the welcome step with the "Learn more" button.
• Never shows as active — even when scrolling /timeline, the Welcome dot stays in the default outlined state. It's a navigation link, not a section marker.
• HTML: <button class="dot-btn" data-target="external-welcome" data-href="/">
• JS: timeline.js's click handler recognises external-* prefixes and uses window.location.href instead of the page-switching flow.

2. Cards shrunk 15%

Applies to both animation phases:

Drop phase (.layer-card + .card-box):

• Cards previously spanned left: 0 / right: 0. Now have 7.5% margin on each side (= 15% total width reduction).
• .card-box padding reduced from clamp(1.75rem, 3.2vw, 2.8rem) → clamp(1.5rem, 2.7vw, 2.4rem).
• min-height reduced from 240px → 204px.
• Content gap slightly tightened.

Grid phase (.in-grid .card-box):

• width: 20vw → width: 17vw. Matching max-width and inner padding also reduced.

bifrost.js (the two places that compute grid geometry):

• cellSize = vw * 0.20 → vw * 0.17 (line ~298)
• targetW = vw * 0.20 → vw * 0.17 (line ~423)

3. Parallax topography layer

• New <div id="overview-topography"> sits inside #page-overview, at z-index: 0 — behind the Europe map (z-index 1) and all content (z-index 2+).
• At init, bifrost.js draws 34 concentric rings (each with multi-harmonic sinusoidal distortion) into the SVG. Path coordinates match the entrance page's "currents" generator — intentionally a visual sibling — but with altered parameters:
  • 34 rings (vs 26 on entrance), tighter 28px step, larger 32px amplitude
  • Positioned with bottom-left anchor (entrance uses top-right)
  • Rotated 40° via CSS so the harmonic pattern reads as distinct from the entrance
  • Lower opacity (0.04 / 0.07) — it sits behind the map, shouldn't compete
• Parallax: driven from lenis.on('scroll'), translating the SVG by scrollTop * -0.15 pixels (very slow — the layer barely moves, feels like atmospheric depth).
• The CSS rotate(40deg) is composed WITH the JS translateY() in a single transform string so neither clobbers the other.

4. Sticky scroll (non-pinned scenes only)

• Velocity-damping hook on lenis.on('scroll'). When a non-pinned scene's vertical midpoint is within ±20% of viewport height from the viewport center, damping engages.
• While engaged: multiplies Lenis's velocity by 0.82 per frame. The scene appears to "hold" the scroll briefly.
• Hard cap: 300ms per scene entry. No scene can hold the user for longer than that — even if they stop scrolling in the zone, the damping window expires.
• Re-armed when scene leaves the zone. Each entry gets a fresh 300ms window.
• Excluded scenes: stack-scene (S2) is already pinned + scrubbed by GSAP ScrollTrigger; damping on top would make its card-fall feel sluggish. Included: hero, words-scene, bifrost, bifrost-meaning, bifrost-join.
• Implementation is in bifrost.js init, as part of the Lenis scroll subscribers.

5. Hero text moved up

• #hero padding-top: clamp(7rem, 14vh, 11rem) → clamp(3.5rem, 7vh, 5.5rem).
• #page-overview #hero .hero-wrap padding-top: clamp(6rem, 16vh, 12rem) → clamp(3rem, 8vh, 6rem).
• The overview-specific rule is the more-specific selector — it's the one that actually wins on the Overview page. Both updated so a future refactor doesn't accidentally reintroduce the low position.
• Text size, weights, kerning: untouched.

6. Hero footer restructured

Before: <div class="hero-foot"> was position: absolute; bottom: 0 — a separate row spanning the full viewport width. "Supported by" on the left, "Scroll →" (with horizontal right-arrow) on the right.

After: Moved INSIDE the left column, placed immediately after the lede paragraph:

[eyebrow]
[headline]
[lede paragraph]
                                ← margin-top: clamp(2rem, 5vh, 3.5rem)
[Supported by [Innov]]           [↓ Scroll]
  ↑ same baseline                  ↑ aligned to right edge of left column

• .hero-foot is now display: flex; justify-content: space-between; align-items: baseline. Both items share the baseline of "Supported by".
• .scroll-hint .arrow rotated to vertical: width: 1px; height: 28px. The ::after chevron cap moved from top-right (pointing right) to bottom-left corner, rotated 45° to point down.
• @keyframes hint: translateX(6px) → translateY(6px). The arrow now bounces downward, matching its new meaning.
• Mobile fallback override simplified (no longer needs position: static since the element is no longer absolutely positioned).

Spot-check after deploy

Nav + Welcome dot

• 8 dots visible at bottom center.
• Leftmost dot, hover → tooltip reads "Welcome". Click → browser navigates to /, entrance welcome step renders.
• Second dot, hover → "Timeline". Click → Timeline page (P1) becomes active, Welcome dot stays in default state.
• Scroll through Overview. Watch the active dot cycle: Hero → Architecture → Words → Bifrost → Participate → Join. Welcome dot never lights up.

Cards

• S2 drop phase: cards appear visibly narrower than before (15% reduction — should be noticeable).
• S2 grid phase (scroll through the pin): the 2x2 grid is slightly smaller; text in copy panels doesn't overflow into the grid area.

Topography

• Open Overview page. Behind the Europe map, faint ring patterns visible in the paper — rotated, offset to bottom-left.
• Scroll slowly. The rings shift vertically at a much slower rate than the scene content — barely perceptible but present (parallax).
• The rings are visibly different from the entrance page's currents — rotated, denser, lower opacity.

Sticky scroll

• Scroll with a trackpad or mouse wheel through Overview. When a scene's middle is close to viewport-center, feel a brief slowdown (about 300ms).
• The effect is subtle — you can still scroll quickly through scenes with determined effort.
• Scene 2 (architecture, pinned) is NOT affected. Its scrubbed scroll speed is unchanged.
• No "hostile" feel. If it's too much, reduce DAMP_FACTOR from 0.82 → 0.88 in bifrost.js.

Hero

• Hero text (eyebrow, headline, lede) sits in the upper half of the viewport, closer to the site-mark.
• Below the lede, a row: "Supported by Innovationsfonden" on the LEFT, vertical-down "↓ Scroll" arrow on the RIGHT, same baseline.
• The arrow bounces DOWNWARD (translateY animation), not rightward.
• No absolutely-positioned element at the bottom of the hero viewport.

Tuning knobs

If any feel wrong after deploy:

Tuning	File	Default	Change to
Parallax speed	bifrost.js	PARALLAX_SPEED = 0.15	higher (faster) or lower (slower)
Topography density	bifrost.js	RINGS = 34, STEP = 28	reduce rings or increase step for sparser pattern
Topography opacity	bifrost.js	0.04 / 0.07	lower to fade further
Sticky damping strength	bifrost.js	DAMP_FACTOR = 0.82	0.88 for weaker, 0.75 for stronger
Sticky zone size	bifrost.js	DAMP_ZONE_VH = 0.20	0.15 narrower, 0.25 wider
Sticky hold duration	bifrost.js	DAMP_MAX_MS = 300	200–500
Hero text position	index.html	clamp(3rem, 8vh, 6rem)	increase for lower text

Things NOT touched

• public/entrance.html / entrance.js — unchanged. The currents pattern there remains the original.
• S2 card content, S3 sentence, S5/S6 content — unchanged.
• Auth flow, session, invite system — unchanged.
• Nav labels (Welcome, Timeline, Hero, Architecture, Words, Bifrost, Participate, Join) — unchanged.

Race condition to watch

There's a race window between timeline.js's /auth/me fetch and bifrost.js's init. If the user clicks the Overview dot before the fetch resolves, S3 may render with the no-name fallback even for a named invite. On refresh, the name appears correctly. Not critical — flagged in previous CHANGES.md. If this bites in practice, the fix is to await the fetch in the Overview activation path.