/* ============================================================
   motion.css — 인터랙션 강화 레이어 (Seline 톤 유지)
   ------------------------------------------------------------
   전제: ibank-tokens.css → seline.css → (페이지 인라인 <style>) → motion.css
        head 마지막에 로드해 동률 특이도에서 이 파일이 이긴다.

   채널 분리(중요): 리빌(등장)은 translate/scale, hover 는 transform 을 쓴다.
   한 요소가 리빌 대상이면서 카드/버튼인 경우(.sl-card.ta-reveal 등)
   두 모션이 같은 속성을 두고 싸우지 않게 하기 위함이다.
   같은 이유로 transition 선언이 겹치는 요소를 위해 리빌 블록을 파일 끝에 두고
   전이 목록을 상위집합으로 유지한다.

   게이트:
     html:not([data-mo="off"])  = CSS 단독 강화 (JS 없이도 동작)
     html[data-mo="on"]         = motion.js 가 붙인 클래스 전용 (JS 실패 시 숨김 없음)
   주의: success-story 전용 .ss-* 는 이 파일이 다루지 않는다.
   ============================================================ */

:root{
  --mo-ease:cubic-bezier(.16,.84,.26,1);   /* 진입 — 강한 감속 */
  --mo-out:cubic-bezier(.22,.9,.28,1);     /* hover — 매끈한 감속 */
  --mo-pop:cubic-bezier(.34,1.38,.5,1);    /* 아이콘 — 탄성 */
  --mo-rise:34px;
  --mo-dur:.82s;
  --mo-lift:0 20px 42px -22px rgba(12,10,9,.34),0 3px 10px -4px rgba(12,10,9,.07);
  --mo-lift-soft:0 14px 30px -18px rgba(12,10,9,.28);
  --mo-lift-cyan:0 14px 28px -12px rgba(59,166,241,.62);
}

/* ── 1. 카드 hover — lift + 그림자 + 보더 ── */
html:not([data-mo="off"]) .sl-card,
html:not([data-mo="off"]) .sl-feature,
html:not([data-mo="off"]) .hs-story-card,
html:not([data-mo="off"]) .hs-story-mcard{
  transition:transform .42s var(--mo-out),box-shadow .45s var(--mo-out),border-color .26s ease;
}
html:not([data-mo="off"]) .sl-card:hover,
html:not([data-mo="off"]) .sl-feature:hover,
html:not([data-mo="off"]) .hs-story-card:hover,
html:not([data-mo="off"]) .hs-story-mcard:hover{
  transform:translate3d(0,-6px,0);
  border-color:var(--color-stone-muted);
  box-shadow:var(--mo-lift);
}
html:not([data-mo="off"]) a.sl-card:active,
html:not([data-mo="off"]) .hs-story-card:active,
html:not([data-mo="off"]) .hs-story-mcard:active{
  transform:translate3d(0,-2px,0) scale(.995);
  transition-duration:.1s;
}
/* 다크 인버트 밴드에서는 헤어라인이 밝아지도록 */
html:not([data-mo="off"]) .sl-invert .sl-card:hover,
html:not([data-mo="off"]) .sl-invert .sl-feature:hover{
  border-color:rgba(250,250,249,.28);
  box-shadow:0 22px 46px -24px rgba(0,0,0,.66);
}

