/* 등장 효과 — assets/js/motion.js 가 html.motion 을 켤 때만 동작한다. 스크립트가 없으면 전부 그대로 보인다. */
html.motion {
  --motion-ease:cubic-bezier(.16,1,.3,1)}

/* 스크롤하면 떠오르기 */
html.motion .rv {
  opacity:0;
  transform:translateY(20px);
  transition:opacity .9s var(--motion-ease),transform .9s var(--motion-ease);
  transition-delay:var(--rv-delay,0ms)}
html.motion .rv.in {
  opacity:1;
  transform:none}

/* 첫 화면 제목 — 줄마다 아래에서 솟아오르기 */
html.motion .ln {
  display:block;
  overflow:hidden;
  padding-bottom:.08em;
  margin-bottom:-.08em}
html.motion .ln > span {
  display:block;
  animation:motion-line-up 1.1s var(--motion-ease) both;
  animation-delay:var(--ln-delay,0ms)}

/* 첫 화면 그림 — 커튼 걷히듯 열기 */
html.motion .work-stage {
  animation:motion-curtain 1.4s var(--motion-ease) both;
  animation-delay:var(--curtain-delay,0ms)}

@keyframes motion-line-up {
  from {
  transform:translateY(108%)}
  to {
  transform:none}
}
@keyframes motion-curtain {
  from {
  clip-path:inset(0 0 100% 0)}
  to {
  clip-path:inset(0 0 0 0)}
}