/* ============================================================
   Glofind — motion.css  (v2)
   모션·질감 레이어. 값은 tokens.css 에서 온다.
   이징 cubic-bezier(.22,1,.36,1) · UI 250ms · 리빌 700ms — 3곳 실측 채택
   ============================================================ */

:root {
  --e-mask:  cubic-bezier(.22, 1, .36, 1);
  --e-scale: cubic-bezier(.32, .18, .2, 1);
  --e-blur:  cubic-bezier(.4, 0, .2, 1);
  --d-mask:  900ms;
  --d-img:   1600ms;
  --d-fade:  700ms;
  --drift: 0px;
}

/* 0. 그레인 */
#grain {
  position: fixed; inset: 0; z-index: 800; pointer-events: none; opacity: .34; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* 1. 리빌 — 방향 대비 + 대각선 스태거 + 3속성. 관찰 대상은 자르지 않는다 */
.reveal, .reveal-left, .reveal-right, .reveal-scale {
  opacity: 0;
  transition: opacity var(--d-fade) var(--e-blur) var(--rd, 0ms), transform var(--d-mask) var(--e-mask) var(--rd, 0ms), filter var(--d-fade) var(--e-blur) var(--rd, 0ms);
  will-change: opacity, transform;
}
.reveal       { transform: translateY(30px); filter: blur(5px); }
.reveal-left  { transform: translateX(-40px); filter: blur(4px); }
.reveal-right { transform: translateX(40px);  filter: blur(4px); }
.reveal-scale { transform: scale(.95);        filter: blur(6px); }
.reveal.is-in, .reveal-left.is-in, .reveal-right.is-in, .reveal-scale.is-in { opacity: 1; transform: none; filter: none; will-change: auto; }

.label.reveal {
  transform: translateX(-20px); filter: none; clip-path: inset(0 100% 0 0);
  transition: opacity 380ms var(--e-blur) var(--rd, 0ms), transform 560ms var(--e-mask) var(--rd, 0ms), clip-path 720ms var(--e-mask) var(--rd, 0ms);
}
.label.reveal.is-in { clip-path: inset(0 0 0 0); transform: none; opacity: 1; }

/* 미디어 — 안쪽 img 만 자른다. 방향 어휘: 기본 아래→위 / [data-dir=x] 좌→우 / [data-dir=rx] 우→좌 */
.reveal-media { overflow: hidden; }
.reveal-media > img {
  clip-path: inset(0 0 100% 0);
  filter: blur(9px) saturate(.4) !important;
  transition: filter var(--d-fade) var(--e-blur) var(--rd, 0ms), clip-path var(--d-mask) var(--e-mask) var(--rd, 0ms), transform 760ms var(--e);
}
.reveal-media[data-dir="x"]  > img { clip-path: inset(0 100% 0 0); }
.reveal-media[data-dir="rx"] > img { clip-path: inset(0 0 0 100%); }
.reveal-media.is-in > img { clip-path: inset(0 0 0 0); filter: saturate(.86) contrast(1.04) !important; }
.duo.reveal-media.is-in > img { filter: grayscale(1) contrast(1.08) brightness(.86) !important; }

/* 2. 제목 — 단어 마스크 스태거 42ms (h1 + .m-split) */
.m-word { display: inline-block; overflow: hidden; padding-block-end: .16em; margin-block-end: -.16em; vertical-align: bottom; }
.m-word > i { display: inline-block; font-style: inherit; transform: translateY(115%); opacity: 0; transition: transform 980ms var(--e-mask) var(--wd, 0ms), opacity 460ms var(--e-blur) var(--wd, 0ms); }
.is-hero-in .hero__title .m-word > i, .m-split.is-in .m-word > i, .is-in .m-word > i { transform: none; opacity: 1; }