/* ── 2. 버튼 — lift · press · 아이콘 모션 ── */
html:not([data-mo="off"]) .sl-btn,
html:not([data-mo="off"]) .sl-tab,
html:not([data-mo="off"]) .hs-chip,
html:not([data-mo="off"]) .hs-opt,
html:not([data-mo="off"]) .hs-ask-btn,
html:not([data-mo="off"]) .hs-story-more,
html:not([data-mo="off"]) .hs-svc-cta,
html:not([data-mo="off"]) .ta-nav-home,
html:not([data-mo="off"]) #hero-resume{
  transition:transform .26s var(--mo-out),box-shadow .28s var(--mo-out),
             background-color .18s ease,color .18s ease,border-color .18s ease;
}
html:not([data-mo="off"]) .sl-btn:hover,
html:not([data-mo="off"]) .sl-tab:hover,
html:not([data-mo="off"]) .hs-chip:hover,
html:not([data-mo="off"]) .hs-opt:hover,
html:not([data-mo="off"]) .hs-story-more:hover,
html:not([data-mo="off"]) .ta-nav-home:hover,
html:not([data-mo="off"]) #hero-resume:hover{
  transform:translate3d(0,-3px,0);
  box-shadow:var(--mo-lift-soft);
}
html:not([data-mo="off"]) .sl-btn--primary:hover,
html:not([data-mo="off"]) .hs-ask-btn:hover,
html:not([data-mo="off"]) .hs-svc-cta:not(.hs-svc-cta--disabled):hover{
  transform:translate3d(0,-3px,0);
  box-shadow:var(--mo-lift-cyan);
}
html:not([data-mo="off"]) .sl-btn:active,
html:not([data-mo="off"]) .sl-tab:active,
html:not([data-mo="off"]) .hs-chip:active,
html:not([data-mo="off"]) .hs-opt:active,
html:not([data-mo="off"]) .hs-ask-btn:active,
html:not([data-mo="off"]) .hs-story-more:active,
html:not([data-mo="off"]) .hs-svc-cta:not(.hs-svc-cta--disabled):active,
html:not([data-mo="off"]) .ta-nav-home:active,
html:not([data-mo="off"]) #hero-resume:active{
  transform:translate3d(0,0,0) scale(.962);
  box-shadow:none;
  transition-duration:.08s;
}
html:not([data-mo="off"]) .hs-svc-cta--disabled:hover{transform:none;box-shadow:none}

/* 오른쪽 끝 아이콘·화살표는 hover 시 앞으로 */
html:not([data-mo="off"]) .sl-btn>svg:last-child,
html:not([data-mo="off"]) .hs-ask-btn>svg:last-child,
html:not([data-mo="off"]) .hs-arrow{transition:transform .3s var(--mo-pop)}
html:not([data-mo="off"]) .sl-btn:hover>svg:last-child,
html:not([data-mo="off"]) .hs-ask-btn:hover>svg:last-child{transform:translate3d(5px,0,0)}
html:not([data-mo="off"]) .hs-svc-cta:hover .hs-arrow,
html:not([data-mo="off"]) .hs-story-card:hover .hs-arrow,
html:not([data-mo="off"]) .sl-card:hover .hs-arrow{transform:translate3d(6px,0,0)}

/* ── 3. 포커스 링 (접근성) ── */
html:not([data-mo="off"]) a:focus-visible,
html:not([data-mo="off"]) button:focus-visible,
html:not([data-mo="off"]) summary:focus-visible,
html:not([data-mo="off"]) [tabindex]:focus-visible,
html:not([data-mo="off"]) input:focus-visible,
html:not([data-mo="off"]) select:focus-visible,
html:not([data-mo="off"]) textarea:focus-visible{
  outline:2px solid var(--color-cyan-signal);
  outline-offset:3px;
}
html:not([data-mo="off"]) .sl-btn:focus-visible,
html:not([data-mo="off"]) .hs-chip:focus-visible,
html:not([data-mo="off"]) .hs-opt:focus-visible,
html:not([data-mo="off"]) .sl-tab:focus-visible{transform:translate3d(0,-3px,0)}

/* ── 4. 상단 내비 — 스크롤 시 축소 + 블러 + 진행 바 ── */
html:not([data-mo="off"]) .sl-nav{
  transition:height .36s var(--mo-out),background-color .36s ease,
             box-shadow .36s ease,border-color .36s ease;
}
html:not([data-mo="off"]) .sl-nav.is-scrolled{
  height:52px;
  background:rgba(255,255,255,.74);
  -webkit-backdrop-filter:blur(18px) saturate(165%);
  backdrop-filter:blur(18px) saturate(165%);
  border-bottom-color:transparent;
  box-shadow:0 1px 0 rgba(12,10,9,.07),0 16px 36px -30px rgba(12,10,9,.9);
}
html:not([data-mo="off"]) .sl-nav-logo{
  display:inline-block;
  transition:transform .3s var(--mo-pop),opacity .2s ease;
}
html:not([data-mo="off"]) .sl-nav-logo:hover{transform:translate3d(0,-1px,0) scale(1.04)}
html:not([data-mo="off"]) .sl-nav-link{position:relative;transition:color .2s ease}
html:not([data-mo="off"]) .sl-nav-link::after{
  content:"";position:absolute;left:12px;right:12px;bottom:3px;height:1.5px;
  border-radius:2px;background:var(--color-cyan-signal);
  transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .32s var(--mo-out);
}
html:not([data-mo="off"]) .sl-nav-link:hover::after,
html:not([data-mo="off"]) .sl-nav-link:focus-visible::after{transform:scaleX(1)}

