배경을 뷰포트에 고정하고, 게이트 씬을 파이프라인으로 옮긴다

"스크롤할 때 이미지가 고정되어 원경처럼 보이는 게 패럴랙스의 꽃"이라는
지적이 맞았다. 느리게 같이 움직이는 것으로는 그 인상이 안 나온다 —
속도만 다를 뿐 방향이 같기 때문이다.

고정 배경
  background-attachment: fixed 는 iOS Safari 가 GPU 메모리 때문에
  throttle 해서 스크롤 중 배경이 튄다. 쓰지 않았다.
  섹션에 clip-path: inset(0) 을 걸어 position: fixed 의 컨테이닝 블록으로
  만들었다. 배경이 화면에 멈춘 채 그 섹션 안에서만 보인다.
  실측: 스크롤 1000px 구간에서 viewportTop 이 계속 0.

  대가 둘을 받아들였다
    조상에 transform/filter/mask 를 못 쓴다 — 페이드 마스크를 포기했다
    prefers-reduced-motion 에서는 absolute 로 되돌린다

  전부 고정하지는 않았다. 종이는 손에 닿는 거리라 원경으로 두면 거짓말이다
    재료·설치·프리플라이트  fixed  원경
    사례                    drift  두 결과물이 흐르는 자리
    조판                    drift  종이는 가깝다

게이트 씬을 파이프라인으로
  히어로에서는 의미를 판독기가 자막으로 설명해야 했다. 그림이 스스로
  말하지 못한다는 뜻이다. 옆에 여섯 단계가 적힌 자리로 옮기니 자막이
  필요 없어졌다 — 판을 통과하면 그 단계가 켜진다.

  캔버스는 sticky, 진행도는 섹션에서 읽는다.
  travel 을 섹션 높이로 잡았더니 캔버스가 사라진 뒤에도 진행이 남아
  6단계 중 3단계에서 멈췄다. (섹션 높이 - 뷰포트 높이)로 고쳤다.
  캔버스 위 텍스트 대비 14.2:1.

스킬
  motion.md  패럴랙스의 원형은 고정 · clip-path 기법과 그 대가
             sticky 캔버스의 진행도 계산
  three.md   씬의 의미는 옆의 콘텐츠가 반응할 때 성립한다.
             자막이 필요하면 배치를 의심해라

apps/site/design.md

@@ -221,6 +221,47 @@ WebGL 게이트: `prefers-reduced-motion` 이면 **아예 시작하지 않는다
 한 층은 반드시 고정이다 — 파이프라인의 단계명은 움직이지 않는다.
 전부 움직이면 기준이 없어 그냥 흔들리는 페이지가 된다.
 
+### 패럴랙스를 "고정"으로 바꿨다
+
+세 번 고친 뒤에도 티가 나지 않았다. 원인은 **방식 자체**였다 —
+느리게 같이 움직이는 것으로는 원경이 안 된다. 속도만 다를 뿐 방향이 같기 때문이다.
+
+**배경을 뷰포트에 고정한다.** `background-attachment: fixed` 는 iOS Safari 가 throttle 하므로
+쓰지 않고, 섹션에 `clip-path: inset(0)` 을 걸어 **`position: fixed` 의 컨테이닝 블록**으로 만든다.
+그러면 배경이 화면에 멈춘 채 그 섹션 안에서만 보인다.
+
+실측: 스크롤 1000px 구간에서 배경의 `viewportTop` 이 계속 **0**.
+
+대가가 둘 있고 둘 다 받아들였다.
+
+- **조상에 `transform`·`filter`·`mask` 를 못 쓴다.** 그것들도 컨테이닝 블록을 만들어
+  고정을 깨뜨린다. 그래서 위아래 페이드 마스크를 포기하고 경계는 clip 으로 딱 자른다
+- `prefers-reduced-motion` 에서는 `position: absolute` 로 되돌린다
+
+**전부 고정하지는 않았다.** 원경과 중경을 나눴다.
+
+| 섹션 | 모드 | 왜 |
+|---|---|---|
+| 재료 · 설치 · 프리플라이트 | `fixed` | 원경. 콘텐츠만 그 위를 지나간다 |
+| 사례 | `drift` 0.4 | 두 결과물이 흐르는 자리라 배경도 같이 흐른다 |
+| 조판 | `drift` 0.25 | **종이는 손에 닿는 거리다.** 원경으로 두면 거짓말이 된다 |
+
+### 게이트 씬을 파이프라인으로 옮겼다
+
+히어로에서 뺐던 유리판 여섯 장을 여기로 되살렸다. **같은 씬인데 자막이 필요 없어졌다.**
+
+| | 히어로에 뒀을 때 | 파이프라인으로 옮긴 뒤 |
+|---|---|---|
+| 옆에 있는 것 | 헤드라인과 CTA | **여섯 단계의 실제 이름** |
+| 의미 전달 | `게이트 01 / 06` 판독기 — 자막 | 판을 통과하면 그 단계가 켜진다 |
+
+캔버스는 `position: sticky; height: 100dvh` 로 화면에 머물고 섹션이 지나간다.
+**진행도는 섹션 높이가 아니라 (섹션 높이 − 뷰포트 높이)로 잰다.**
+섹션 높이로 나눴더니 캔버스가 사라진 뒤에도 진행이 남아 6단계 중 **3단계에서 멈췄다.**
+그리고 기준 요소는 캔버스가 아니라 섹션이다 — sticky 캔버스는 자기 rect 가 변하지 않는다.
+
+캔버스 위 텍스트 대비 실측 **14.2:1**(캔버스 불투명도 0.7).
+
 ### 패럴랙스가 세 번 실패한 경위
 
 **1. 이동량이 모자랐다.** 여유를 28% 잡아놓고 `±46px`(총 92px)만 움직였다.