/* 구떼 도판 리빌 — 사진이 «인쇄된 도판»처럼 위에서 아래로 조용히 펼쳐진다.
   DESIGN.md §15 안에서만 움직인다: 바운스·스프링 없음, 400ms(motion-slow), ease-enter,
   새 색·그림자 없음. html.plate-fx 는 plate-reveal.js 가 «모션 줄이기 꺼짐 + IntersectionObserver 지원»일 때만
   붙이므로, JS 가 없거나 모션 줄이기면 아래 규칙은 하나도 적용되지 않는다(사진은 처음부터 보임). */

/* 닫힌 상태(= 아직 안 본 도판): 전환 없이 즉시. 열릴 때(.is-in)만 전환이 걸려 «닫힘 400ms + 열림 400ms» 가 되지 않는다. */
html.plate-fx .pr-t,
html.plate-fx #galleryMain.pr-gallery:not(.is-in){
  clip-path:inset(0 0 100% 0);
  scale:1.06;
}
html.plate-fx .pr-t.is-in,
html.plate-fx #galleryMain.pr-gallery.is-in{
  clip-path:inset(0);
  scale:1;
  transition:clip-path 400ms var(--ease-enter),scale 400ms var(--ease-enter);
}

/* 안착(scale 1.06→1) 중에 사진이 카드 폭 밖으로 번지지 않게 바깥 틀에서 자른다(실측: 제품컷 흰 배경이 9px 삐져나옴) */
html.plate-fx .pcard,
html.plate-fx .equip-shot{overflow:hidden}

/* 첫 화면 큰 사진: 자르지 않는다(LCP·첫인상 보호). 보여질 때 살짝 안착하고, 스크롤에 맞춰 사진만 천천히 따라온다. */
html.plate-fx .plate{overflow:hidden}
html.plate-fx .plate img[data-fade]{
  scale:1.14;
  translate:0 var(--pr-y,0px);
  transition:opacity var(--m-std) var(--ease-enter),scale 400ms var(--ease-enter);
  will-change:translate;
}
html.plate-fx .plate img[data-fade].in{scale:1.08}

@media (prefers-reduced-motion: reduce){
  html.plate-fx .pr-t,
  html.plate-fx #galleryMain.pr-gallery,
  html.plate-fx .plate img[data-fade]{clip-path:none;scale:1;translate:none;transition:none}
}
@media print{
  html.plate-fx .pr-t,
  html.plate-fx #galleryMain.pr-gallery,
  html.plate-fx .plate img[data-fade]{clip-path:none !important;scale:1 !important;translate:none !important}
}