/* ══ 모션 시스템 ══════════════════════════════════════════════
   원칙: 빠르고 정확하게. 튕김·회전 없음. 모서리 반경 0 유지.
   고급스러움은 느린 연출이 아니라 정확한 타이밍에서 나옵니다.
   전부 transform / opacity / clip-path 만 사용 — 리페인트 없음.
   ─────────────────────────────────────────────────────────── */

/* ── 1. 기본 등장 ── */
.gi-a{opacity:0;transform:translate3d(0,24px,0);
  transition:opacity .55s cubic-bezier(.16,.84,.44,1),transform .55s cubic-bezier(.16,.84,.44,1)}
.gi-c{opacity:0;transition:opacity .7s ease-out}
.gi-a.in,.gi-c.in{opacity:1;transform:none}

/* 민트 구분선 — 좌→우 */
.gi-r{transform:scaleX(0);transform-origin:left center;
  transition:transform .55s cubic-bezier(.16,.84,.44,1)}
.gi-r.in{transform:scaleX(1)}

/* ── 2. 제목 줄 마스크 — 글자가 아래에서 밀려 올라옵니다 ── */
.gi-ln{display:block;overflow:hidden}
.gi-ln>i{display:block;font-style:normal;
  padding-bottom:.14em;margin-bottom:-.14em;      /* 받침·디센더 잘림 방지 */
  transform:translate3d(0,112%,0);
  transition:transform .72s cubic-bezier(.16,.84,.44,1)}
.gi-ln.in>i{transform:none}

/* ── 3. 스크롤 진행 막대 ── */
.gi-prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:999;pointer-events:none;
  background:transparent}
.gi-prog>i{display:block;height:100%;background:var(--mint);
  transform:scaleX(0);transform-origin:left center;will-change:transform}

/* ── 4. 히어로 ── */
.hero-bg img{transform:scale(1.07);transition:transform 2.4s cubic-bezier(.16,.84,.44,1)}
.gi-ready .hero-bg img{transform:scale(1)}

/* 스크롤 안내 — 선을 타고 내려가는 점 */
.gi-cue{position:absolute;left:50%;bottom:26px;width:1px;height:52px;z-index:3;
  background:linear-gradient(to bottom,transparent,var(--mint) 18%,transparent);
  opacity:0;transition:opacity .6s ease .9s;pointer-events:none}
.gi-ready .gi-cue{opacity:.55}
.gi-cue::after{content:"";position:absolute;left:-1px;width:3px;height:3px;background:var(--mint);
  animation:gi-cue 2.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes gi-cue{0%{top:0;opacity:0}22%{opacity:1}78%{opacity:1}100%{top:100%;opacity:0}}

/* ── 5. 숫자 카운트 — 자릿수가 바뀌어도 폭이 흔들리지 않게 ── */
.gi-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ── 6. 사례 이미지 — 아래에서 위로 걷히며 등장 ──
   clip-path 는 관찰 대상(figure)이 아니라 안쪽 img 에 겁니다.
   대상 자체를 잘라내면 교차 감지가 어긋나 영영 안 나타납니다. */
.gi-wipe img{clip-path:inset(0 0 100% 0);transform:scale(1.08);
  transition:clip-path .8s cubic-bezier(.16,.84,.44,1),
             transform 1.1s cubic-bezier(.16,.84,.44,1)}
.gi-wipe.in img{clip-path:inset(0 0 0 0);transform:scale(1)}
.gi-wipe figcaption{opacity:0;transition:opacity .5s ease .18s}
.gi-wipe.in figcaption{opacity:1}

/* ── 7. 카드 hover — 격자 이음새가 없는 카드에만 붙습니다 ── */
.gi-lift{transition:transform .35s cubic-bezier(.16,.84,.44,1),
  border-color .35s ease,box-shadow .35s ease}
.gi-lift:hover{transform:translate3d(0,-4px,0)}
.light .gi-lift:hover{border-color:var(--mint-800);box-shadow:0 12px 28px -18px rgba(20,24,34,.45)}
.dark  .gi-lift:hover{border-color:var(--mint);box-shadow:0 12px 28px -16px rgba(0,0,0,.6)}

/* ── 8. 어두운 섹션 위 포인터 광원 — 마우스를 따라 아주 옅게 ── */
.gi-spot{position:relative}
.gi-spot::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity .5s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
    rgba(77,141,255,.075),transparent 62%)}
