/* 모션 토큰 · 등장 효과 */
:root{--t-fast:.15s;--t-base:.3s;--t-slow:.7s;--ease:cubic-bezier(.2,.7,.2,1)}
.js .rv{opacity:0;transform:translateY(24px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);transition-delay:var(--rv-d,0ms)}
.js .rv.is-in{opacity:1;transform:none}
.js .rv.is-done{transition:none}
/* 히어로 첫 등장: 아이브로우 → 제목(마스크) → 본문 → 버튼 */
.js .hero__slide.is-on .hero__eb,.js .hero__slide.is-on .hero__lead,.js .hero__slide.is-on .btn-group{animation:hero-up .7s var(--ease) both}
.js .hero__slide.is-on .hero__title{animation:hero-mask .8s var(--ease) both;animation-delay:.08s}
.js .hero__slide.is-on .hero__lead{animation-delay:.22s}
.js .hero__slide.is-on .btn-group{animation-delay:.32s}
@keyframes hero-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes hero-mask{from{clip-path:inset(0 0 100% 0);transform:translateY(16px)}to{clip-path:inset(0 0 0 0);transform:none}}
/* 이미지 열림 (대표 모션 2) */
.js .clip{clip-path:inset(0 0 0 100%);transition:clip-path 1s var(--ease)}
.js .clip.is-in{clip-path:inset(0 0 0 0)}
.hero__bar i.is-run{transition:transform 6s linear;transform:scaleX(1)}
/* 이미지 자리 */
.img-fade{opacity:0;transition:opacity .5s var(--ease)}
.img-fade.is-loaded{opacity:1}
/* 완료 체크 */
.done-ic svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:draw .6s .15s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.step:not([hidden]){animation:step-in .35s var(--ease)}
@keyframes step-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* 메뉴·모달 전환 */
.mmenu .mmenu__panel{transform:translateX(100%);transition:transform var(--t-base) var(--ease)}
.mmenu .mmenu__dim{opacity:0;transition:opacity var(--t-base) var(--ease)}
.mmenu.is-open .mmenu__panel{transform:none}
.mmenu.is-open .mmenu__dim{opacity:1}
.lightbox,.search-pop{transition:opacity var(--t-base) var(--ease)}
.lightbox .lightbox__fig{transition:transform var(--t-base) var(--ease)}
.lightbox.is-pre,.search-pop.is-pre{opacity:0}
.lightbox.is-pre .lightbox__fig{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .clip{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .js .hero__slide.is-on *{animation:none!important}
  .hero__bar i.is-run{transition:none}
  .done-ic svg path{animation:none;stroke-dashoffset:0}
  .step:not([hidden]){animation:none}
  *{scroll-behavior:auto!important}
}
html.hk-design .rv,html.hk-design .clip{opacity:1!important;transform:none!important;clip-path:none!important}
html.hk-design .hero__slide *{animation:none!important}