/* ============ 高級入場動畫（覆蓋舊的 #loading-overlay 樣式）============ */
:root { --iv-red:#ef3b46; --iv-red-dark:#c0202c; --iv-gold:#ffcf5c; }

#loading-overlay {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1200px 800px at 50% 42%, #16203a 0%, #0a0e1a 60%, #05070f 100%);
  overflow: hidden; perspective: none;
  transition: opacity .8s ease, visibility .8s ease;
  opacity: 1; visibility: visible;
  cursor: pointer;  /* 提示可點擊跳過 */
}
#loading-overlay.hidden { opacity: 0; visibility: hidden; }

#loading-overlay #intro-fx { position: absolute; inset: 0; width: 100%; height: 100%; }

#loading-overlay .iv-stage {
  position: relative; width: 260px; height: 260px;
  display: flex; align-items: center; justify-content: center;
}

/* 充能能量環 */
#loading-overlay .iv-ring {
  position: absolute; width: 250px; height: 250px; border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(255,207,92,0) 0deg, rgba(255,207,92,0) 200deg,
    rgba(255,207,92,.9) 320deg, #fff 350deg, rgba(255,207,92,0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent 66%, #000 68%);
          mask: radial-gradient(farthest-side, transparent 66%, #000 68%);
  opacity: 0; filter: blur(.4px);
}
#loading-overlay.intro-run .iv-ring { animation: ivRingSpin 1.1s linear infinite, ivRingFade .5s ease forwards; }
@keyframes ivRingSpin { to { transform: rotate(360deg); } }
@keyframes ivRingFade { from { opacity: 0; } to { opacity: .95; } }

#loading-overlay .iv-ring.iv-inner {
  width: 210px; height: 210px;
  background: conic-gradient(from 180deg,
    rgba(120,180,255,0) 0deg, rgba(120,180,255,0) 220deg,
    rgba(120,180,255,.8) 330deg, #dff 355deg, rgba(120,180,255,0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent 72%, #000 74%);
          mask: radial-gradient(farthest-side, transparent 72%, #000 74%);
}
#loading-overlay.intro-run .iv-ring.iv-inner { animation: ivRingSpinR 1.6s linear infinite, ivRingFade .6s ease forwards; }
@keyframes ivRingSpinR { to { transform: rotate(-360deg); } }

/* 精靈球 */
#loading-overlay .iv-ball {
  position: relative; width: 168px; height: 168px; border-radius: 50%;
  transform: scale(0); filter: drop-shadow(0 18px 30px rgba(0,0,0,.55));
}
#loading-overlay.intro-run .iv-ball { animation: ivBallIn .65s cubic-bezier(.2,1.4,.35,1) forwards; }
@keyframes ivBallIn {
  0%   { transform: scale(0) rotate(-40deg); }
  70%  { transform: scale(1.08) rotate(6deg); }
  100% { transform: scale(1) rotate(0deg); }
}

#loading-overlay .iv-half { position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; }
#loading-overlay .iv-half.iv-top {
  top: 0; border-radius: 84px 84px 0 0;
  background: linear-gradient(180deg, #ff5a63 0%, var(--iv-red) 55%, var(--iv-red-dark) 100%);
}
#loading-overlay .iv-half.iv-bottom {
  bottom: 0; border-radius: 0 0 84px 84px;
  background: linear-gradient(180deg, #ffffff 0%, #e7ecf3 60%, #cdd6e2 100%);
}
#loading-overlay .iv-ball::after {
  content: ""; position: absolute; left: 16%; top: 10%; width: 46%; height: 34%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,0) 70%);
  border-radius: 50%; pointer-events: none; z-index: 6;
}
#loading-overlay .iv-band {
  position: absolute; top: calc(50% - 8px); left: 0; width: 100%; height: 16px;
  background: linear-gradient(180deg, #1a1f2b, #05070d); z-index: 4;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
}
#loading-overlay .iv-btn {
  position: absolute; top: 50%; left: 50%; width: 46px; height: 46px;
  transform: translate(-50%,-50%); border-radius: 50%; z-index: 5;
  background: radial-gradient(circle at 50% 50%, #fff 0 34%, #cfd6e0 36% 46%, #6b7280 48% 100%);
  box-shadow: 0 0 0 4px #10141d, inset 0 0 6px rgba(0,0,0,.35);
}
#loading-overlay .iv-btn::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: radial-gradient(circle, var(--iv-gold), rgba(255,207,92,0) 70%); opacity: 0;
}
#loading-overlay.intro-run .iv-btn::before { animation: ivBtnPulse .5s ease-in-out .35s 1; }
@keyframes ivBtnPulse {
  0%,100% { opacity: 0; transform: scale(.7); }
  50%     { opacity: 1; transform: scale(1.5); }
}

/* 開球 */
#loading-overlay.burst .iv-half.iv-top    { animation: ivOpenTop .55s cubic-bezier(.5,0,.2,1) forwards; }
#loading-overlay.burst .iv-half.iv-bottom { animation: ivOpenBottom .55s cubic-bezier(.5,0,.2,1) forwards; }
#loading-overlay.burst .iv-band, #loading-overlay.burst .iv-btn { animation: ivFadePart .35s ease forwards; }
@keyframes ivOpenTop    { to { transform: translateY(-190px) scale(.85); opacity: 0; } }
@keyframes ivOpenBottom { to { transform: translateY( 190px) scale(.85); opacity: 0; } }
@keyframes ivFadePart   { to { opacity: 0; } }

/* 光核 / 閃光 / 光芒 */
#loading-overlay .iv-core {
  position: absolute; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(255,255,255,.6) 40%, rgba(255,207,92,0) 70%);
  opacity: 0; z-index: 3;
}
#loading-overlay.burst .iv-core { animation: ivCoreBoom .8s ease-out forwards; }
@keyframes ivCoreBoom {
  0%   { opacity: 0; transform: scale(.2); }
  30%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(22); }
}
#loading-overlay .iv-flash { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 20; pointer-events: none; }
#loading-overlay.burst .iv-flash { animation: ivFlash .5s ease-out forwards; }
@keyframes ivFlash { 0% { opacity: 0; } 18% { opacity: .9; } 100% { opacity: 0; } }

#loading-overlay .iv-rays {
  position: absolute; width: 8px; height: 8px; z-index: 2; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 6deg, rgba(255,255,255,.85) 6deg 7deg, transparent 7deg 30deg);
}
#loading-overlay.burst .iv-rays { animation: ivRays .9s ease-out forwards; }
@keyframes ivRays {
  0%   { opacity: 0; transform: scale(.2) rotate(0deg); }
  25%  { opacity: .9; }
  100% { opacity: 0; transform: scale(60) rotate(40deg); }
}

/* 標題 */
#loading-overlay .iv-title {
  position: absolute; z-index: 25; text-align: center; color: #fff;
  opacity: 0; transform: translateY(14px);
  text-shadow: 0 2px 24px rgba(255,207,92,.5), 0 0 2px rgba(0,0,0,.4);
}
#loading-overlay .iv-title .iv-eyebrow { font-size: .8rem; letter-spacing: .5em; color: var(--iv-gold); margin-bottom: 10px; padding-left: .5em; }
#loading-overlay .iv-title .iv-main { font-size: clamp(1.8rem, 6vw, 3.2rem); font-weight: 900; letter-spacing: .06em; }
#loading-overlay.reveal .iv-title { animation: ivTitleIn .9s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes ivTitleIn {
  0%   { opacity: 0; transform: translateY(16px); letter-spacing: .3em; filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0);    letter-spacing: .06em; filter: blur(0); }
}