fix(site): 스파인 뒤 62dvh 여백을 없애고 게이트 진행도를 목록 기준으로 잰다

진행도를 섹션 높이로 재고 있어서, 여섯 게이트를 다 돌리려면 정거장 목록 뒤에
화면 절반이 넘는 빈 공간(558px)이 필요했다. 콘텐츠가 아니라 스크롤 연료였고
화면에서는 그냥 큰 빈칸으로 보였다.

진행도를 목록이 화면을 지나는 구간으로 바꿨다.
  start = 뷰포트 70% 지점에 목록 위쪽이 닿으면 0
  end   = 뷰포트 30% 지점을 목록 아래쪽이 빠져나가면 1
  travel = 목록 높이 + (start - end)

뷰포트의 40% 가 구간으로 더해지므로, 목록 963px 이 1323px 구간이 되고
게이트당 220px 이다. 여백을 다 지우고도 과민 반응 기준(200px)을 넘긴다.

motion.md 에 "스크롤 구간이 모자라면 여백이 아니라 진행도 공식을 고쳐라" 를
기록했다.

apps/site/src/lib/gate-scene.ts

@@ -319,14 +319,20 @@ async function boot({ canvas, accentVar, glowVar, onGate, progressFrom }: GateSc
     // rect 는 프레임당 한 번만 읽는다. 두 번 읽으면 레이아웃을 두 번 강제한다.
     const rect = (progressFrom ?? canvas).getBoundingClientRect();
     // 진행 거리.
-    //   progressFrom 이 있으면 캔버스는 sticky 로 화면에 붙어 있고 섹션이 지나간다.
-    //   이때 캔버스가 실제로 화면에 머무는 거리는 (섹션 높이 - 뷰포트 높이)다.
-    //   섹션 높이를 그대로 쓰면 캔버스가 사라진 뒤에도 진행이 남아 마지막 게이트에
-    //   영영 도달하지 못한다 — 실측에서 6단계 중 3단계에서 멈췄다.
+    //   한때 (섹션 높이 - 뷰포트)로 쟀다. 그러면 진행 구간이 섹션 길이에 묶여서,
+    //   게이트를 다 돌리려면 목록 뒤에 62dvh 짜리 빈 공간을 둬야 했다.
+    //   화면 절반이 넘는 여백이 생기고, 그건 콘텐츠가 아니라 스크롤 연료였다.
+    //
+    //   대신 **읽는 대상이 화면을 지나는 동안**으로 맞춘다.
+    //   위 70% 지점에 닿으면 0, 아래 30% 지점을 빠져나가면 1.
+    //   목록이 눈앞에 있는 동안만 게이트가 돌아서 빈 공간이 필요 없다.
+    const start = innerHeight * 0.7;
+    const end = innerHeight * 0.3;
     const travel = progressFrom
-      ? Math.max(rect.height - innerHeight, 1)
+      ? rect.height + (start - end)
       : rect.height * 0.92;
-    const progress = Math.min(Math.max(-rect.top / travel, 0), 1);
+    const offset = progressFrom ? start - rect.top : -rect.top;
+    const progress = Math.min(Math.max(offset / travel, 0), 1);
 
     bgUniforms.uProgress.value = progress;
     bgUniforms.uTime.value = t;