/* 히어로 진입 — 프레임 스크림 뒤에서 캔버스·라벨·피치·척추가 순서대로 */
.hero__label, .hero__pitch, .hero__hint {
  opacity: 0;
  transition: opacity 600ms var(--e-blur) var(--hd, 0ms), transform 820ms var(--e-mask) var(--hd, 0ms), clip-path 820ms var(--e-mask) var(--hd, 0ms);
}
.hero__label   { transform: translateX(-22px); clip-path: inset(0 100% 0 0); --hd: 60ms; }
.hero__pitch   { transform: translateY(20px); --hd: 820ms; }
.hero .ticker { --hd: 1200ms; }
.hero__hint { --hd: 1500ms; }
.is-hero-in :is(.hero__label, .hero__pitch, .hero__hint) { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
/* 토포 진입 — 90° 로 누워 있다가 2.5s 에 55° 로 일어선다 (Halide 수치) */
.topo { opacity: 0; transform: rotateX(90deg) rotateZ(0deg) scale(.8); }
.is-hero-in .topo { opacity: 1; transform: rotateX(55deg) rotateZ(-25deg) scale(1); transition: transform 2500ms cubic-bezier(.16, 1, .3, 1), opacity 1600ms var(--e-blur); }
.is-hero-settled .topo { transition: transform 800ms cubic-bezier(.16, 1, .3, 1); }

/* 3. 드리프트 — 재생 후 정지하지 않는다 (최대 14px) */
.m-drift { transform: translate3d(0, var(--drift, 0px), 0); }
.reveal.is-in.m-drift, .reveal-left.is-in.m-drift, .reveal-right.is-in.m-drift { transform: translate3d(0, var(--drift, 0px), 0); }

/* 4. 자기력 버튼 */
.m-magnet { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: transform 420ms var(--e-mask); }
.m-magnet.is-pulled { transition: transform 90ms linear; }
.m-magnet > .m-label { display: inline-flex; align-items: center; gap: var(--s1); transform: translate3d(var(--lx, 0px), var(--ly, 0px), 0); transition: inherit; }

/* 5. hover — 면·선·위치가 함께 움직인다 */
@media (hover: hover) and (pointer: fine) {
  .pain__row:hover .pain__row-num { color: var(--cyan-ink); }
  .pain__row:hover h3 { color: var(--cyan-ink) !important; }

  .case-feature:hover h3, .case-card:hover h3 { color: var(--cyan-ink); }
  .case-feature:hover .case-feature__media img, .case-card:hover .case-card__media img { transform: scale(1.05); }

  .cap:hover { border-color: var(--ink-30); }
  .cap:hover .cap__num { color: var(--cyan-ink); }
  .cap:hover h3 { color: var(--cyan-ink); }

  .step:hover .step li::before { transform: scale(1.4); }
  .feg__item:hover { background: var(--bg); }
  .feg__item:hover svg { transform: scale(1.12) rotate(-6deg); }
  .value:hover { background: var(--tint); }
  .value:hover b, .value:hover h3 { color: var(--cyan-ink); }

  table.compare tbody tr:hover td, table.compare tbody tr:hover th { background: var(--bg); }
  table.compare tbody tr:hover td.col-glo { background: var(--tint); }
  table.compare tbody tr:hover .mark--y { transform: scale(1.25); }

  .faq__item:hover .faq__q { padding-inline-start: 8px; }
  .target:hover::after { opacity: 1; }
  .target:hover .target__num { color: var(--cyan-ink); transform: translate3d(3px, -3px, 0); }
}

/* 6. 상하 이동 버튼 */
#m-scrollbtn {
  position: fixed; inset-block-end: 28px; inset-inline-end: 28px; z-index: 850;
  display: grid; place-items: center; inline-size: 48px; block-size: 48px;
  border: var(--hair) solid var(--line); border-radius: var(--radius-circle);
  background: var(--surface); color: var(--ink);
  opacity: 0; transform: translateY(10px);
  transition: opacity 300ms var(--e-blur), transform 420ms var(--e-mask), background-color var(--d-ui) var(--e), color var(--d-ui) var(--e), border-color var(--d-ui) var(--e);
}
#m-scrollbtn.is-on { opacity: 1; transform: none; }
#m-scrollbtn:hover { background: var(--cyan); color: var(--on-cyan); border-color: var(--cyan); }
#m-scrollbtn svg { inline-size: 17px; block-size: 17px; transition: transform 380ms var(--e-mask); }
#m-scrollbtn.is-up svg { transform: rotate(180deg); }

/* 7. 커서 링 — 링크 위 1.8배 · [data-cursor] 위에서는 라벨 링 */
#m-ring { position: fixed; inset: 0 auto auto 0; z-index: 950; inline-size: 34px; block-size: 34px; margin: -17px 0 0 -17px; pointer-events: none; opacity: 0; transition: opacity 320ms var(--e-blur); will-change: transform; }
#m-ring.is-on { opacity: 1; }
#m-ring > i { display: block; inline-size: 100%; block-size: 100%; border: var(--hair) solid var(--cyan); border-radius: var(--radius-circle); transform: scale(1); transition: transform 380ms var(--e-mask), background-color var(--d-ui) var(--e), opacity var(--d-ui) var(--e), border-color var(--d-ui) var(--e); }
#m-ring > b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-en); font-size: 10px; font-weight: 600; letter-spacing: .16em; color: var(--on-cyan); opacity: 0; transform: scale(.6); transition: opacity 200ms var(--e), transform 380ms var(--e-mask); }
#m-ring.is-hover > i { transform: scale(1.8); background: var(--cyan-veil); }
#m-ring.is-label > i { transform: scale(2.4); background: var(--cyan); border-color: transparent; }
#m-ring.is-label > b { opacity: 1; transform: scale(1); }
#m-ring.is-press > i { transform: scale(.7); }
#m-ring.is-text > i { transform: scale(.4); opacity: .5; }

