/* =====================================================================
   トップページ スライダー用ローダー（loader-jump v2 を転用）
   - .slider-loader : スライダー全体を覆うオーバーレイ
   - .loader        : ジャンプする円（loader-jump-v2.html の「ここから〜ここまで」）
   画像の読み込みが終わると js/slider-loader.js が .is-hidden を付けてフェードアウト
   ===================================================================== */

/* ---- オーバーレイ（スライダーの上に重ねる） ---- */
.slider-loader {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;                 /* Swiperのページネーション(z-index:10)より上 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fcfcfc;         /* ページ背景（base.css の body）と同じ色 */
  transition: opacity .6s ease, visibility .6s ease;
}

/* 読み込み完了後（JSで付与） */
.slider-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ===== ここから loader-jump v2 ===== */

/* ---- 入れ物（円と影の置き場所） ---- */
.slider-loader .loader {
  position: relative;
  width: 20px;
  height: 24px;
  margin-top: 20px;     /* ジャンプの高さ(20px)と同じ */
}

/* ---- 影（円の下） ---- */
.slider-loader .loader::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20px;
  height: 5px;
  border-radius: 50%;
  background: #000;
  filter: blur(1.5px);
  opacity: .45;         /* 影の濃さ（通常時）。元は .3 */
  animation: loader-shadow 1.1s infinite;
}

/* ---- 円 ---- */
.slider-loader .loader::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1c1d1d;
  transform-origin: center bottom;
  animation: loader-jump 1.1s infinite;
}

/* ---- 円の動き ---- */
@keyframes loader-jump {
  0%   { transform: translate(0, 0)     rotate(0deg)   scale(1, 1);      animation-timing-function: ease-in-out; }
  7%   { transform: translate(3px, 0)   rotate(0deg)   scale(1, 1); }
  19%  { transform: translate(-4px, 0)  rotate(0deg)   scale(1, 1); }
  31%  { transform: translate(4px, 0)   rotate(0deg)   scale(1, 1); }
  44%  { transform: translate(-3px, 0)  rotate(0deg)   scale(1, 1); }
  50%  { transform: translate(0, 0)     rotate(0deg)   scale(1, 1);      animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  60%  { transform: translate(0, -15px) rotate(-6deg)  scale(.78, 1.3);  animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  72%  { transform: translate(0, -20px) rotate(-15deg) scale(1.15, .82); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  80%  { transform: translate(0, -10px) rotate(-6deg)  scale(.88, 1.18); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  88%  { transform: translate(0, 0)     rotate(0deg)   scale(1.3, .55);  animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  94%  { transform: translate(0, 0)     rotate(0deg)   scale(.94, 1.08); animation-timing-function: ease-in-out; }
  100% { transform: translate(0, 0)     rotate(0deg)   scale(1, 1); }
}

/* ---- 影の動き ---- */
@keyframes loader-shadow {
  0%   { transform: translateX(0)    scaleX(1);    opacity: .45;  animation-timing-function: ease-in-out; }
  7%   { transform: translateX(3px)  scaleX(1); }
  19%  { transform: translateX(-4px) scaleX(1); }
  31%  { transform: translateX(4px)  scaleX(1); }
  44%  { transform: translateX(-3px) scaleX(1); }
  50%  { transform: translateX(0)    scaleX(1);    opacity: .45;  animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  60%  { transform: translateX(0)    scaleX(.55);  opacity: .21; animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  72%  { transform: translateX(0)    scaleX(.36);  opacity: .1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  80%  { transform: translateX(0)    scaleX(.65);  opacity: .24; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  88%  { transform: translateX(0)    scaleX(1.3);  opacity: .65; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  94%  { transform: translateX(0)    scaleX(.98);  opacity: .45; }
  100% { transform: translateX(0)    scaleX(1);    opacity: .45; }
}

/* ---- 「動きを減らす」設定のときは止める ---- */
@media (prefers-reduced-motion: reduce) {
  .slider-loader .loader::before,
  .slider-loader .loader::after { animation: none; }
}

/* ===== ここまで loader-jump v2 ===== */