/* 스크롤 진행 바 — motion.js 가 .sl-nav 안에 주입 */
html[data-mo="on"] .mo-prog{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  overflow:hidden;pointer-events:none;
}
html[data-mo="on"] .mo-prog>i{
  display:block;height:100%;background:var(--color-cyan-signal);
  transform:scaleX(var(--mo-p,0));transform-origin:0 50%;
  will-change:transform;
}

/* ── 5. 링크 · 푸터 · 로고 로우 · 뱃지 ── */
html:not([data-mo="off"]) .sl-link{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .34s var(--mo-out),color .2s ease;
}
html:not([data-mo="off"]) .sl-link:hover{background-size:100% 1px;text-decoration:none}
html:not([data-mo="off"]) .sl-footer-col a{transition:color .2s ease,transform .26s var(--mo-out)}
html:not([data-mo="off"]) .sl-footer-col a:hover{transform:translate3d(4px,0,0)}
html:not([data-mo="off"]) .sl-logo-row{transition:filter .45s ease,opacity .45s ease}
html:not([data-mo="off"]) .sl-logo-row:hover{filter:grayscale(0);opacity:1}
html:not([data-mo="off"]) .sl-badge{transition:transform .28s var(--mo-out),border-color .2s ease}
html:not([data-mo="off"]) .sl-badge:hover{transform:translate3d(0,-2px,0);border-color:var(--color-stone-muted)}

/* ── 6. 미디어 — 프리뷰 lift · 포스터 subtle zoom ── */
html:not([data-mo="off"]) .sl-preview{
  transition:transform .5s var(--mo-out),box-shadow .5s var(--mo-out);
}
html:not([data-mo="off"]) .sl-preview:hover{transform:translate3d(0,-7px,0)}

html:not([data-mo="off"]) .hs-svc-media{
  transition:transform .45s var(--mo-out),box-shadow .45s var(--mo-out),border-color .26s ease;
}
/* .hs-svc-media 는 인라인 box-shadow/border 를 갖고 있어 hover 만 !important */
html:not([data-mo="off"]) .hs-svc-media[data-zoomable]:hover{
  transform:translate3d(0,-6px,0);
  box-shadow:0 26px 54px -26px rgba(12,10,9,.42) !important;
  border-color:var(--color-stone-muted) !important;
}
html:not([data-mo="off"]) .hs-svc-media img,
html:not([data-mo="off"]) .hs-svc-media video{transition:transform .65s var(--mo-out)}
html:not([data-mo="off"]) .hs-svc-media[data-zoomable]:hover img,
html:not([data-mo="off"]) .hs-svc-media[data-zoomable]:hover video{transform:scale(1.04)}
html:not([data-mo="off"]) .hs-svc-preview>span{transition:transform .38s var(--mo-pop)}
html:not([data-mo="off"]) .hs-svc-media[data-zoomable]:hover .hs-svc-preview>span{transform:scale(1.12)}

html:not([data-mo="off"]) .hs-story-card-media img{transition:transform .62s var(--mo-out)}
html:not([data-mo="off"]) .hs-story-card:hover .hs-story-card-media img{transform:scale(1.07)}
html:not([data-mo="off"]) .hs-story-mcard-thumb img{transition:transform .55s var(--mo-out)}
html:not([data-mo="off"]) .hs-story-mcard:hover .hs-story-mcard-thumb img{transform:scale(1.07)}

