/*
檔案位置：jonaminz/assets/css/jonaminz-loading.css
用途：唯一允許最早期載入的 CSS，全站共用的「布幕」——正式畫面在
entry-core.js 判定 all-ready 之前一律蓋住，取代舊版純 visibility:hidden
的死白畫面。正式畫面樣式一律放 site.css / reservoir 層，不要加進這個檔案。

設計取捨（比照 SKHPS/skhpsv2 的 skhps-loading.css，但簡化）：
- skhpsv2 版本對 header/main/footer 做逐階段（css/shell/main）分開淡入，
  前提是每頁都有固定的 [data-skhps-header]/main/[data-skhps-footer] 結構。
  jonaminz 首頁是簽名式導覽版型，沒有這些共用元素（見 index.html 開頭
  註解），所以這裡改成「單一布幕蓋住整個 body，all-ready 才一次揭幕」，
  不做逐階段揭露——邏輯更簡單、對所有頁面型態都成立，符合使用者要的
  「舞台搭建完成之前蓋住舞台」，只是不分批掀布而已。
- 布幕標題／進度條畫在 html 的 ::before/::after 上（不受 body 的
  visibility:hidden 影響，兩個 pseudo-element 額度剛好夠用：::before 放
  標題文字，::after 用 hard-stop linear-gradient 同時畫出進度條的
  「已完成」與「軌道」兩段，不用額外的第三個元素）。
- 進度百分比由 entry-core.js 寫入 --jonaminz-loading-progress（0-100）。
- 配色沿用 --color-bg / --color-text / --color-primary
  （assets/css/reservoir/02-tokens.css）。2026-07-13 大廳／房間／後台
  三層架構定案前，這裡沿用的是 --color-bg-dark／--color-text-dark，
  因為當時首頁（唯一的深色頁）是最重要的頁面；定案後首頁（大廳）改走
  淺色「米紙」，深色系只留給 Jonathan 未來的房間（單一頁面、尚未
  實作），所以改沿用一般淺色 token——多數頁面（大廳/後台/登入）現在
  布幕→揭幕零閃爍，代價是 Jonathan 的房面之後會有一次淺→深切換，
  比之前反過來（多數頁面深→淺）划算，等 Jonathan 頁面真的做出來再
  評估要不要特別處理。
- 這個檔案在 02-tokens.css 之前就先載入了（bootstrap 階段），
  var(--color-primary, #1f3a5f) 的字面 fallback 值不是裝飾、是真的會
  在 tokens CSS 抵達前那一小段時間生效——2026-07-13 套用亞麻米方向時
  這個 fallback 忘了同步更新是最容易漏掉的地方，改 --color-primary
  時記得回頭檢查這裡。
*/

html.jonaminz-loading {
  overflow: hidden;
  scrollbar-width: none;
  background: #efeae0;
  background: var(--color-bg, #efeae0);
}

html.jonaminz-loading::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

html.jonaminz-loading body {
  visibility: hidden;
  opacity: 0;
}

html:not(.jonaminz-loading) body {
  visibility: visible;
  opacity: 1;
  transition: opacity .32s ease;
}

html.jonaminz-loading::before {
  content: attr(data-loading-title);
  position: fixed;
  left: 50%;
  top: 46%;
  z-index: 99999;
  transform: translate(-50%, -50%);
  max-width: calc(100vw - 48px);
  color: #262220;
  color: var(--color-text, #262220);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: .05em;
  white-space: nowrap;
  text-align: center;
  animation: jonaminz-loading-pulse 1.7s ease-in-out infinite;
}

html.jonaminz-loading:not([data-loading-title])::before,
html.jonaminz-loading[data-loading-title=""]::before {
  content: "載入中";
}

html.jonaminz-loading::after {
  content: "";
  position: fixed;
  left: 50%;
  top: calc(46% + 34px);
  z-index: 99999;
  transform: translateX(-50%);
  width: min(22ch, calc(100vw - 96px));
  min-width: 220px;
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(
    to right,
    #1f3a5f 0%,
    #1f3a5f calc(max(0, min(100, var(--jonaminz-loading-progress, 5))) * 1%),
    rgba(38, 34, 32, .18) calc(max(0, min(100, var(--jonaminz-loading-progress, 5))) * 1%),
    rgba(38, 34, 32, .18) 100%
  );
  background: linear-gradient(
    to right,
    var(--color-primary, #1f3a5f) 0%,
    var(--color-primary, #1f3a5f) calc(max(0, min(100, var(--jonaminz-loading-progress, 5))) * 1%),
    color-mix(in srgb, var(--color-text, #262220) 18%, transparent) calc(max(0, min(100, var(--jonaminz-loading-progress, 5))) * 1%),
    color-mix(in srgb, var(--color-text, #262220) 18%, transparent) 100%
  );
  transition: background 180ms ease-out;
}

@keyframes jonaminz-loading-pulse {
  0%, 100% { opacity: .86; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html.jonaminz-loading::before {
    animation: none;
  }
}