헤더 상단 검은 띠 제거 · 패럴랙스 · 히어로 3D 유리 씬

헤더가 문서 흐름에 있어서 그 위 공간이 히어로 광원 밖으로 남았다.
화면에서 검은 띠로 보였다. 헤더를 띄우고 히어로가 최상단부터 차오르게 했다.

패럴랙스는 scroll-driven animation 으로만 만든다. scroll 리스너를 쓰지 않고
transform 만 움직이므로 미지원 브라우저에서는 제자리에 그대로 있다.

히어로 3D 는 배경을 렌더 타겟에 굽고 유리 판이 그 텍스처를 왜곡 샘플링한다.
transmission 재질이 매 프레임 씬을 재렌더하는 비용을 피한 구조다.

apps/site/src/styles/base.css

@@ -271,6 +271,28 @@ a:hover { color: var(--accent); }
   .reveal.is-in { transform: none; }
 }
 
+/* ---- 패럴랙스 -----------------------------------------------
+   scroll-driven animation 으로만 만든다. scroll 리스너는 쓰지 않는다.
+   움직이는 것은 transform 뿐이라 지원되지 않는 브라우저에서는
+   요소가 제자리에 그대로 있다. 콘텐츠가 사라질 수 없다. */
+@media (prefers-reduced-motion: no-preference) {
+  @supports (animation-timeline: view()) {
+    .par-slow,
+    .par-fast {
+      animation: par linear both;
+      animation-timeline: view();
+      animation-range: cover 0% cover 100%;
+      will-change: transform;
+    }
+    .par-slow  { --par-from: 26px;  --par-to: -26px; }
+    .par-fast  { --par-from: 58px;  --par-to: -58px; }
+    @keyframes par {
+      from { transform: translate3d(0, var(--par-from), 0); }
+      to   { transform: translate3d(0, var(--par-to), 0); }
+    }
+  }
+}
+
 /* ---- 유틸 -------------------------------------------------- */
 .visually-hidden {
   position: absolute;