/* ── 7. 입력 — 포커스 시 살짝 떠오르기 ── */
html:not([data-mo="off"]) .hs-askbox{
  transition:border-color .22s ease,box-shadow .28s var(--mo-out),transform .28s var(--mo-out);
}
html:not([data-mo="off"]) .hs-askbox:focus-within{transform:translate3d(0,-2px,0)}
html:not([data-mo="off"]) .sl-field,
html:not([data-mo="off"]) .hs-field{
  transition:border-color .2s ease,box-shadow .24s var(--mo-out),transform .24s var(--mo-out);
}
html:not([data-mo="off"]) .sl-field:focus,
html:not([data-mo="off"]) .hs-field:focus{transform:translate3d(0,-1px,0)}

/* ── 8. stagger — 컨테이너가 뷰포트에 들면 자식이 차례로 ── */
@supports (translate:0 1px){
  html[data-mo="on"] .mo-stg{
    opacity:1 !important;translate:none !important;scale:none !important;
  }
  html[data-mo="on"] .mo-stg>.mo-i{opacity:0}
  html[data-mo="on"] .mo-stg.is-in>.mo-i,
  html[data-mo="on"] .mo-in{
    animation:mo-rise-in .76s var(--mo-ease) var(--mo-d,0s) both;
  }
  @keyframes mo-rise-in{
    from{opacity:0;translate:0 30px;scale:.985}
    to{opacity:1;translate:none;scale:none}
  }
}

/* ── 9. 스크롤 리빌 강화 (파일 끝 — transition 선언 충돌 방지) ─────
   페이지마다 접두사가 다른 기존 리빌 클래스를 한 번에 끌어올린다.
   거리 16~22px → 34px, 스케일 + 강한 감속 이징.
   transition 목록은 위 컴포넌트 규칙의 상위집합이라, 리빌 대상이면서
   카드/버튼/프리뷰인 요소도 hover 전이를 잃지 않는다. */
@supports (translate:0 1px){
  html:not([data-mo="off"]) .hs-reveal,
  html:not([data-mo="off"]) .ta-reveal,
  html:not([data-mo="off"]) .am-reveal,
  html:not([data-mo="off"]) .ac-reveal,
  html:not([data-mo="off"]) .sl-reveal{
    opacity:0;
    transform:none;              /* 페이지 기본 translateY 를 translate 채널로 이관 */
    translate:0 var(--mo-rise);
    scale:.985;
    transition:opacity var(--mo-dur) var(--mo-ease),
               translate var(--mo-dur) var(--mo-ease),
               scale var(--mo-dur) var(--mo-ease),
               transform .42s var(--mo-out),
               box-shadow .45s var(--mo-out),
               border-color .26s ease,
               background-color .2s ease,
               color .2s ease;
    /* will-change 는 두지 않는다 — 페이지당 리빌 요소가 20~34개라
       상시 레이어 승격 비용이 이득보다 크다. 전이 중엔 브라우저가 알아서 승격한다. */
  }
  html:not([data-mo="off"]) .hs-reveal[data-shown="1"],
  html:not([data-mo="off"]) .ta-reveal[data-shown="1"],
  html:not([data-mo="off"]) .am-reveal[data-shown="1"],
  html:not([data-mo="off"]) .sl-reveal[data-shown="1"],
  html:not([data-mo="off"]) .ac-reveal.show,
  html.ta-reveal-fallback:not([data-mo="off"]) .ta-reveal,
  html.am-reveal-fallback:not([data-mo="off"]) .am-reveal{
    opacity:1;translate:none;scale:none;
  }
}

/* ── 10. 모션 감소 — 강화분 전면 무효화 ── */
@media (prefers-reduced-motion:reduce){
  .hs-reveal,.ta-reveal,.am-reveal,.ac-reveal,.sl-reveal,
  .mo-stg,.mo-stg>*,.mo-i,.mo-in{
    opacity:1 !important;transform:none !important;
    translate:none !important;scale:none !important;
    animation:none !important;filter:none !important;will-change:auto !important;
  }
  .mo-prog{display:none !important}
  html *,html *::before,html *::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}

/* ── 11. 인쇄 — 항상 보이게 ── */
@media print{
  .hs-reveal,.ta-reveal,.am-reveal,.ac-reveal,.sl-reveal,.mo-stg>*,.mo-i,.mo-in{
    opacity:1 !important;transform:none !important;
    translate:none !important;scale:none !important;animation:none !important;
  }
  .mo-prog{display:none !important}
}