/* --- 保持你原本的 @import 與字體設定 --- */
body,
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;

}
/* 當 loading 還在，或 body 剛解鎖時，強制隱藏 Logo */
#loadingScreen:not(.is-done) ~ .main-content .m1-logo,
body.no-scroll .m1-logo {
    opacity: 0 !important;
    visibility: hidden;
}
/* 1. 初始狀態：內容與選單全部物理隱藏 */
.container.main-content, 
.header { 
    opacity: 0;
    visibility: hidden;
    /* 預設不給 transition，防止一進入頁面時從透明變不透明的過程被看到 */
}

/* 2. 啟動狀態：確認歸位後同步淡入 */
.container.main-content.is-ready,
.header.is-ready {
    opacity: 1;
    visibility: visible;
    transition: opacity 1.2s ease, visibility 1.2s; /* 稍微拉長，讓進場更絲滑 */
}

:root {
  --vw-base: calc(100vw / 1920);
  --loader-w: calc(107 * var(--vw-base));
  --loader-h: calc(58 * var(--vw-base));
}
.loading {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-color: #897e79;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 移除 transition: opacity 1.5s ease; */
  opacity: 1; 
  visibility: visible;
  overflow: hidden;
}

/* is-done 只需要負責輔助，不需要寫動畫，動畫交給 JS */
.loading.is-done {
  pointer-events: none;
}

/* 中央標題：如果你希望它在圖片上方，可以移除 absolute 改用 margin */
.loading-title {
  margin-bottom: 20px; /* 與進度條的間距 */
  color: #fff;
  font-family: "cofo-raffine", serif;
  font-weight: 400;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.5rem;
  z-index: 3;
}

.loading-wrapper {
  position: relative;
  width: var(--loader-w);
  height: var(--loader-h);
  overflow: visible; /* 確保內容不被外層切掉 */
}

/* 底圖：始終顯示在最下方 */
.loading-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1; /* 層級 1 */
}

/* 進度條容器：高度由 JS 從 0% 變到 100% */
.loading-progress-bar {
  position: absolute;
  left: 0;
  bottom: 0;         /* 關鍵 1：容器從底部開始往上長 */
  width: 100%;
  height: 0%;        /* JS 控制這裡 */
  overflow: hidden;  /* 關鍵 2：裁切掉容器外的圖片部分 */
  z-index: 2;
}

/* 內部的彩色圖片 */
.loading-fill {
  position: absolute;
  bottom: 0;         /* 關鍵 3：圖片必須「釘」在底部，不隨容器移動 */
  left: 0;
  width: var(--loader-w);  /* 寬度固定 */
  height: var(--loader-h); /* 高度固定，不能隨父層縮小 */
  object-fit: contain;
  display: block;
}
/* 左下角百分比：維持你原本的 absolute 定位 */
.loading-percentage {
  position: absolute;
  bottom: 2%;
  left: 5%;
  font-family: "cofo-raffine";
  font-weight: 400;
  color: #fff;
  font-size: 10vw;
  line-height: 12vw;
  letter-spacing: 0.5rem;
  z-index: 3;
}