0013

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 럭셔리 리조트 웹사이트를 만들어줘. 리조트 이름은 "THE RESORT"이고, 전체적으로 어두운 시네마틱 톤에 화이트 텍스트를 활용한 미니멀 럭셔리 디자인으로 만들어줘.

프로그램 개요
총 5개 섹션으로 구성된 원페이지 스크롤 웹사이트야. 섹션 순서는 아래와 같아.

(1) Hero (전체화면 비디오 배경 인트로) (2) About (리조트 소개) (3) Gallery (시설 갤러리 - 3열 그리드) (4) Features (특징/체험 소개) (5) Footer (연락처 및 링크)

페이지 진입 시 비디오 기반 로딩 애니메이션이 있어야 해.

기능
2-1. 로딩 화면 페이지 처음 열리면 어두운 배경(#1a1a1a) 중앙에 "PARADISE" 텍스트가 흰색 세리프체로 표시되고, 그 뒤로 원형 영역 안에 비디오가 재생되면서 원이 점점 커져서 화면 전체를 덮는 애니메이션을 보여줘. 원형 비디오가 작은 원(50px)에서 시작해 약 4초에 걸쳐 120vw까지 확장되면서 border-radius도 사라지게 해줘. 텍스트는 2.5초 시점부터 페이드아웃 되게 하고, 4초 후 전체 로딩 화면이 페이드아웃으로 사라지게 해줘.

2-2. 네비게이션 상단 고정 네비게이션 바를 만들어줘. 왼쪽에 "THE RESORT" 로고(세리프체, letter-spacing 넓게), 오른쪽에 메뉴 링크들(Home, About, Villas, Experiences, Contact) 배치해줘. 로딩 완료 후 3.5초 시점에 위에서 아래로 페이드인 되면서 나타나게 해줘. 스크롤 100px 이상 내려가면 네비게이션 배경이 반투명 흰색(rgba 95%) + backdrop-filter blur로 바뀌면서 패딩이 줄어들고 그림자가 생기는 효과 넣어줘. 이때 로고와 메뉴 텍스트 색상도 흰색에서 다크(#2c2c2c)로 전환되게 해줘. 모든 앵커 링크에 부드러운 스크롤 적용하고, 메뉴 링크에 호버 시 아래쪽에 1px 라인이 왼쪽에서 오른쪽으로 펼쳐지는 언더라인 애니메이션 넣어줘. 768px 이하 모바일에서는 메뉴 링크 숨겨줘.

2-3. 스크롤 애니메이션 (Reveal) IntersectionObserver를 사용해서, About 섹션 제목과 본문, 갤러리 아이템들, Features 아이템들이 뷰포트에 들어올 때 아래에서 위로 페이드인 되며 나타나게 해줘. 갤러리 아이템은 0.1초씩, Features 아이템은 0.2초씩 순차 딜레이를 줘서 차례로 나타나게 해줘. rootMargin은 하단 -100px로 설정해서 요소가 조금 더 올라와야 트리거 되게 해줘.

디자인
3-1. 컬러 팔레트 메인 배경: #f5f5f0 (따뜻한 오프화이트) 다크 배경: #1a1a1a (로딩, 푸터용) 텍스트: #2c2c2c (본문) 연한 텍스트: #666 흰색: #fff (히어로 텍스트, 푸터 텍스트) 비디오 오버레이: rgba(0,0,0,0.3)

3-2. 서체 Google Fonts에서 아래 2개 불러와줘. Cormorant Garamond (300, 400, 500) → 제목, 로고, 로딩 텍스트 등 장식용 Montserrat (300, 400, 500) → 본문, 네비게이션, UI용 기본 body 서체는 'Montserrat', sans-serif로 해줘.

3-3. 전체 톤앤무드 고급 리조트 브로셔 느낌의 시네마틱하고 여유로운 분위기. 비디오 배경으로 몰입감을 주고, 텍스트는 가볍고 얇은 웨이트(font-weight 300) 위주로 사용해서 우아한 느낌을 연출해줘. letter-spacing을 넓게 주고, 전체적으로 여백을 넉넉하게 활용해줘.

3-4. 각 섹션 디자인 상세

(1) Hero 전체 화면(100vh), 배경에 비디오가 자동 재생(autoplay, muted, loop, playsinline)되게 해줘. 비디오 위에 반투명 어두운 오버레이를 깔고, 중앙에 흰색 텍스트로 큰 제목 "Escape to Paradise"(세리프, 5rem, 얇은 웨이트), 그 아래 "LUXURY REDEFINED" 서브타이틀(letter-spacing 넓게, 작은 크기), 그 아래 "DISCOVER MORE" 테두리 버튼 배치해줘. 히어로 콘텐츠는 로딩 후 3.8초 시점에 아래에서 위로 페이드인 되며 나타나게 해줘. 비디오와 오버레이도 3초~3.2초 시점에 각각 페이드인 되게 해줘.

(2) About 크림 배경(#f5f5f0), 최대 너비 1200px, 중앙 정렬. 세리프체 큰 제목 "A Sanctuary of Serenity"와 아래에 연한 회색의 소개 문단(최대 너비 800px, line-height 넓게) 배치해줘. 상하 패딩 8rem.

(3) Gallery 3열 그리드(gap 없음)로 6개 이미지 카드를 배치해줘. 각 카드는 정사각형(aspect-ratio 1:1)이고, 이미지가 카드를 꽉 채우게 object-fit: cover 적용해줘. 호버 시 이미지가 1.1배로 부드럽게 확대되면서, 어두운 오버레이(rgba(0,0,0,0.6))가 나타나고 그 위에 흰색 세리프체 제목과 영문 대문자 서브타이틀이 아래에서 위로 슬라이드인 되게 해줘. 6개 항목: Ocean Villa/BEACHFRONT LUXURY, Infinity Pool/ENDLESS VIEWS, Wellness Spa/REJUVENATION, Fine Dining/CULINARY EXCELLENCE, Private Beach/EXCLUSIVE ACCESS, Water Sports/ADVENTURE AWAITS. 768px 이하 모바일에서는 1열로 변경해줘.

(4) Features 흰색 배경(#fff), 최대 너비 1200px. auto-fit minmax(300px, 1fr) 그리드로 3개 특징을 배치해줘. 각 항목은 중앙 정렬이고, 상단에 80px 원형 배경(#f5f5f0) 안에 이모지 아이콘, 그 아래 세리프체 제목, 연한 회색 설명 텍스트. 3개 항목: 🌴 Tropical Paradise, 🏛️ Luxury Villas, 🍽️ World-Class Dining. 각각 짧은 영문 설명 1줄.

(5) Footer 다크 배경(#1a1a1a), 흰색 텍스트, 중앙 정렬. 세리프체 큰 로고 "THE RESORT", 아래에 링크 4개(Privacy Policy, Terms & Conditions, Reservations, Contact Us)를 가로로 나열, 맨 아래에 저작권 표시.

3-5. 이미지/비디오 처리 비디오는 

기술
4-1. 기본 구조 단일 HTML 파일 하나에 CSS(style 태그)와 JavaScript(script 태그) 모두 포함해줘. 외부 라이브러리나 프레임워크 절대 사용하지 말고, 순수 HTML + CSS + Vanilla JS로만 만들어줘. Google Fonts CDN만 외부 링크 허용.

4-2. CSS 관련 CSS 애니메이션(@keyframes)을 적극 활용해서 로딩 원형 확장, 텍스트 페이드인/아웃, 콘텐츠 등장 등을 처리해줘. animation-delay로 요소별 등장 시점을 정밀하게 제어해줘. transition과 animation을 조합해서 스크롤 기반 효과(IntersectionObserver로 클래스 토글)와 시간 기반 효과(로딩 시퀀스)를 모두 구현해줘.

4-3. JavaScript 관련 IntersectionObserver로 스크롤 reveal 애니메이션, scroll 이벤트로 네비게이션 상태 변화 처리. setTimeout으로 로딩 화면 제거. 이벤트 위임과 querySelectorAll 등 기본 DOM API만 사용.

추가 조건 HTML lang="ko"로 설정해줘. 버튼 호버 시 배경 흰색 + 텍스트 다크로 반전되는 효과 적용해줘. 768px 이하 모바일 반응형에서 로딩 원형 확장 크기를 150vw로 더 크게 해줘. 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.