/* =========================================================
   loader.css
   ---------------------------------------------------------
   機能概要：
     - 画面全体を覆う黒いローダー幕 (#loader) を表示する
     - 幕中央に「サイトタイトル」と「ローディングバー＋ラベル」を縦並びで配置
     - 進行度 (0〜1) に応じて：
         ・タイトル文字の白レイヤーが下から上へ塗り上がる
         ・ローディングバーの白い充填部分が左から右へ伸びる
     - 100% に到達すると、ラベルを "Loading…" から "COMPLETE!" に切り替え、
       幕全体を上方向へスライドさせて退場させる

   設計方針：
     - html / body に対して高さや overflow を変更せず、レイアウトを汚さない
     - アニメーション対象は #loader だけに限定し、SDA や他セクションへの影響を避ける
     - 「タブごとに 1 回だけ実行」自体は JS(loader.js) 側の
       sessionStorage 制御で担保し、CSS は純粋に見た目のみを担当する
   ========================================================= */

/* ---------------------------------------------
 * 0) 状態トークン（ページ全体への影響は最小限）
 * ------------------------------------------ */

/* ローディング中は、背景だけを黒にして「暗転」状態を表現する。
   スクロールロックなどは行わず、レイアウトには干渉しない。 */
html.loading {
  background: #000000;
}

/* ローダー幕を画面よりわずかにはみ出させる量。
   ブラウザの描画誤差で生じる 1px の白フチを物理的に潰すためのマージン。 */
:root {
  --loader-bleed: 1px;
}

/* ---------------------------------------------
 * 1) 黒幕ローダー本体 (#loader)
 * ------------------------------------------ */

#loader {
  position: fixed;
  /* 画面外にはみ出すぶん、上下左右を 1px 分だけ広げる */
  inset: calc(var(--loader-bleed) * -1);
  background: #000000;
  z-index: 3000; /* ほぼ最前面に配置（ヘッダー等よりも上） */

  /* 幕の中央にコンテンツ（タイトル＋バー＋ラベル）を集約 */
  display: flex;
  align-items: center;
  justify-content: center;

  /* 幕そのものを上下にアニメーションさせる */
  transform: translateY(0);
  will-change: transform;
  transition: transform 0.8s cubic-bezier(.38, 1.12, .56, 1.07);
}

/* JS から .is-hide が付与されたら、ローダー幕を画面上方向へ退場させる。 */
#loader.is-hide {
  transform: translateY(-100%);
}

/* 幕中央のコンテンツをまとめるラッパー。
   フレックス縦並びで「タイトル → バー → ラベル」の順に配置する。 */
#loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* ロゴ周辺にわずかな余白を追加して詰まり感を軽減する。 */
  padding: 16px 24px;
}

/* ---------------------------------------------
 * 2) サイトタイトル（2レイヤー構造の塗り上がり演出）
 * ------------------------------------------ */

#loader-title {
  /* タイトル全体のタイポグラフィ設定 */
  position: relative;
  font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', sans-serif;
  font-size: 2.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  user-select: none;

  /* この下にローディングバーを置くため、やや広めのマージンを確保する。 */
  margin-bottom: 1.6rem;

  /* 白レイヤーの塗り上がり進捗を 0〜1 で管理するカスタムプロパティ。
     0 = 全面グレー, 1 = 全面白 を意味する。 */
  --loader-title-fill: 0;
}

/* グレーのベース文字。
   ローディングが始まった直後から、常に「サイト名」が読める状態を維持する。 */
#loader-title-base {
  display: block;
  color: #666666;
}

/* 白レイヤー（塗り上がり用）の文字。
   ベース文字と同じテキストを重ね、clip-path で下から徐々に見える領域を広げる。 */
#loader-title-fill {
  position: absolute;
  inset: 0;
  display: block;
  color: #ffffff;
  pointer-events: none;

  /* --loader-title-fill の値に応じて、上側を切り取る。
     0 → inset(100% 0 0 0) ＝ すべてクリップ（白レイヤーは見えない）
     1 → inset(0 0 0 0)    ＝ 全面表示（すべて白） */
  clip-path: inset(calc((1 - var(--loader-title-fill, 0)) * 100%) 0 0 0);

  /* JS から頻繁に値が更新されるため、短め・線形カーブで反映する。 */
  transition: clip-path 0.08s linear;
}

