@charset "UTF-8";
/* ==========================================================================
   motion.css — 메인(index) 스크롤 모션 레이어
   · js/motion.js 가 html 에 .m-ready 를 붙인 경우에만 동작 (JS 미동작/모션 최소화 시 원래 화면 그대로)
   · 기존 style.css 의 transform 과 충돌하지 않도록 개별 속성(translate / scale / clip-path / opacity)만 사용
   · 등장형:  [data-m="rise|fade|curtain|reveal|lines|draw"] + .m-in (등장 완료 후 JS 가 data-m 제거 → 원래 transition 복구)
   · 스크럽형: [data-scrub] → JS 가 --p(0~1 스크롤 진행률) 갱신
   ========================================================================== */
:root {
  --m-ease: cubic-bezier(.16, 1, .3, 1);      /* expo-out: 빠르게 나와 길게 안착 */
  --m-dur: 1.1s;
}

/* ---- 등장형 공통 ---- */
.m-ready [data-m] {
  transition-duration: var(--m-dur);
  transition-timing-function: var(--m-ease);
  transition-delay: var(--m-delay, 0s);
}

/* rise: 아래에서 떠오르며 페이드 */
.m-ready [data-m="rise"] { opacity: 0; translate: 0 60px; transition-property: opacity, translate; }
.m-ready [data-m="rise"].m-in { opacity: 1; translate: 0 0; }

/* fade: 블러가 풀리며 페이드 */
.m-ready [data-m="fade"] { opacity: 0; filter: blur(8px); transition-property: opacity, filter; }
.m-ready [data-m="fade"].m-in { opacity: 1; filter: blur(0); }

/* curtain: 아래에서 위로 막이 걷히듯 열림 + 내부 이미지 줌아웃 */
.m-ready [data-m="curtain"] { clip-path: inset(100% 0 0 0 round 0); transition-property: clip-path; transition-duration: 1.4s; }
.m-ready [data-m="curtain"].m-in { clip-path: inset(0 0 0 0 round 0); }
.m-ready [data-m="curtain"] .m-zoom { scale: 1.35; transition: scale 1.8s var(--m-ease) var(--m-delay, 0s); }
.m-ready [data-m="curtain"].m-in .m-zoom { scale: 1; }

/* reveal: 이미지 자체가 옆으로 열리며 줌아웃 (좌 → 우) */
.m-ready [data-m="reveal"] { clip-path: inset(0 100% 0 0); scale: 1.15; transition-property: clip-path, scale; transition-duration: 1.4s, 1.8s; }
.m-ready [data-m="reveal"].m-in { clip-path: inset(0 0 0 0); scale: 1; }

/* lines: 문장을 줄 단위로 마스크 안에서 밀어올림 (JS 가 .m-line 로 분리) */
.m-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.m-line__inner { display: block; }
.m-ready [data-m="lines"] .m-line__inner {
  translate: 0 110%;
  rotate: 2deg;
  transform-origin: 0 100%;
  transition: translate 1.2s var(--m-ease), rotate 1.2s var(--m-ease);
  transition-delay: calc(var(--m-delay, 0s) + var(--i, 0) * .12s);
}
.m-ready [data-m="lines"].m-in .m-line__inner { translate: 0 0; rotate: 0deg; }

/* draw: 가로 라인이 왼쪽부터 그려짐 */
.m-ready [data-m="draw"] { scale: 0 1; transform-origin: 0 50%; transition-property: scale; transition-duration: 1.2s; }
.m-ready [data-m="draw"].m-in { scale: 1 1; }

/* ---- 스크럽형 (스크롤 연동) ---- */

/* Hero: 스크롤하면 텍스트가 위로 빠지며 흐려지고, 배경은 살짝 확대 */
.m-ready .hero__inner {
  translate: 0 calc(var(--p, 0) * -140px);
  opacity: calc(1 - var(--p, 0) * 1.4);
}
.m-ready .hero__bg { scale: calc(1 + var(--p, 0) * .12); }
.m-ready .hero__scroll-down { opacity: calc(1 - var(--p, 0) * 3); }

/* We are: 워터마크가 스크롤 반대 방향으로 흘러감 / 사진 두 장이 서로 다른 속도로 이동 */
.m-ready .weare__watermark { translate: 0 calc((var(--p, 0) - .5) * -260px); }
.m-ready .weare__photo--top { translate: 0 calc((var(--p, 0) - .5) * -70px); }
.m-ready .weare__photo--bottom { translate: 0 calc((var(--p, 0) - .5) * 50px); }

/* Contact: 작은 라운드 카드가 스크롤에 맞춰 풀폭으로 확장 */
.m-ready .contact__content {
  clip-path: inset(0 calc((1 - var(--p, 1)) * 14%) round calc((1 - var(--p, 1)) * 60px));
}
.m-ready .contact__bg img { scale: calc(1.25 - var(--p, 1) * .25); }

/* ---- 모바일: 이동량 축소 ---- */
@media (max-width: 1024px) {
  .m-ready [data-m="rise"] { translate: 0 36px; }
  .m-ready .weare__photo--top,
  .m-ready .weare__photo--bottom { translate: none; }
  .m-ready .contact__content { clip-path: inset(0 calc((1 - var(--p, 1)) * 6%) round calc((1 - var(--p, 1)) * 30px)); }
}