/*!
 * nero-motion.css v2.2 — 네로웹 모션 라이브러리
 * ------------------------------------------------------------------
 * 모든 모션 값은 아래 :root 한 곳에만 있다 (SSOT). JS 도 여기서 읽는다.
 * 테마 CSS·JS에서 시간/이징/비율 숫자를 직접 쓰지 말고 이 변수만 쓴다.
 *
 * 값 출처 표기
 *   [실측]  slide-motion-skill(MIT, mincheol10007)이 유튜브 모핑 영상을 프레임 단위로 잰 값
 *   [일반화] 실측값(N=3)을 다른 개수로 푸는 공식
 *   [연출]  네로웹이 웹에 맞게 정한 값 (실측 아님)
 *   [라이브러리 기본값] 널리 쓰는 오픈소스 라이브러리의 문서상 기본값
 * ------------------------------------------------------------------ */

:root{
  /* 이징 — [실측] 73점 합동 피팅. ease-in-out 은 실측과 가장 안 맞는 곡선 */
  --nm-ease: cubic-bezier(0.25, 0.1, 0.35, 0.95);

  /* 숫자 롤링 — [실측] 960ms. 줄이지 말 것 (69% 지점에서 이미 90% 도착, 나머지가 무게감) */
  --nm-t-roll: 960ms;

  /* 카드 강조 — [실측] 전환 380ms, 본문 페이드 240ms·지연 120ms, 폭 1747 영역에서 균등 간격 105 / 강조 간격 33,
     강조 카드 = 축소 카드 × 4, 높이 427 → 773 (×1.81), 축소 카드 최소 200 */
  --nm-t-card: 380ms;
  --nm-t-card-body: 240ms;
  --nm-d-card-body: 120ms;
  --nm-cards-w: 1747;
  --nm-cards-gap-eq: 105;
  --nm-cards-gap-hi: 33;
  --nm-cards-hero: 4;
  --nm-cards-small-min: 200;
  --nm-cards-grow: 1.81;
  --nm-cards-min: 1024;       /* [연출] 이 폭보다 좁거나 마우스가 없는 기기면 끔 */

  /* 등장(글·박스) — [연출] 실측 이징 + 짧은 거리라 700ms */
  --nm-t-reveal: 700ms;
  --nm-rise: 28px;
  --nm-stagger: 90ms;
  --nm-reveal-at: 0.9;        /* [연출] 요소 윗변이 화면 높이의 90% 지점을 지나면 등장 */

  /* 이미지 리빌 — [연출] 화면 폭만큼 움직이는 긴 거리라 960ms */
  --nm-t-wipe: 960ms;

  /* 글자 구멍 줌 — [실측] 글자 높이 = 화면 높이 × 0.329 / [실측 규칙] 배율 여유 6% / [연출] 세로 화면 폭 86%, 스크롤 140vh */
  --nm-ko-plate: var(--c-primary, #0b0b0c);   /* 규칙 파일의 주색을 따른다 */
  --nm-ko-cap: 0.329;
  --nm-ko-margin: 1.06;
  --nm-ko-fit: 0.86;
  --nm-ko-scroll: 140;

  /* 줄 단위 제목 — [연출] 시간·이징은 실측 롤 값을 빌림 */
  --nm-t-line: 960ms;
  --nm-line-stagger: 80ms;

  /* 쌓이는 카드 — [연출] */
  --nm-stack-scale: 0.92;
  --nm-stack-top: 96px;
  --nm-stack-peek: 14px;

  /* 가로 스크롤 — [연출] */
  --nm-hs-min: 1024;

  /* 고정 이미지 교체(steps) — [연출] */
  --nm-steps-top: 96px;
  --nm-steps-line: 0.45;      /* 화면 위에서 45% 지점을 지나는 항목이 활성 */
  --nm-steps-dim: 0.45;       /* 활성 아닌 항목의 진하기 */
  --nm-steps-gap: 70vh;       /* 항목 하나의 높이 */

  /* 흐르는 띠 — [연출] 초당 60px */
  --nm-marquee-speed: 60;

  /* 이미지 시차 — [연출] 위아래 ±8% */
  --nm-parallax: 8;

  /* 부드러운 휠 스크롤 — [라이브러리 기본값] Lenis lerp 0.1 */
  --nm-smooth-lerp: 0.1;

  /* 진행 바 — [연출] */
  --nm-progress-h: 3px;
  --nm-progress-color: currentColor;

  /* 페이지 전환 — [연출] 카드 실측 380ms 를 빌림 */
  --nm-t-vt: 380ms;
}

/* 화면에는 안 보이고 스크린리더만 읽는 글 */
.nm-sr{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ===== 등장 / 페이드 / 이미지 리빌 =====
   transition 이 아니라 keyframes(fill: backwards)로 움직인다
   → 테마가 같은 요소에 transition·hover 효과를 줘도 서로 충돌하지 않는다 */
.nm-js [data-nm="reveal"]:not(.nm-in){ opacity:0; transform:translate3d(0,var(--nm-rise),0); }
.nm-js [data-nm="fade"]:not(.nm-in){ opacity:0; }
.nm-js [data-nm="wipe"]:not(.nm-in){ clip-path:inset(0 100% 0 0); }
.nm-js [data-nm="wipe"][data-nm-dir="left"]:not(.nm-in){ clip-path:inset(0 0 0 100%); }
.nm-js [data-nm="wipe"][data-nm-dir="up"]:not(.nm-in){ clip-path:inset(100% 0 0 0); }
[data-nm="reveal"].nm-in{ animation:nm-rise var(--nm-t-reveal) var(--nm-ease) var(--nm-d,0ms) backwards; }
[data-nm="fade"].nm-in{ animation:nm-fade var(--nm-t-reveal) var(--nm-ease) var(--nm-d,0ms) backwards; }
[data-nm="wipe"].nm-in{ animation:nm-wipe-r var(--nm-t-wipe) var(--nm-ease) var(--nm-d,0ms) backwards; }
[data-nm="wipe"][data-nm-dir="left"].nm-in{ animation-name:nm-wipe-l; }
[data-nm="wipe"][data-nm-dir="up"].nm-in{ animation-name:nm-wipe-u; }
/* 안전장치: 스크립트가 시작 도중 멈추면(nm-ready 가 안 붙으면) 3초 뒤 숨긴 내용을 그대로 보인다 */
.nm-js:not(.nm-ready) [data-nm="reveal"]:not(.nm-in),
.nm-js:not(.nm-ready) [data-nm="fade"]:not(.nm-in),
.nm-js:not(.nm-ready) [data-nm="wipe"]:not(.nm-in){ animation:nm-show 0s 3s forwards; }
@keyframes nm-show{ to{ opacity:1; transform:none; clip-path:inset(0 0 0 0); } }
@keyframes nm-rise{ from{ opacity:0; transform:translate3d(0,var(--nm-rise),0); } }
@keyframes nm-fade{ from{ opacity:0; } }
@keyframes nm-wipe-r{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes nm-wipe-l{ from{ clip-path:inset(0 0 0 100%); } to{ clip-path:inset(0 0 0 0); } }
@keyframes nm-wipe-u{ from{ clip-path:inset(100% 0 0 0); } to{ clip-path:inset(0 0 0 0); } }

/* ===== 숫자 롤링 (오도미터) ===== */
.nm-odo{
  display:inline-flex; align-items:flex-start;
  font-variant-numeric:tabular-nums;
  line-height:1.15;
}
.nm-odo .nm-odo__w,
.nm-odo .nm-odo__s,
.nm-odo .nm-odo__s > span,
.nm-odo .nm-odo__x{
  color:inherit; font:inherit; letter-spacing:inherit;
  margin:0; padding:0; border:0; background:none;
  line-height:1.15em;
}
.nm-odo .nm-odo__w{ display:inline-block; overflow:hidden; height:1.15em; width:1ch; text-align:center; }
.nm-odo .nm-odo__s{ display:block; transform:translate3d(0,0,0); will-change:transform; }
.nm-odo .nm-odo__s > span{ display:block; height:1.15em; }
.nm-odo .nm-odo__s.nm-run{ transition:transform var(--nm-t-roll) var(--nm-ease); }
.nm-odo .nm-odo__x{ display:inline-block; }

/* ===== 카드 강조 (가로 아코디언) ===== */
.nm-cards-on[data-nm="cards"]{
  display:grid;               /* 넓은 화면 + 마우스 기기에서만 JS가 nm-cards-on 을 붙인다 */
  grid-auto-flow:column;
  align-items:end;            /* [실측] 바닥 정렬, 강조 카드는 위로 자란다 */
  transition:
    grid-template-columns var(--nm-t-card) var(--nm-ease),
    column-gap            var(--nm-t-card) var(--nm-ease);
}
.nm-cards-on[data-nm="cards"].nm-noanim,
.nm-cards-on[data-nm="cards"].nm-noanim > *{ transition:none; }
.nm-cards-on[data-nm="cards"] > *{
  min-width:0; overflow:hidden;
  height:var(--nm-card-h,auto);
  transition:height var(--nm-t-card) var(--nm-ease);
}
.nm-cards-on[data-nm="cards"][data-nm-grow] > .nm-on{ height:calc(var(--nm-card-h) * var(--nm-cards-grow)); }
[data-nm="cards"].nm-cards-on > * [data-nm-more]{
  width:var(--nm-more-w); max-width:none;
  opacity:0;
  transition:opacity var(--nm-t-card-body) var(--nm-ease) 0ms;
}
[data-nm="cards"].nm-cards-on > .nm-on [data-nm-more]{
  opacity:1;
  transition:opacity var(--nm-t-card-body) var(--nm-ease) var(--nm-d-card-body);
}

/* ===== 글자 구멍 줌 (메인 → 본문) ===== */
.nm-ko{ position:relative; }
.nm-ko__stage{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden;
  background:var(--c-primary, #1d2b3a);   /* 사진이 안 뜰 때 대체 배경 — 규칙 파일 주색 */
}
.nm-ko__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }  /* [실측] 사진 고정 */
.nm-ko__plate{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.nm-ko__after{ position:absolute; inset:auto 0 12% 0; }
/* 판이 실제로 그려졌을 때만 카피를 숨겼다가 끝에서 보인다 (JS 실패 시 카피는 그대로 보임) */
.nm-ko.nm-ko-on .nm-ko__after{
  opacity:0; transform:translate3d(0,var(--nm-rise),0);
  transition:opacity var(--nm-t-reveal) var(--nm-ease), transform var(--nm-t-reveal) var(--nm-ease);
}
.nm-ko.nm-ko-on.nm-ko--done .nm-ko__after{ opacity:1; transform:none; }

/* ===== 줄 단위 제목 ===== */
[data-nm="lines"]{ word-break:keep-all; }   /* 한글 낱자 끊김 방지 — 나누기 전후 줄바꿈이 같아야 튐이 없다 */
.nm-js [data-nm="lines"]:not(.nm-split){
  visibility:hidden;
  animation:nm-safe 0s 2.5s forwards;       /* JS·글꼴 문제로 안 나뉘어도 2.5초 뒤엔 보이게 */
}
@keyframes nm-safe{ to{ visibility:visible; } }
[data-nm="lines"] .nm-ln{ display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em; }
[data-nm="lines"] .nm-ln__i{
  display:inline-block;
  transform:translate3d(0,110%,0);
  transition:transform var(--nm-t-line) var(--nm-ease) var(--nm-d,0ms);
}
[data-nm="lines"].nm-in .nm-ln__i{ transform:none; }

/* ===== 쌓이는 카드 ===== */
[data-nm="stack"]:not(.nm-stack-off) > *{
  position:sticky;
  top:calc(var(--nm-stack-top) + var(--i,0) * var(--nm-stack-peek));
  transform-origin:50% 0;
}

/* ===== 가로 스크롤 섹션 ===== */
[data-nm="hscroll"] .nm-hs__track{ display:flex; width:max-content; }
[data-nm="hscroll"] .nm-hs__track > *{ flex:0 0 auto; }
[data-nm="hscroll"]:not(.nm-hs-on) .nm-hs__pin{
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
}
[data-nm="hscroll"]:not(.nm-hs-on) .nm-hs__pin::-webkit-scrollbar{ display:none; }
[data-nm="hscroll"]:not(.nm-hs-on) .nm-hs__track > *{ scroll-snap-align:start; }
[data-nm="hscroll"].nm-hs-on{ box-sizing:border-box; }
[data-nm="hscroll"].nm-hs-on .nm-hs__pin{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden; display:flex; align-items:center;
}
[data-nm="hscroll"].nm-hs-on .nm-hs__track{ will-change:transform; }

/* ===== 고정 이미지 교체 (steps) — 모바일에서도 동작 ===== */
[data-nm="steps"]{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6vw; align-items:start; }
[data-nm="steps"] .nm-st__media{
  position:sticky; top:var(--nm-steps-top);
  height:calc(100vh - var(--nm-steps-top) * 2);
  overflow:hidden;
}
[data-nm="steps"] .nm-st__media > *{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity var(--nm-t-reveal) var(--nm-ease);
}
[data-nm="steps"] .nm-st__media > .nm-on{ opacity:1; }
[data-nm="steps"] .nm-st__item{
  min-height:var(--nm-steps-gap); display:flex; flex-direction:column; justify-content:center;
  opacity:var(--nm-steps-dim); transition:opacity var(--nm-t-reveal) var(--nm-ease);
}
[data-nm="steps"] .nm-st__item.nm-on{ opacity:1; }
/* JS 가 안 돌면 첫 이미지와 모든 글을 그대로 보인다 */
[data-nm="steps"]:not(.nm-st-on) .nm-st__item{ opacity:1; }
[data-nm="steps"]:not(.nm-st-on) .nm-st__media > :first-child{ opacity:1; }
@media (max-width:767px){
  [data-nm="steps"]{ grid-template-columns:1fr; gap:0; }
  [data-nm="steps"] .nm-st__media{ top:0; height:42vh; z-index:1; }
  [data-nm="steps"] .nm-st__item{ min-height:60vh; }
}

/* ===== 흐르는 띠 ===== */
[data-nm="marquee"]{ overflow:hidden; position:relative; }
[data-nm="marquee"] .nm-mq__t{
  display:flex; width:max-content;
  animation:nm-mq var(--nm-mq-dur,30s) linear infinite;   /* 띠는 일정 속도 */
}
[data-nm="marquee"] .nm-mq__t--r{ animation-direction:reverse; }
[data-nm="marquee"] .nm-mq__t > *{ flex:0 0 auto; }
[data-nm="marquee"]:hover .nm-mq__t,
[data-nm="marquee"]:focus-within .nm-mq__t,
[data-nm="marquee"].nm-mq-paused .nm-mq__t{ animation-play-state:paused; }
[data-nm="marquee"] .nm-mq__btn{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  opacity:0; pointer-events:none;
  font:inherit; font-size:.8em; padding:.3em .8em; border:1px solid currentColor; background:Canvas; color:CanvasText; border-radius:4px;
}
[data-nm="marquee"] .nm-mq__btn:focus-visible{ opacity:1; pointer-events:auto; }
@keyframes nm-mq{ to{ transform:translate3d(-50%,0,0); } }

/* ===== 진행 바 ===== */
[data-nm="progress"]{
  position:fixed; left:0; top:0; z-index:9999;
  width:100%; height:var(--nm-progress-h);
  background:var(--nm-progress-color);
  transform:scaleX(0); transform-origin:0 50%;
  pointer-events:none;
}

/* ===== 이미지 시차 ===== */
[data-nm="parallax"]{ overflow:hidden; }

/* ===== 스크롤 연동을 CSS 로 할 수 있는 브라우저는 CSS 로 (JS 는 쉼) ===== */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    [data-nm="progress"]{ animation:nm-prog linear both; animation-timeline:scroll(root); }
    [data-nm="parallax"] > *{ animation:nm-px linear both; animation-timeline:view(); }
  }
}
@keyframes nm-prog{ to{ transform:scaleX(1); } }
@keyframes nm-px{
  from{ transform:translate3d(0, calc(var(--nm-parallax) * -1%), 0) scale(calc(1 + var(--nm-parallax) / 50)); }
  to  { transform:translate3d(0, calc(var(--nm-parallax) *  1%), 0) scale(calc(1 + var(--nm-parallax) / 50)); }
}

/* ===== 페이지 전환 (지원 브라우저만, 같은 사이트 안 이동) ===== */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation:auto; }
  ::view-transition-old(root),
  ::view-transition-new(root){ animation-duration:var(--nm-t-vt); animation-timing-function:var(--nm-ease); }
}

/* ===== 움직임 줄이기 설정을 켠 사람: 즉시 최종 상태 ===== */
@media (prefers-reduced-motion: reduce){
  [data-nm], [data-nm] *, .nm-odo__s, .nm-ko__after{
    transition-duration:0ms !important;
    transition-delay:0ms !important;
    animation:none !important;
  }
  [data-nm="lines"]{ visibility:visible !important; }
  [data-nm="lines"] .nm-ln__i{ transform:none !important; }
  [data-nm="stack"] > *{ position:static !important; }
}