/* ============================================
   Footprint Loader — SHOPページ専用ローディング演出
   足跡が下から上へ表示(約1.4s) → ロゴ中央フェードイン(約1.5s) → 非表示
   ============================================ */

#footprintLoader {
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

#footprintLoader.fp-hide {
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}

/* 足跡トレイル容器（元画像のアスペクト比 3318/4092） */
.fp-trail {
  position: relative;
  width: min(72vw, 400px);
  aspect-ratio: 3318 / 4092;
}

/* 個別足跡スプライト（JSが left/top/width を設定） */
.fp-sprite {
  position: absolute;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.5) translateY(12px);
  transition: opacity .38s ease, transform .38s ease;
  will-change: opacity, transform;
}

.fp-sprite.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) translateY(0);
}

/* 足跡フェードアウト（ロゴ表示と同時に下→上順に消える） */
.fp-sprite.hide {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.8) translateY(-6px);
}

/* Footprint ロゴ（中央フェードイン） */
#fpLogo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(64vw, 720px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.9);
  transition: opacity .9s ease, transform .9s ease;
}

#fpLogo.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}