/* =========================================================
   OSHINO LOADING ANIMATION
   - 8色のカラーバーが左から順番に上から下へかぶさる
   - 中央にLEGEND WALKERロゴを表示
   - PC/SP共通
   ========================================================= */

/* ===== ローディングオーバーレイ ===== */
.oshino-loading {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

/* ===== LEGEND WALKER ロゴ ===== */
/* 画像のネイティブサイズ（200×44）で等倍表示。拡大しないことで粗さを防ぐ */
.oshino-loading__logo {
  position: relative;
  z-index: 10;
  width: 200px;
  height: 44px;
  opacity: 0;
  transform: scale(0.96);
  animation: oshinoLogoFadeIn 0.6s ease-out 0.15s forwards;
}

/* ===== 8色バー：画面を縦に8分割 ===== */
.oshino-loading__bars {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;
}

.oshino-loading__bar {
  flex: 1 1 0;
  height: 100%;
  transform: translateY(-100%);
  will-change: transform;
}

/* OSHINO 8色（左から順番に：淡色→濃色のグラデーション） */
.oshino-loading__bar:nth-child(1) { background: #C2E4F7; } /* ブルー（薄） */
.oshino-loading__bar:nth-child(2) { background: #C2E7B1; } /* グリーン（薄） */
.oshino-loading__bar:nth-child(3) { background: #E7D7F3; } /* パープル */
.oshino-loading__bar:nth-child(4) { background: #F8E0DB; } /* ピンク */
.oshino-loading__bar:nth-child(5) { background: #FBECC4; } /* イエロー（薄） */
.oshino-loading__bar:nth-child(6) { background: #FFD494; } /* オレンジ */
.oshino-loading__bar:nth-child(7) { background: #FF8A7E; } /* レッド */
.oshino-loading__bar:nth-child(8) { background: #464646; } /* ブラック */

/* 各バーが時間差で上から下へ落ちる */
.oshino-loading__bar:nth-child(1) { animation: oshinoBarCover 0.55s cubic-bezier(0.65, 0, 0.35, 1) 0.90s forwards; }
.oshino-loading__bar:nth-child(2) { animation: oshinoBarCover 0.55s cubic-bezier(0.65, 0, 0.35, 1) 1.00s forwards; }
.oshino-loading__bar:nth-child(3) { animation: oshinoBarCover 0.55s cubic-bezier(0.65, 0, 0.35, 1) 1.10s forwards; }
.oshino-loading__bar:nth-child(4) { animation: oshinoBarCover 0.55s cubic-bezier(0.65, 0, 0.35, 1) 1.20s forwards; }
.oshino-loading__bar:nth-child(5) { animation: oshinoBarCover 0.55s cubic-bezier(0.65, 0, 0.35, 1) 1.30s forwards; }
.oshino-loading__bar:nth-child(6) { animation: oshinoBarCover 0.55s cubic-bezier(0.65, 0, 0.35, 1) 1.40s forwards; }
.oshino-loading__bar:nth-child(7) { animation: oshinoBarCover 0.55s cubic-bezier(0.65, 0, 0.35, 1) 1.50s forwards; }
.oshino-loading__bar:nth-child(8) { animation: oshinoBarCover 0.55s cubic-bezier(0.65, 0, 0.35, 1) 1.60s forwards; }

@keyframes oshinoLogoFadeIn {
  0%   { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes oshinoBarCover {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}

/* ===== 完了後のフェードアウト ===== */
.oshino-loading--hide {
  animation: oshinoFadeOutAll 0.5s ease 0s forwards;
}
@keyframes oshinoFadeOutAll {
  0%   { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

/* ===== prefers-reduced-motion 対応（アクセシビリティ） ===== */
@media (prefers-reduced-motion: reduce) {
  .oshino-loading__logo,
  .oshino-loading__bar,
  .oshino-loading--hide {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
  }
}