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

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

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

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

apps/site/src/layouts/Base.astro

@@ -144,11 +144,12 @@ const FAVICON =
   /* 상단에 붙은 풀블리드 바 대신 떠 있는 헤더 */
   /* 상단에 붙은 바가 아니라 떠 있는 유리 알약 */
   .site-header {
-    position: sticky;
+    position: fixed;
     top: var(--space-3);
+    left: 0;
+    right: 0;
     z-index: 3;
     padding-inline: var(--space-4);
-    margin-top: var(--space-3);
   }
   .header-inner {
     max-width: 1180px;