/* ============================================================
   Voyager — First-load Loading Animation（ナビキャラクター）
   irokoto風の全画面プリローダー。ナビ(navi.png)がふわふわ浮遊しつつ
   くるっと回転して魔法をかける演出（金色スパークル）を行い、
   読み込み完了でフェードアウトする。すべて .vge-loader 配下にスコープ。
   ============================================================ */
.vge-loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background:
    radial-gradient(120% 90% at 50% 32%, rgba(27, 62, 116, .55), transparent 55%),
    linear-gradient(160deg, #0a1a38 0%, #071328 50%, #050d1f 100%);
  color: #dfe9ff;
  font-family: "Noto Sans JP", sans-serif;
  transition: opacity .8s ease, visibility .8s ease;
}
.vge-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── ステージ（キャラ＋リング＋スパークル） ── */
.vge-loader__stage {
  position: relative;
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* コンパス風・回転する破線リング（先端に灯台の灯） */
.vge-loader__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 230px;
  height: 230px;
  margin: -115px 0 0 -115px;
  border-radius: 50%;
  border: 2px dashed rgba(159, 179, 214, .45);
  animation: vgeSpin 9s linear infinite;
}
.vge-loader__ring::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: #ffd23a;
  box-shadow: 0 0 14px 2px rgba(255, 210, 58, .8);
}
@keyframes vgeSpin { to { transform: rotate(360deg); } }

/* キャラ背後のグロー（魔法発動時に強く光る） */
.vge-loader__stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 210, 255, .4), transparent 62%);
  filter: blur(8px);
  animation: vgeGlow 3.2s ease-in-out infinite;
}
@keyframes vgeGlow {
  0%, 50%  { opacity: .45; transform: scale(.9); }
  68%      { opacity: 1;   transform: scale(1.18); }   /* 魔法発動の閃光 */
  85%,100% { opacity: .45; transform: scale(.9); }
}

/* ナビキャラクター：浮遊（親）＋くるっと回転（子img） */
.vge-loader__char {
  position: relative;
  z-index: 2;
  width: 168px;
  height: 168px;
  animation: vgeFloat 3.4s ease-in-out infinite;
  filter: drop-shadow(0 12px 26px rgba(95, 224, 255, .35));
}
.vge-loader__char img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 55%;
  animation: vgeCast 3.2s ease-in-out infinite;
}
@keyframes vgeFloat {
  0%, 100% { transform: translateY(-7px); }
  50%      { transform: translateY(7px); }
}
/* くるっと1回転＋発動時にわずかに拡大（魔法をかける所作） */
@keyframes vgeCast {
  0%, 52%   { transform: rotate(0deg) scale(1); }
  60%       { transform: rotate(-14deg) scale(1.03); }   /* タメ */
  84%       { transform: rotate(346deg) scale(1.08); }   /* くるっと回転 */
  92%, 100% { transform: rotate(360deg) scale(1); }
}

/* ── 魔法のスパークル（金色の四芒星が発動時にきらめく） ── */
.vge-loader__sparks {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.vge-loader__spark {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #ffe27a;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  box-shadow: 0 0 8px 2px rgba(255, 210, 58, .7);
  opacity: 0;
  transform: scale(.2);
  animation: vgeTwinkle 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes vgeTwinkle {
  0%, 54%   { opacity: 0; transform: scale(.2) rotate(0deg); }
  64%       { opacity: 1; transform: scale(1) rotate(25deg); }
  76%       { opacity: .8; transform: scale(.65) rotate(40deg); }
  88%, 100% { opacity: 0; transform: scale(.2) rotate(60deg); }
}
/* 6つのスパークルを周囲に配置＋発動タイミングをずらす */
.vge-loader__spark:nth-child(1) { top: 10%;  left: 24%; width: 16px; height: 16px; animation-delay: 0s; }
.vge-loader__spark:nth-child(2) { top: 20%;  left: 74%; width: 12px; height: 12px; animation-delay: .12s; }
.vge-loader__spark:nth-child(3) { top: 54%;  left: 84%; width: 15px; height: 15px; animation-delay: .06s; }
.vge-loader__spark:nth-child(4) { top: 78%;  left: 66%; width: 11px; height: 11px; animation-delay: .18s; }
.vge-loader__spark:nth-child(5) { top: 72%;  left: 18%; width: 14px; height: 14px; animation-delay: .09s; }
.vge-loader__spark:nth-child(6) { top: 38%;  left: 10%; width: 12px; height: 12px; animation-delay: .15s; }

/* ── ブランド（VOYAGER を大きく強調） ── */
.vge-loader__brand {
  margin: 4px 0 0;
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  letter-spacing: .32em;
  font-size: 40px;
  line-height: 1;
  text-indent: .32em;
  background: linear-gradient(180deg, #ffffff 0%, #d7e6ff 55%, #9dc0ef 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(120, 170, 255, .45));
}
.vge-loader__tag {
  margin: 6px 0 0;
  font-size: 12px;
  letter-spacing: .26em;
  color: #9fb3d6;
}

/* ── 進捗バー＋パーセント ── */
.vge-loader__bar {
  margin-top: 4px;
  width: 220px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}
.vge-loader__bar-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #5fe0ff, #ffd23a);
  box-shadow: 0 0 10px rgba(95, 224, 255, .6);
  transition: width .3s ease;
}
.vge-loader__pct {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  letter-spacing: .16em;
  color: #9fb3d6;
}

/* ── モバイル ── */
@media (max-width: 767px) {
  .vge-loader__stage { width: 200px; height: 200px; }
  .vge-loader__ring { width: 190px; height: 190px; margin: -95px 0 0 -95px; }
  .vge-loader__char { width: 140px; height: 140px; }
  .vge-loader__brand { font-size: 32px; }
}

/* ── モーション低減 ── */
@media (prefers-reduced-motion: reduce) {
  .vge-loader__ring,
  .vge-loader__stage::before,
  .vge-loader__char,
  .vge-loader__char img,
  .vge-loader__spark { animation: none !important; }
  .vge-loader__spark { opacity: 0; }
}