/* 喜帖動畫：底圖 + 11 塊逐格精靈圖。
   位置與尺寸全部用百分比換算，所以整張圖可以任意縮放而不跑位。
   每條精靈圖是 n 格橫向排列，img 寬度 = n × 容器寬度，
   translateX(-100%) 正好移動 n 格，配 steps(n) 就是逐格播放。 */

.invite {
  --cw: 1024;           /* 設計稿畫布寬 */
  --ch: 1366;
  --dur: 1.44s;
  position: relative;
  width: 100%;
  max-width: calc(var(--cw) * 1px);
  margin-inline: auto;
  aspect-ratio: var(--cw) / var(--ch);
  background: #fff4de;
  overflow: hidden;
}

.invite > img.base {
  display: block;
  width: 100%;
  height: 100%;
}

/* 靜態疊層（童年照，無損原圖） */
.invite > img.layer,
.invite > .sp {
  position: absolute;
  left: calc(var(--x) / var(--cw) * 100%);
  top: calc(var(--y) / var(--ch) * 100%);
  width: calc(var(--w) / var(--cw) * 100%);
  height: calc(var(--h) / var(--ch) * 100%);
}

.invite > img.layer { display: block; }

.invite > .sp { overflow: hidden; }

.invite > .sp > img {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: calc(var(--n) * 100%);
  max-width: none;
  animation: invite-slide var(--dur) steps(var(--n)) infinite;
}

@keyframes invite-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .invite > .sp > img { animation: none; }
}