스크롤에 따라 펼쳐지는 미디어 섹션 네 가지

너는 이 저장소에서 작업하는 프론트엔드 엔지니어다. 아래 지시를 읽고 먼저 계획을 3줄로 말한 뒤 바로 파일을 만들어라. 질문은 정말 막힐 때 한 번만 해라.

# 작업: 스크롤에 따라 펼쳐지는 미디어 섹션 네 가지

## 언제 쓰는 작업인가
영상이나 사진이 주인공인 페이지에 쓴다. 스튜디오 소개, 제품 필름, 공간 촬영처럼 화면을 크게 보여 줘야 설득되는 것들이다. 네 연출이 서로 독립이라 하나만 떼어 써도 되고 순서를 바꿔도 된다.

## 준비물(이미 갖춰져 있다고 가정)
- 새 프로젝트다. Next.js 는 1번 뼈대가 깔려 있고, HTML 은 빈 index.html 에서 시작한다
- 구간마다 넣을 문구가 있다. 바깥 제목 한 벌, 펼쳐진 뒤 안쪽 문구 한 벌
- 16:9 영상이 있으면 쓴다. 없으면 이 프롬프트가 CSS 로 그린 풍경을 대신 쓴다
- GSAP·ScrollTrigger·Framer Motion 은 설치하지 않는다

## 건드릴 범위
스크롤 구간 네 개와 그 아래 설명 목록, 마감 CTA 까지다. 가로 스크롤이나 스크롤 가로채기는 만들지 않는다. 사용자가 스크롤을 굴린 만큼만 화면이 움직인다.

## 결과가 이렇게 보여야 한다
거의 검은 배경 위에서 구간마다 화면이 다르게 열린다. 첫 구간은 가운데 작은 창으로 시작해 사방으로 열리며 화면을 채우고, 바깥 제목이 사라진 뒤 안쪽 문구가 떠오른다. 둘째 구간은 큰 제목 두 줄이 위아래로 밀려나고 그 틈에서 화면이 자란다. 셋째 구간은 아홉 조각이 제각기 기울어 흩어져 있다가 제자리로 모여 한 장이 된다. 넷째 구간은 작은 원이 커져 화면을 덮는다. 왼쪽 가장자리에는 구간 번호가 세로로 서 있다.

## 구현 순서
1. 구간 하나의 뼈대를 먼저 만든다. 바깥 .stage 에 280vh~340vh 높이를 주고, 그 안의 .pin 을 position sticky·top 0·height 100svh·overflow hidden 으로 붙인다. .pin 이 화면에 머무는 동안 .stage 를 지나가는 스크롤이 연출의 입력이 된다. 구간 네 개가 모두 같은 구조다.
2. 진행도를 구한다. .stage 의 getBoundingClientRect().top 을 음수로 뒤집고 (.stage 높이 - .pin 높이) 로 나눈 뒤 0 과 1 로 자른다. 보조 함수 at(p, a, b) 를 만들어 전체 진행도에서 구간 [a,b] 만 0→1 로 다시 늘려 쓴다. 이것 하나로 '앞부분에서는 제목이 사라지고 뒷부분에서 안쪽 글이 올라온다' 같은 순서를 만든다.
3. 스크롤 처리는 한 프레임에 한 번만 한다. scroll 을 { passive: true } 로 듣고, 이미 예약된 프레임이 있으면 건너뛰는 자물쇠 변수 하나를 두고 requestAnimationFrame 안에서 전부 그린다. 각 구간은 화면 위아래 200px 안에 들어왔을 때만 계산한다.
4. 01 창 확장: 미디어를 덮은 요소에 clip-path inset(y% x% y% x% round r) 을 걸고 네 값을 함께 줄인다. 시작은 x 34%·y 30%·모서리 14px, 끝은 전부 0 이다. 같이 scale 을 1.16 에서 1 로 줄이면 창이 열리면서 화면이 제자리를 찾는 느낌이 난다. 바깥 제목은 진행도 0.02~0.34 구간에서 사라지고, 안쪽 문구는 0.62~0.9 구간에서 올라온다.
5. 02 글자 갈라짐: 제목 두 줄을 각각 translateY 로 위아래로 밀어낸다. 미는 거리는 화면 높이의 0.42 배까지다. 동시에 가운데 미디어의 width 를 화면 폭의 20% 에서 100% 로, height 를 화면 높이의 6% 에서 100% 로 키우고 모서리를 10px 에서 0 으로 편다. 글자는 0.62~0.92 구간에서 사라진다. 가운데 정렬에 함정이 하나 있다. .pin 을 display grid·place-items center 로 두면 position absolute 인 자식도 그 정렬의 영향을 받아 가운데에서 밀린다. 미디어 상자는 left/top 대신 inset 0 에 margin auto 를 주고 width·height 만 바꿔야 정확히 가운데에서 자란다.
6. 03 타일 합체: 3×3 조각을 만들고 각 조각 안에 300% 크기의 같은 장면을 넣되 -열*100%, -행*100% 만큼 밀어 둔다. 조각이 제자리에 모이면 아홉 장이 이어져 한 장이 된다. 흩어진 시작 위치는 고정 난수로 정한다. (행*3+열+1)*9301 을 233 으로 나눈 나머지를 각도로 바꿔 쓰면 새로고침해도 같은 자리에서 모인다.
7. 03 의 도착 시차: 조각마다 진행도를 (q - (i%5)*0.04) / 0.84 로 조금씩 늦춘다. 아홉 개가 동시에 딱 붙으면 기계처럼 보이고, 너무 벌리면 마지막 조각을 기다리게 된다. 모이는 동안 scale 을 0.62 에서 1 로, 모서리를 8px 에서 0 으로, 불투명도를 0.25 에서 1 로 함께 움직인다.
8. 04 원형 확장: clip-path circle(반지름 at 50% 50%) 의 반지름을 화면 높이의 5% 에서 화면 대각선의 절반까지 키운다. 퍼센트가 아니라 대각선을 쓰는 이유는 어떤 화면 비율에서도 네 귀퉁이가 반드시 덮이기 때문이다.
9. 미디어는 CSS 장면을 바닥에 깔고 그 위에 실사 영상을 덮는다. 장면은 하늘 그라디언트 한 겹, 흐릿한 해 하나, clip-path polygon 으로 그린 능선, 3px 간격 점 무늬로 만든다. 영상 요소는 그 위에 object-fit cover 로 얹어 두면, 영상 파일이 없거나 못 받아도 아래 장면이 그대로 보인다. 영상은 IntersectionObserver 로 화면에 들어온 것만 재생한다. 넷을 동시에 돌리면 스크롤이 끊긴다.
10. prefers-reduced-motion 이면 sticky 를 풀고 .stage 높이를 auto 로 되돌린 뒤 네 연출을 모두 펼친 상태로 한 번만 그린다. 스크롤에 묶인 화면은 움직임에 민감한 사람에게 특히 불편하다.

