/* ============================================
   Loading Screen - Lifestudio Banana
   黄色いバンが走るローディング演出
   ============================================ */

#banana-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  pointer-events: none;
  overflow: hidden;
  background-color: #FFF9F4;
}

/* ============================================
   背景バブル
   ============================================ */
#banana-loading .loading-bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#banana-loading .loading-bubbles span {
  position: absolute;
  bottom: -60px;
  border-radius: 50%;
  opacity: 0;
  animation: bubbleRise linear infinite;
}

/* 各バブルのサイズ・位置・色・タイミング */
#banana-loading .loading-bubbles span:nth-child(1)  { left:  5%; width:18px; height:18px; background:#F5C6B0; animation-duration:3.2s; animation-delay:0.1s; }
#banana-loading .loading-bubbles span:nth-child(2)  { left: 12%; width:12px; height:12px; background:#F5CC1A; animation-duration:2.8s; animation-delay:0.6s; }
#banana-loading .loading-bubbles span:nth-child(3)  { left: 22%; width:22px; height:22px; background:#8FAF8F; animation-duration:3.6s; animation-delay:0.2s; }
#banana-loading .loading-bubbles span:nth-child(4)  { left: 33%; width:14px; height:14px; background:#A47864; animation-duration:2.5s; animation-delay:0.9s; }
#banana-loading .loading-bubbles span:nth-child(5)  { left: 44%; width:20px; height:20px; background:#F5C6B0; animation-duration:3.0s; animation-delay:0.4s; }
#banana-loading .loading-bubbles span:nth-child(6)  { left: 55%; width:10px; height:10px; background:#F5CC1A; animation-duration:2.6s; animation-delay:1.1s; }
#banana-loading .loading-bubbles span:nth-child(7)  { left: 63%; width:16px; height:16px; background:#C49882; animation-duration:3.4s; animation-delay:0.3s; }
#banana-loading .loading-bubbles span:nth-child(8)  { left: 72%; width:24px; height:24px; background:#8FAF8F; animation-duration:2.9s; animation-delay:0.7s; }
#banana-loading .loading-bubbles span:nth-child(9)  { left: 82%; width:12px; height:12px; background:#F5C6B0; animation-duration:3.1s; animation-delay:0.5s; }
#banana-loading .loading-bubbles span:nth-child(10) { left: 91%; width:18px; height:18px; background:#F5CC1A; animation-duration:2.7s; animation-delay:1.3s; }

@keyframes bubbleRise {
  0%   { transform: translateY(0)   scale(1);   opacity: 0; }
  10%  { opacity: 0.7; }
  80%  { opacity: 0.5; }
  100% { transform: translateY(-110vh) scale(0.6); opacity: 0; }
}

/* ============================================
   サイト名エリア（中央）
   ============================================ */
#banana-loading .loading-brand {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0;
  animation: loadingBrandIn 0.7s ease 0.1s forwards;
}

#banana-loading .loading-site-name {
  font-family: 'Josefin Slab', 'Noto Serif JP', serif;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  letter-spacing: 0.25em;
  color: #A47864;
  white-space: nowrap;
  font-weight: 400;
}

#banana-loading .loading-site-name span {
  display: block;
  font-size: clamp(0.6rem, 1.5vw, 0.75rem);
  letter-spacing: 0.35em;
  color: #C4A18A;
  margin-top: 6px;
  font-family: 'Josefin Slab', sans-serif;
  font-weight: 300;
}

/* ライン */
#banana-loading .loading-line {
  width: 0;
  height: 1px;
  background-color: #C49882;
  margin: 14px auto 0;
  animation: loadingLineIn 0.6s ease 0.5s forwards;
}

/* ============================================
   道路（バン走行レーン）
   ============================================ */
#banana-loading .loading-road {
  position: absolute;
  bottom: 28%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0px,
    #C49882 60px,
    #C49882 calc(100% - 60px),
    transparent 100%
  );
  opacity: 0.4;
}

/* ラッパーがアニメーション担当（左→中央停車→右へ） */
#banana-loading .loading-van-wrap {
  position: absolute;
  bottom: 28%;
  left: 0;
  width: 110px;
  height: 60px;
  overflow: visible;
  pointer-events: none;
  transform: translateX(-130px);
  animation: vanDrive 3.0s ease 0.3s forwards;
}

/* SVG自体は反転のみ担当 */
#banana-loading .loading-van {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 110px;
  height: auto;
  transform: scaleX(-1);
  transform-origin: center center;
}

/* 車輪回転：走行中のみ（停車中は止まる） */
#banana-loading .loading-van .van-wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: wheelSpin 3.0s linear 0.3s forwards;
}

@media (max-width: 551px) {
  #banana-loading .loading-van-wrap {
    width: 70px;
    height: 40px;
    transform: translateX(-80px);
  }
  #banana-loading .loading-van {
    width: 70px;
  }
}

/* ============================================
   フェードアウト
   ============================================ */
#banana-loading.is-open {
  animation: loadingFadeOut 0.5s ease forwards;
}

#banana-loading.is-done {
  display: none;
}

/* ============================================
   Keyframes
   ============================================ */

@keyframes loadingBrandIn {
  to { opacity: 1; }
}

@keyframes loadingLineIn {
  to { width: 100px; }
}

/* 左端 → 中央停車 → 右端へ走り去る */
@keyframes vanDrive {
  0%   { transform: translateX(-130px); }           /* 左端外 */
  38%  { transform: translateX(calc(50vw - 55px)); } /* 中央に到着・減速 */
  42%  { transform: translateX(calc(50vw - 55px)); } /* 停車（ぴたっと止まる） */
  60%  { transform: translateX(calc(50vw - 55px)); } /* 停車中 */
  62%  { transform: translateX(calc(50vw - 45px)); } /* 発進（小さくぐっと前進） */
  100% { transform: translateX(calc(100vw + 130px)); } /* 右端へ走り去る */
}

/* 車輪：走行・停車・再発進に連動 */
@keyframes wheelSpin {
  0%   { transform: rotate(0deg);    }  /* 走行開始 */
  38%  { transform: rotate(540deg);  }  /* 中央到着 */
  60%  { transform: rotate(540deg);  }  /* 停車中は止まる */
  100% { transform: rotate(1260deg); }  /* 走り去る */
}

@keyframes roadDash {
  from { background-position: 0 0; }
  to   { background-position: 60px 0; }
}

@keyframes loadingFadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}