@media (max-width: 767px) {
  #m-scrollbtn { inset-block-end: 18px; inset-inline-end: 18px; inline-size: 44px; block-size: 44px; }
  .reveal-left, .reveal-right { transform: translateY(20px); } /* 모바일: 가로 오프셋이 풀블리드 요소를 뷰포트 밖으로 밀어 가로 넘침 유발 → 세로로 (2026-09-11) */
  .m-magnet, .m-magnet > .m-label { transform: none !important; }
  #m-ring { display: none; }
}

/* 8. 접근성 — 모션 전면 정지 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-media > img, .m-word > i,
  .hero__label, .hero__pitch, .hero .ticker, .hero__hint, .topo {
    opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important;
  }
  .reveal-media > img { filter: saturate(.86) contrast(1.04) !important; }
  .topo { transform: rotateX(55deg) rotateZ(-25deg) !important; }
  .stats__arcs path { stroke-dashoffset: 0 !important; }
  .stats__bg img, .mission__figure img { transform: none !important; }
  .m-drift, .m-magnet, .footer__display, .step { transform: none !important; }
  .ticker__track { animation: none !important; }
  .caps__bar i { transform: scaleX(1) !important; }
  .value::before { inline-size: 28px !important; }
  #grain, #m-ring { display: none; }
}

/* ── HERO v3 — 단일 풀블리드 사진. 3D 토포 레이어를 접고 한 장으로 (토스·카카오 참고) ── */
.hero__stage { padding: 0 !important; perspective: none !important; align-items: stretch !important; justify-content: stretch !important; }
.hero__stage::after { background: var(--scrim) !important; }
.topo--photo, .is-hero-in .topo--photo, .is-hero-settled .topo--photo { position: absolute !important; inset: 0 !important; inline-size: 100% !important; block-size: 100% !important; aspect-ratio: auto !important; transform: none !important; transform-style: flat !important; opacity: 1 !important; transition: clip-path 1500ms cubic-bezier(.16, 1, .3, 1) 0ms !important; }
.topo--photo .topo__layer--2, .topo--photo .topo__layer--3, .topo--photo .topo__contours { display: none !important; }
.topo--photo .topo__layer--1 { border: 0 !important; transform: none !important; }
.topo--photo .topo__layer--1 img { filter: grayscale(1) contrast(1.12) brightness(.82) !important; object-position: 62% 50%; transform: none; }
.topo--photo .topo__layer::after { opacity: .48 !important; }

/* ── 2026-09-10 이미지 색 필터 전면 해제 (클라이언트 지시: 원본 그대로) ── */
.duo > img, .duo > video, .duo.reveal-media.is-in > img, .reveal-media.is-in > img, .reveal-media > img,
.mission__figure img, .topo__layer--1 img, .topo--photo .topo__layer--1 img { filter: none !important; }
.duo::before, .topo__layer::after { display: none !important; }
/* 영상 히어로는 이미 어두워서 스크림을 가볍게 — 지구본이 보이도록 */
.hero__stage::after { background: var(--scrim-soft) !important; }

/* ── 히어로 인트로 — 화면 중앙 작은 사각형에서 시작해 1.7s 에 화면을 가득 채운다. 글자는 박스가 커지는 중간부터 ── */
.topo--photo { clip-path: inset(calc(50% - 130px) calc(50% - 130px)); }
.topo--photo .topo__layer--1 img, .topo--photo .hero__video { transform: scale(1.22) !important; transition: transform 2100ms cubic-bezier(.16, 1, .3, 1) 0ms; }
.is-hero-in .topo--photo { clip-path: inset(0 0 0 0); }
.is-hero-in .topo--photo .topo__layer--1 img, .is-hero-in .topo--photo .hero__video { transform: scale(1) !important; }
.hero__label { --hd: 900ms; }
.hero__pitch { --hd: 1500ms; }
.hero__hint  { --hd: 2000ms; }
.is-hero-in .hero__title .m-word > i { transition-delay: calc(var(--wd, 0ms) + 700ms), calc(var(--wd, 0ms) + 700ms); }
@media (prefers-reduced-motion: reduce) {
  .topo--photo { clip-path: none !important; }
  .topo--photo .topo__layer--1 img, .topo--photo .hero__video { transform: none !important; }
}