/* Keep the viewport width stable when loading releases the scroll lock. */
html { scrollbar-gutter: stable; }
html.is-loading, html.is-loading body { overflow: hidden; }
/* Start the hero sequence only after the loading overlay has left. */
html.is-loading .header-title,
html.is-loading .download-area { opacity: 0; visibility: hidden; }
html.hero-ready .header-title { animation: hero-reveal .8s ease-out both; }
html.hero-ready .download-area { animation: hero-reveal .7s ease-out .85s both; }
@keyframes hero-reveal {
  from { opacity: 0; visibility: hidden; }
  to { opacity: 1; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
  html.hero-ready .header-title,
  html.hero-ready .download-area { animation: none; opacity: 1; visibility: visible; }
}
.loading-screen[hidden] { display: none; }
.loading-screen { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 43%, #102d4b 0%, #07182b 35%, #020914 78%); color: #eee4d1; opacity: 1; transition: opacity .8s ease, visibility .8s; }
.loading-screen::before { content: ''; position: absolute; inset: -25%; pointer-events: none; background: radial-gradient(ellipse at 35% 58%, #267eb214, transparent 35%), radial-gradient(ellipse at 65% 42%, #339cd515, transparent 30%); animation: loading-mist 9s ease-in-out infinite alternate; }
.loading-content { width: min(90vw, 520px); text-align: center; padding: 32px 0; }
.loading-crystal { --gem-height: clamp(144px, 26vh, 258px); position: relative; width: 180px; height: var(--gem-height); margin: 0 auto 32px; display: flex; align-items: center; justify-content: center; }
.loading-gem { flex: 0 0 auto; width: calc(var(--gem-height) * 459 / 808); height: var(--gem-height); min-width: 0; min-height: 0; filter: drop-shadow(0 0 12px #78cfff70) drop-shadow(0 0 36px #268ad644); animation: loading-float 4s ease-in-out infinite; }
.loading-gem img { display: block; width: calc(var(--gem-height) * 459 / 808); height: var(--gem-height); max-width: 100%; max-height: 100%; object-fit: contain; clip-path: polygon(50.55% 6.3%, 88% 53%, 50.1% 93.9%, 11.7% 53%); }
.loading-halo { position: absolute; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(ellipse, #63caff26, #278eee0c 45%, transparent 70%); animation: loading-breathe 4s ease-in-out infinite; }
.loading-particles { position: absolute; inset: 0; transform: scale(.6); }
.loading-particles i { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; background: #b7edff; box-shadow: 0 0 9px #5bcfff; border-radius: 50%; animation: loading-particle 4.5s ease-in infinite; --x: -140px; --y: -100px; }
.loading-particles i:nth-child(2) { --x: 130px; --y: -70px; animation-delay: -.6s; }
.loading-particles i:nth-child(3) { --x: -100px; --y: 130px; animation-delay: -1.2s; }
.loading-particles i:nth-child(4) { --x: 150px; --y: 100px; animation-delay: -1.8s; }
.loading-particles i:nth-child(5) { --x: 80px; --y: -180px; animation-delay: -2.4s; }
.loading-particles i:nth-child(6) { --x: -160px; --y: 30px; animation-delay: -3s; }
.loading-particles i:nth-child(7) { --x: 30px; --y: 170px; animation-delay: -3.6s; }
.loading-particles i:nth-child(8) { --x: -60px; --y: -160px; animation-delay: -4.2s; }
.loading-message { font-family: 'Noto Serif TC', 'PMingLiU', serif; font-size: clamp(16px, 1.5vw, 23px); font-weight: 700; letter-spacing: .28em; padding-left: .28em; line-height: 1.8; }
.loading-track { width: min(78%, 360px); height: 2px; background: #bfcfda26; margin: 26px auto 20px; }
.loading-fill { display: block; width: 0%; height: 100%; background: linear-gradient(90deg, #a5814e, #f1d49e); transition: width .35s ease; box-shadow: 0 0 12px #d6b77855; }
.loading-fill::after { content: ''; position: absolute; right: -3px; top: -2px; width: 6px; height: 6px; transform: rotate(45deg); background: #fff0cc; box-shadow: 0 0 10px #ffde99; }
.loading-label { font-family: Georgia, serif; font-size: 10px; font-weight: 400; letter-spacing: .75em; padding-left: .75em; color: #c6ad83; }
.loading-screen.is-complete .loading-halo { background: radial-gradient(ellipse, #8fdfff40, transparent 70%); }
.loading-screen.is-leaving { opacity: 0; visibility: hidden; }
@keyframes loading-float { 0%, 100% { transform: translateY(5px); } 50% { transform: translateY(-7px); } }
@keyframes loading-breathe { 0%, 100% { opacity: .5; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes loading-particle { 0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.5); } 30% { opacity: .65; } 100% { opacity: 0; transform: translate(0, 0) scale(.2); } }
@keyframes loading-mist { to { transform: translate(3%, -2%) scale(1.08); } }
@media (max-width: 600px) { .loading-crystal { --gem-height: clamp(132px, 23svh, 198px); width: 150px; margin-bottom: 24px; } .loading-halo { width: 170px; height: 170px; } .loading-message { letter-spacing: .18em; } }
@media (prefers-reduced-motion: reduce) { .loading-screen *, .loading-screen::before { animation: none !important; transition: none !important; } .loading-screen { transition: none; } }