/* ============================================
   Loading Screen - バナナ演出
   ============================================ */

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

/* ── パーティクル ── */
.loading-particles { position: absolute; inset: 0; }
.loading-particles span {
  position: absolute; bottom: -10px;
  border-radius: 50%; opacity: 0;
  animation: pFloat linear infinite;
}
.loading-particles span:nth-child(1){left:10%;width:6px;height:6px;background:rgba(245,204,90,.3);animation-duration:4s;animation-delay:.2s}
.loading-particles span:nth-child(2){left:25%;width:8px;height:8px;background:rgba(91,140,90,.2);animation-duration:3.5s;animation-delay:.7s}
.loading-particles span:nth-child(3){left:40%;width:5px;height:5px;background:rgba(245,204,90,.25);animation-duration:4.5s;animation-delay:0s}
.loading-particles span:nth-child(4){left:55%;width:7px;height:7px;background:rgba(125,184,125,.2);animation-duration:3.8s;animation-delay:1s}
.loading-particles span:nth-child(5){left:72%;width:9px;height:9px;background:rgba(245,204,90,.3);animation-duration:4.2s;animation-delay:.4s}
.loading-particles span:nth-child(6){left:88%;width:6px;height:6px;background:rgba(91,140,90,.25);animation-duration:3.6s;animation-delay:1.3s}

@keyframes pFloat {
  0%   { transform:translateY(0); opacity:0 }
  15%  { opacity:.7 }
  85%  { opacity:.3 }
  100% { transform:translateY(-105vh); opacity:0 }
}

/* ── バナナコンテナ ── */
.lb {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 160px; height: 180px;
}

/* ── バナナ全体：落下 → バウンス ── */
.lb-banana {
  position: absolute;
  bottom: 20px; left: 50%;
  margin-left: -45px;
  width: 90px; height: 130px;
  animation: bananaDrop 1.2s cubic-bezier(.22,.68,.36,1) forwards;
  transform: translateY(-300px) rotate(-20deg);
}

@keyframes bananaDrop {
  0%   { transform: translateY(-300px) rotate(-20deg); opacity: 0 }
  20%  { opacity: 1 }
  55%  { transform: translateY(0px) rotate(8deg) }
  70%  { transform: translateY(-35px) rotate(-4deg) }
  82%  { transform: translateY(0px) rotate(3deg) }
  90%  { transform: translateY(-10px) rotate(-1deg) }
  100% { transform: translateY(0px) rotate(0deg) }
}

/* ── バナナ本体 ──
   外側の黄色い楕円と、内側のくり抜き楕円で三日月カーブを作る
   overflow:hidden で外枠内だけ表示 */
.lb-peel {
  position: relative;
  width: 90px;
  height: 130px;
  overflow: hidden;
  /* 全体を少し回転してバナナらしい傾きに */
  transform: rotate(-10deg);
}

/* 黄色い外側の楕円 */
.lb-peel::before {
  content: '';
  position: absolute;
  width: 90px;
  height: 130px;
  border-radius: 50%;
  background: linear-gradient(
    140deg,
    #FFE566 0%,
    #F5CC5A 40%,
    #E8B830 100%
  );
  box-shadow:
    inset -4px -3px 10px rgba(180,140,20,.3),
    inset 4px 4px 8px rgba(255,240,160,.5);
  left: 0;
  top: 0;
}

/* くり抜き用の楕円（背景色で上書き） */
.lb-peel-inner {
  position: absolute;
  width: 80px;
  height: 130px;
  border-radius: 50%;
  background: #F5F9F5;
  top: -10px;
  left: 35px;
  z-index: 2;
}

/* ── ヘタ ── */
.lb-stem {
  position: absolute;
  top: -2px;
  left: 52px;
  width: 10px;
  height: 20px;
  background: linear-gradient(to bottom, #5C4A1E, #7A6520);
  border-radius: 4px 4px 2px 2px;
  transform: rotate(20deg);
  transform-origin: bottom center;
  z-index: 3;
}

/* ── 影 ── */
.lb-shadow {
  position: absolute;
  bottom: 10px; left: 50%;
  width: 0; height: 8px;
  margin-left: 0;
  background: rgba(45,59,45,.08);
  border-radius: 50%;
  animation: shadowGrow 1.2s cubic-bezier(.22,.68,.36,1) forwards;
}

@keyframes shadowGrow {
  0%   { width: 0; margin-left: 0; opacity: 0 }
  55%  { width: 80px; margin-left: -40px; opacity: .8 }
  70%  { width: 60px; margin-left: -30px; opacity: .5 }
  82%  { width: 75px; margin-left: -37px; opacity: .7 }
  90%  { width: 65px; margin-left: -32px; opacity: .6 }
  100% { width: 70px; margin-left: -35px; opacity: .6 }
}

/* ── ブランド名 ── */
.loading-brand {
  position: absolute;
  top: 24%; left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  opacity: 0;
  animation: fadeIn .8s ease .1s forwards;
}
.loading-site-name {
  font-family: 'Josefin Slab','Noto Serif JP',serif;
  font-size: clamp(1.8rem,4.5vw,2.6rem);
  letter-spacing: .25em;
  color: #5B8C5A;
  white-space: nowrap;
  font-weight: 400;
}
.loading-site-name span {
  display: block;
  font-size: clamp(1rem,2vw,1.2rem);
  letter-spacing: .35em;
  color: #7DB87D;
  margin-top: 6px;
  font-weight: 300;
}
.loading-line {
  width: 0; height: 1px;
  background: #7DB87D;
  margin: 14px auto 0;
  animation: lineGrow .6s ease .5s forwards;
}

/* ── フェードアウト ── */
#banana-loading.is-open {
  animation: loadOut .5s ease forwards;
}
#banana-loading.is-done { display: none }

/* ── 共通キーフレーム ── */
@keyframes fadeIn  { to { opacity:1 } }
@keyframes lineGrow { to { width:100px } }
@keyframes loadOut { 0%{opacity:1} 100%{opacity:0} }

/* ── SP ── */
@media (max-width:551px) {
  .lb { width: 120px; height: 140px }
  .lb-banana { width: 70px; height: 100px; margin-left: -35px }
  .lb-peel { width: 70px; height: 100px }
  .lb-peel::before { width: 70px; height: 100px }
  .lb-peel-inner { width: 62px; height: 100px; top: -8px; left: 28px }
  .lb-stem { top: -2px; left: 40px; width: 8px; height: 16px }
  .loading-brand { top: 20% }
}