:root{
  --mo-t-press: 150ms;  /* 버튼 press·아이콘 */
  --mo-t-ui:    250ms;  /* 헤더 축소·호버·토글 */
  --mo-t-base:  400ms;  /* 섹션 리빌 기본값 */
  --mo-t-sig:   900ms;  

  /* easing — 감속형 2종만. bounce·elastic 은 병원 지면에서 «가벼워» 보인다 */
  --mo-e-out:  cubic-bezier(.22,.61,.36,1);
  --mo-e-soft: cubic-bezier(.16,1,.3,1);
  --mo-e-io:   cubic-bezier(.4,0,.2,1);

  --mo-step: 70ms;          /* stagger 한 칸 */
  --mo-shift: 18px;         /* 이동 거리 — 24px 넘으면 «출렁»인다 */
  --mo-shift-sm: 10px;
}


.mo-on [data-mo]{
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity   var(--mo-t-base) var(--mo-e-out)  var(--mo-delay, 0ms),
    transform var(--mo-t-base) var(--mo-e-out)  var(--mo-delay, 0ms);
}

.mo-on [data-mo]{ transform: none; }
.mo-on [data-mo="up"]   { transform: translate3d(0, var(--mo-shift), 0); }
.mo-on [data-mo="left"] { transform: translate3d(calc(-1 * var(--mo-shift)), 0, 0); }
.mo-on [data-mo="right"]{ transform: translate3d(var(--mo-shift), 0, 0); }
.mo-on [data-mo="zoom"] { transform: scale(.965); transition-duration: var(--mo-t-sig);
                          transition-timing-function: var(--mo-e-soft); }

/* 도달 상태 — 한 줄이 전부 되돌린다 */
.mo-on [data-mo].mo-in{
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}
/* 애니메이션이 끝나면 will-change 를 뗀다(모바일 GPU 메모리 절약) */
.mo-on [data-mo].mo-done{ will-change: auto; }

/* clip 리빌 — 아래에서 «걷히는» 느낌. 히어로 카피에 쓴다 */
.mo-on [data-mo="clip"]{
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, var(--mo-shift-sm), 0);
  transition:
    clip-path var(--mo-t-sig) var(--mo-e-soft) var(--mo-delay, 0ms),
    transform var(--mo-t-sig) var(--mo-e-soft) var(--mo-delay, 0ms);
}


[data-mo-stagger] > *{ --mo-delay: calc(var(--mo-i, 0) * var(--mo-step)); }

/* ── ③ 숫자 카운트업 ───────────────────────────────────────────────────────
   값 자체는 JS 가 채운다. CSS 는 «자릿수가 늘 때 폭이 튀는 것»만 막는다. */
[data-mo-count]{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}


.mo-hd{
  --mo-hd-h: 72px;
  height: var(--mo-hd-h);
  display: flex; align-items: center;
  transition:
    transform        var(--mo-t-ui) var(--mo-e-io),
    background-color var(--mo-t-ui) var(--mo-e-io),
    box-shadow       var(--mo-t-ui) var(--mo-e-io);
}
/* 안쪽 내용이 «줄어드는» 것처럼 보이게 — scale 은 레이아웃을 건드리지 않는다 */
.mo-hd__in{
  transform-origin: left center;
  transition: transform var(--mo-t-ui) var(--mo-e-io);
  width: 100%;
}
html.mo-hd-min .mo-hd{
  background-color: rgba(255,255,255,.94);
  box-shadow: 0 1px 0 rgba(16,24,40,.08), 0 8px 24px -18px rgba(16,24,40,.5);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
}
html.mo-hd-min .mo-hd__in{ transform: scale(.92); }
/* 아래로 스크롤하면 숨기고, 위로 올리면 되돌린다 */
html.mo-hd-hide .mo-hd{ transform: translate3d(0, -100%, 0); }

/* ── ⑤ 이미지 확대(케트버닝) ───────────────────────────────────────────────
   래퍼에 .mo-zoom, 안쪽 img 가 확대된다. 잘림 방지를 위해 래퍼가 overflow:hidden. */
.mo-zoom{ overflow: hidden; }
.mo-zoom > img, .mo-zoom > picture > img{
  transform: scale(1.0);
  transition: transform var(--mo-t-sig) var(--mo-e-soft);
  will-change: transform;
}
.mo-on .mo-zoom.mo-in > img,
.mo-on .mo-zoom.mo-in > picture > img{ transform: scale(1.06); }
/* 포인터가 있는 기기에서만 호버 확대 — 터치에서는 «눌린 채 커진» 상태로 굳는다 */
@media (hover: hover) and (pointer: fine){
  .mo-zoom:hover > img, .mo-zoom:hover > picture > img{ transform: scale(1.08); }
}

/* ── ⑥ 카드 호버 — 포인터 기기 한정 ────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine){
  .mo-lift{ transition: transform var(--mo-t-ui) var(--mo-e-out),
                        box-shadow var(--mo-t-ui) var(--mo-e-out); }
  .mo-lift:hover{ transform: translate3d(0,-4px,0);
                  box-shadow: 0 18px 40px -24px rgba(16,24,40,.45); }
}

/* ── ⑦ 진행 막대(스크롤 인디케이터) ────────────────────────────────────────── */
.mo-progress{
  position: fixed; inset-inline: 0; top: 0; height: 2px; z-index: 9999;
  transform-origin: 0 50%; transform: scaleX(0);
  background: currentColor; opacity: .85; pointer-events: none;
}


@media (prefers-reduced-motion: reduce){
  .mo-on [data-mo],
  .mo-on [data-mo].mo-in{
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .mo-zoom > img, .mo-zoom > picture > img,
  .mo-on .mo-zoom.mo-in > img{ transform: none !important; transition: none !important; }
  .mo-hd, .mo-lift{ transition: none !important; }
  html.mo-hd-hide .mo-hd{ transform: none !important; }
  .mo-progress{ display: none !important; }
  *,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

@media (scripting: none){
  [data-mo]{ opacity: 1 !important; transform: none !important; clip-path: none !important; }
}