/* =========================================================
   ローディング（Figma: 00_loadeing_pc）
   - 背景の波はヒーローの波（.hero__waves）をそのまま使う。
     ローディング中は波を上にずらして画面を覆い、終わると下へ引いて
     ヒーローの位置に収まる（Figma でも同じ波が上下にずれて配置されている）。
   - ここにはロゴマークだけを置く。
   ========================================================= */
.loading {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}

.loading__mark {
  position: absolute;
  top: 45%;
  left: 50%;
  width: calc(496 * var(--u));
  translate: -50% -50%;
}

.loading__mark svg {
  width: 100%;
  height: auto;
}

/* ページの途中でリロードしたとき：波が画面の外にあるので、波と同じ色合いの背景で覆う */
.loading.is-cover {
  background: linear-gradient(180deg, #00479d 0%, #2663ac 55%, #4075b5 100%);
}

/* ローディングを出さない設定・動きを減らす設定のとき */
.loading.is-done {
  display: none;
}