.gi-spot:hover::before{opacity:1}
.gi-spot>*{position:relative;z-index:1}

/* ── 9. 기본 버튼 — 민트가 왼쪽에서 차오릅니다 ── */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--mint);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .42s cubic-bezier(.16,.84,.44,1)}
.btn-ghost:hover::before{transform:scaleX(1)}
.btn-ghost{transition:color .3s ease .06s,border-color .3s ease}
.dark .btn-ghost:hover,.btn-ghost:hover{color:var(--navy);border-color:var(--mint)}
.btn-primary::before{background:var(--navy)}
.btn-primary{transition:color .3s ease .06s}
.btn-primary:hover::before{transform:scaleX(1)}
.btn-primary:hover{color:var(--mint)}

/* ── 10. 서비스 키워드 마퀴 ── */
.gi-mq{overflow:hidden;border-top:1px solid var(--divider);border-bottom:1px solid var(--divider);
  background:var(--cream);padding:22px 0;user-select:none}
.dark+.gi-mq{border-top-color:var(--border-dark)}
.gi-mq-t{display:flex;width:max-content;animation:gi-mq 46s linear infinite;will-change:transform}
.gi-mq:hover .gi-mq-t{animation-play-state:paused}
.gi-mq-t span{display:flex;align-items:center;flex:none;
  font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
  padding:0 26px;white-space:nowrap}
.gi-mq-t span::after{content:"";width:5px;height:5px;background:var(--mint);margin-left:26px;flex:none}
@keyframes gi-mq{to{transform:translate3d(-50%,0,0)}}

/* ── 11. 섹션 표시 레일 — 지금 어디를 보고 있는지 ── */
.gi-rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:12px;opacity:0;transition:opacity .5s ease}
.gi-rail.on{opacity:1}
.gi-rail a{display:block;width:22px;height:2px;background:currentColor;opacity:.22;
  transition:opacity .3s ease,width .3s cubic-bezier(.16,.84,.44,1);color:var(--ink)}
.gi-rail a:hover{opacity:.6}
.gi-rail a.cur{opacity:1;width:34px;background:var(--mint)}
.gi-rail.over-dark a{color:#fff}

/* ── 12. 인포그래픽 막대 — 0에서 자라납니다 ── */
.ig-steps .bar i{transform:scaleX(0);transform-origin:left center;
  transition:transform .9s cubic-bezier(.16,.84,.44,1)}
.in .ig-steps .bar i,
.ig-steps .bar i.in{transform:scaleX(1)}
.ig-lv .meter i{transform:scale(0);transition:transform .5s cubic-bezier(.16,.84,.44,1)}
.ig-lv .meter i.in{transform:scale(1)}
.rc-bars i{transform:scaleY(0);transform-origin:bottom center;
  transition:transform .8s cubic-bezier(.16,.84,.44,1)}
.in .rc-bars i,
.rc-bars i.in{transform:scaleY(1)}

/* ── 13. 링크·hover 잔여 전환 ── */
.btn,.gnb .cta,.nav>li>a,.sub a,.ftr-col a,.ftr-ext a,.svc h3 a,.go{
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,filter .22s ease}
.cases figure{overflow:hidden}
.cases img{transition:transform .6s cubic-bezier(.16,.84,.44,1),filter .3s ease}
.cases figure:hover img{transform:scale(1.045);filter:brightness(.95)}

/* ── 14. 좁은 화면 ── */
@media (max-width:900px){
  .gi-rail{display:none}
  .gi-spot::before{display:none}
  .gi-mq-t{animation-duration:30s}
  .gi-mq-t span{font-size:16px;padding:0 18px}
  .gi-mq-t span::after{margin-left:18px}
}
@media (max-width:640px){
  .gi-a{transform:translate3d(0,12px,0)}
  .gi-cue{display:none}
  .gi-mq{padding:16px 0}
}

/* ── 15. 동작 줄이기 — 전부 끕니다 ── */
@media (prefers-reduced-motion:reduce){
  .gi-a,.gi-c,.gi-r,.gi-wipe,.gi-ln>i,.gi-lift,
  .ig-steps .bar i,.ig-lv .meter i,.rc-bars i,.hero-bg img{
    opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .gi-mq-t{animation:none}
  .gi-cue,.gi-prog,.gi-rail{display:none}
  .btn::before{display:none}
}