/* ---------------------------------------------
 * 3) ローディングバー（外枠と内側の充填バー）
 * ------------------------------------------ */

#loader-bar {
  position: relative;
  /* PC では 420px を上限としつつ、SP では画面幅に追従させる。 */
  width: min(420px, 72vw);
  height: 22px;
  border-radius: 9999px; /* カプセル形状（左右完全な丸） */

  /* 外枠と内側のバーの間に細い隙間を設ける。
     枠線とバーを分離して見せるためのパディング。 */
  padding: 2px;
  box-sizing: border-box;

  /* 外枠は白線でくっきり縁取りする。 */
  border: 3px solid #ffffff;

  /* 内側の背景はほんのり透けた白で、バーの動きを邪魔しない程度の明度にする。 */
  background-color: rgba(255, 255, 255, 0.08);

  /* わずかなアウトラインとドロップシャドウで浮いている印象を付ける。 */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 8px 20px rgba(0, 0, 0, 0.45);

  overflow: hidden; /* 内側バーのはみ出しを完全に隠す。 */
}

/* 実際に進捗を表す白いバー。
   左端から右方向に向かって、scaleX(0〜1) で伸びていく。 */
#loader-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: #ffffff;
  transform-origin: left center;
  transform: scaleX(0);          /* 初期状態は 0（バーが見えない） */
  transition: transform 0.08s linear; /* JS から 0〜1 に更新されるたびに滑らかに変化 */
}

/* ---------------------------------------------
 * 4) ラベルテキスト（バー直下のメッセージ）
 * ------------------------------------------ */

#loader-label {
  /* バーとの間に少しスペースを空ける。 */
  margin-top: 0.9rem;

  /* インパクトのある太字フォントで、ローディング状態を強調する。 */
  font-family: 'Impact', 'Haettenschweiler', 'Arial Narrow Bold',
               system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  text-align: center;

  /* 文言は常に白で表示（背景黒に対して視認性を最大化）。 */
  color: #ffffff;
  user-select: none;
}

/* 完了時のラベル（JS 側で "COMPLETE!" に差し替えたときに付与）。 
   現状は文字色を変えず、状態をクラス名で判別できるようにしている。 */
#loader-label.is-complete {
  color: #ffffff;
}

/* ---------------------------------------------
 * 5) レスポンシブ調整
 * ------------------------------------------ */

@media (max-width: 768px) {
  /* タブレット〜小さめ画面では、タイトルをひと回り小さくし行間も詰める。 */
  #loader-title {
    font-size: 2.2rem;
    letter-spacing: 0.14em;
    margin-bottom: 1.3rem;
  }

  /* バーの幅・高さも少しだけ縮める。 */
  #loader-bar {
    width: min(320px, 82vw);
    height: 20px;
  }

  /* ラベルはタイトルとのバランスを保つ程度に縮小。 */
  #loader-label {
    font-size: 1.1rem;
    letter-spacing: 0.18em;
  }
}

@media (max-width: 480px) {
  /* スマートフォンではさらに一段階コンパクトに調整。 */
  #loader-title {
    font-size: 1.9rem;
    letter-spacing: 0.12em;
    margin-bottom: 1.1rem;
  }

  #loader-bar {
    width: min(260px, 88vw);
    height: 18px;
  }

  #loader-label {
    font-size: 1.0rem;
    letter-spacing: 0.16em;
  }
}

/* ---------------------------------------------
 * 6) モーション軽減設定（prefers-reduced-motion）
 * ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  /* OS 設定で「動きを減らす」が有効な場合、
     幕のスライドアニメーションを事実上オフに近い状態にする。 */
  #loader {
    transition: transform 0.01ms linear;
  }

  /* バーの伸びアニメーションもカットし、即座に最終状態へ切り替える。 */
  #loader-bar-fill {
    transition: none;
  }
}