## 기본값(필요하면 바꿔라)
- 구간 높이: 280vh ~ 340vh (바꿀 수 있는 범위: 200vh ~ 500vh(길수록 천천히 열린다))
- 창의 시작 크기: 가로 32% · 세로 40% (바꿀 수 있는 범위: 20% ~ 60%)
- 제목이 벌어지는 거리: 화면 높이의 0.42배 (바꿀 수 있는 범위: 0.25 ~ 0.6)
- 타일 도착 시차: 0.04 (바꿀 수 있는 범위: 0 ~ 0.1(0 이면 아홉 개가 동시에 붙는다))
- 안쪽 글이 나오는 시점: 진행도 0.62 (바꿀 수 있는 범위: 0.45 ~ 0.8)

## 하지 말 것
- GSAP ScrollTrigger·Framer Motion 을 설치하지 않는다. 진행도 계산이 네 줄이고 나머지는 스타일 대입이다.
- 스크롤을 가로채 특정 위치로 끌어당기지 않는다. 사용자가 굴린 만큼만 움직여야 한다.
- scroll 이벤트 안에서 곧바로 스타일을 바꾸지 않는다. requestAnimationFrame 한 프레임에 한 번으로 묶는다.
- grid 인 부모 안에서 absolute 자식을 left 50% + translateX(-50%) 로 가운데 두지 않는다. place-items 와 겹쳐 자리가 밀린다.
- 구간마다 높이를 500vh 이상으로 잡지 않는다. 아무 일도 안 일어나는 구간이 길어져 이탈한다.
- 영상만 믿고 배경을 비워 두지 않는다. 파일을 못 받으면 검은 화면만 남는다.

## 출력 규칙 (HTML 단일 파일)
- 결과는 index.html 파일 하나로 저장한다. 외부 CDN 을 쓰지 않고 CSS·JS 를 파일 안에 넣는다.
- HTML 파일 하나로 완결한다. 별도 CSS·JS 파일을 만들지 않는다.
- 폰트는 시스템 폰트 스택을 기본으로 쓰고, 한글은 'Pretendard Variable', 'Apple SD Gothic Neo', 'Malgun Gothic' 순으로 폴백한다.
- 색·간격·둥글기는 :root 의 CSS 변수로 모아 두고, 본문에서는 변수만 참조한다.
- 1200px 데스크톱과 400px 모바일에서 가로 스크롤이 생기지 않아야 한다.
- 움직임은 prefers-reduced-motion 을 존중한다.

끝나면 만든 파일 목록과 브라우저에서 확인할 URL 을 한 줄씩 적어라.