/* ── motion — 스크롤 리빌 · 호버 리프트 ──────────────────────────────
   국문 원본(kowonps.com/en)의 인터랙션을 옮긴 것. 값은 원본에서 그대로 딴다:
     reveal          0.9s  cubic-bezier(.16,1,.3,1)  translateY(28px)
     reveal-stagger  0.8s  같은 커브, 자식마다 90ms 씩 밀림
     lift            0.55s translateY(-6px) + 핑크 글로우 그림자
   JS 가 없거나 죽으면 글이 영영 안 보이면 안 된다. 그래서 숨기는 규칙은
   전부 html.js 아래에만 둔다 — 스크립트가 <html> 에 js 를 달아야 작동한다. */

/* ── 스크롤 리빌 ──────────────────────────────────────────── */
.js .reveal{
  opacity:0;transform:translateY(28px);
  will-change:opacity,transform;
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);
}
.js .reveal.revealed{opacity:1;transform:translateY(0);will-change:auto}

/* 자식이 차례로 올라온다. 원본과 같은 90ms 간격, 8번째까지. */
.js .reveal-stagger > *{
  opacity:0;transform:translateY(24px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
}
.js .reveal-stagger.revealed > *{opacity:1;transform:translateY(0)}
.js .reveal-stagger.revealed > :nth-child(1){transition-delay:0s}
.js .reveal-stagger.revealed > :nth-child(2){transition-delay:90ms}
.js .reveal-stagger.revealed > :nth-child(3){transition-delay:180ms}
.js .reveal-stagger.revealed > :nth-child(4){transition-delay:270ms}
.js .reveal-stagger.revealed > :nth-child(5){transition-delay:360ms}
.js .reveal-stagger.revealed > :nth-child(6){transition-delay:450ms}
.js .reveal-stagger.revealed > :nth-child(7){transition-delay:540ms}
.js .reveal-stagger.revealed > :nth-child(8){transition-delay:630ms}
.js .reveal-stagger.revealed{will-change:auto}

/* ── 호버 리프트 ──────────────────────────────────────────── */
/* 기존 카드들은 0.18s 짧은 호버를 쓰고 있다. 원본은 0.55s 로 더 느리게 뜬다. */
.lift{transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s cubic-bezier(.16,1,.3,1),border-color .55s}
/* 카드가 stagger 의 자식이기도 하면 `.reveal-stagger.revealed > *` 의
   transform:translateY(0) 이 `.lift:hover` 보다 우선순위가 높아 호버가 먹히지 않는다.
   그 경우를 같은 무게로 한 번 더 적어 호버가 이기게 한다. */
@media (hover:hover){
  .lift:hover,.lift:focus-visible,
  .js .reveal-stagger.revealed > .lift:hover,
  .js .reveal-stagger.revealed > .lift:focus-visible{
    transform:translateY(-6px);
    box-shadow:0 26px 52px -30px rgba(196,0,78,.55);
  }
  /* 리빌이 끝난 카드는 호버 곡선(0.55s)을 되찾는다 */
  .js .reveal-stagger.revealed > .lift{
    transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s cubic-bezier(.16,1,.3,1),border-color .55s;
  }
}

/* ── 이미지 줌 ────────────────────────────────────────────── */
/* 카드 미디어는 overflow:hidden 이라 안쪽 이미지만 천천히 커진다. */
.zoom-media{overflow:hidden}
@media (hover:hover){
  .zoom-media img{transition:transform .7s cubic-bezier(.16,1,.3,1)}
  .lift:hover .zoom-media img,
  .zoom-media:hover img{transform:scale(1.04)}
}

/* ── 모션 최소화 ──────────────────────────────────────────── */
/* base.css 가 transition-duration 을 0.01ms 로 낮추지만, 그것만으로는
   JS 가 .revealed 를 붙이기 전까지 opacity:0 인 채로 남는다. 아예 끈다. */
@media (prefers-reduced-motion:reduce){
  .js .reveal,
  .js .reveal-stagger > *{opacity:1!important;transform:none!important;transition:none!important}
  .lift:hover,.lift:focus-visible,
  .js .reveal-stagger.revealed > .lift:hover{transform:none!important}
  .zoom-media img{transition:none!important}
  .lift:hover .zoom-media img,.zoom-media:hover img{transform:none!important}
}