/* ============================================================
   Loading Screen — "Drafting Line"
   コーポレート/クライアント案件向け ローディング画面
   ------------------------------------------------------------
   使い方:
   1) このファイルを丸ごと読み込む
   2) :root の変数(--ls-*)を、案件のブランドカラー・フォントに
      書き換えるだけでテーマが変わります
   ============================================================ */
 
:root {
  /* --- カラートークン（案件ごとにここだけ変更すればOK） --- */
  --ls-bg: #12141a;            /* 背景（チャコール寄りのネイビー） */
  --ls-bg-2: #1a1d25;          /* 背景グラデーションの終端 */
  --ls-text: #f4f2ec;          /* ロゴ・メインテキスト */
  --ls-muted: #7b8291;         /* 補助テキスト */
  --ls-accent: #37ebff;        /* アクセント（真鍮/ブラス） */
  --ls-rule: #2a2e38;          /* 未描画の罫線色 */
 
  /* --- フォントトークン --- */
  --ls-font-display: "Inter", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --ls-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
 
  /* --- タイミング ---
     ls-mark-fade      : .loading-mark::after のクロスフェード時間
     ls-duration-fade  : .loading-curtain(背景)のスライドアウト時間
     ls-mark-fadeout   : カーテンのスライドが終わったあと、
                         .loading-mark自体が消えるまでのFadeOut時間
 
     時系列：
       0ms                                       → .complete付与、ロゴのクロスフェード開始
       ls-mark-fade                              → クロスフェード完了、カーテンのスライド開始
       ls-mark-fade + ls-duration-fade           → カーテンのスライド完了(画面から消える)、
                                                    ここでロゴのFadeOut開始
       ls-mark-fade + ls-duration-fade + ls-mark-fadeout → ロゴも消え、DOMから削除
  */
  --ls-mark-fade: 500ms;
  --ls-mark-fadeout: 400ms;
  --ls-duration-fade: 1200ms;
 
  /* --- 退場アニメーションの方向 ---
     上にスライドアウト(既定): translateY(-100%)
     下にスライドアウト:       translateY(100%)
     右にスライドアウト:       translateX(100%)
     左にスライドアウト:       translateX(-100%)
  */
  --ls-slide-out: translateX(100%);
}
 
/* --------------------------------------------------------------
   #loading-screen 自体は「表示/非表示の器」としてだけ機能します。
   transformはここには持たせません(祖先にtransformがあると、
   子の position:fixed が画面基準ではなく祖先基準になってしまうため。
   ロゴを画面に対して本当に固定させたいので、スライドは
   .loading-curtain 側だけに担当させています)。
   -------------------------------------------------------------- */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  transition: visibility var(--ls-mark-fadeout) step-end
              calc(var(--ls-mark-fade) + var(--ls-duration-fade));
}
 
.loading-screen.is-hidden {
  visibility: hidden;
  pointer-events: none;
}
 
/* --- スライドする層（背景色はこちらが担当） --- */
.loading-curtain {
  position: absolute;
  inset: 0;
  background: #24CAE8;
  transform: translateY(0);
  transition: transform var(--ls-duration-fade) cubic-bezier(0.76, 0, 0.24, 1) var(--ls-mark-fade);
  will-change: transform;
}
 
.loading-screen.is-hidden .loading-curtain {
  transform: var(--ls-slide-out);
}
 
/* --- ロゴ下に配置する進捗バー・パーセンテージのラッパー ---
   .loading-curtain(transformあり)の子なので、position:fixedでも
   実質そのcurtainの範囲内に固定され、カーテンのスライドと一緒に動く。
   translateYの数値(24px)は、ロゴ下からの余白。お好みで調整してください。 */
.loading-inner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: min(90vw, 420px);
  padding: 0 24px;
}
 
/* --- ロゴ ---
   .loading-curtain(transformを持つ層)の外に置かれているため、
   position: fixed が画面基準のまま効き、スライドに巻き込まれません。
   opacityは、カーテンのスライドが完了する頃(--ls-mark-fade + --ls-duration-fade)
   まで待ってからFadeOut(--ls-mark-fadeout)するようdelayを付けています。 */
.loading-mark {
  position: fixed;
  bottom: 50%;
    left: 50%;
    transform: translateX(-50%);
    
  background: url(../img/logo-loadingW.png) no-repeat center / contain;
  width: 848px;
  height: 229px;
 
  opacity: 1;
  transition: opacity var(--ls-mark-fadeout) ease
              calc(var(--ls-mark-fade) + var(--ls-duration-fade));
}
.loading-screen.complete .loading-mark {
  opacity: 0;
}
.loading-mark::after {
  content: "";
  position: absolute;
  inset: 0;
 
  background: url(../img/logo-loading.png) no-repeat center / contain;
 
  opacity: 0;
  transition: opacity var(--ls-mark-fade) ease;
  pointer-events: none;
}
.loading-screen.complete .loading-mark::after {
  opacity: 1;
}
 
/* --- 中央の罫線（製図線）と目盛り --- */
.loading-rule {
  position: relative;
  width: 100%;
  height: 10px;
  display: flex;
  align-items: center;
}
 
.loading-rule::before {
  /* 未描画のベースライン */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--ls-rule);
  transform: translateY(-50%);
}
 
.loading-rule-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  width: 0%;
  background: var(--ls-accent);
  transform: translateY(-50%);
  transition: width 220ms linear;
}
 
.loading-rule-fill::after {
  /* 先端のドット（製図ペンの先端イメージ） */
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ls-accent);
  transform: translate(50%, -50%);
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--ls-accent) 70%, transparent);
}
 
.loading-ticks {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
 
.loading-ticks span {
  width: 1px;
  height: 5px;
  background: var(--ls-rule);
}
 
/* --- パーセンテージ表示 --- */
.loading-status {
  font-family: var(--ls-font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ls-muted);
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
 
.loading-percent {
  color: var(--ls-text);
  min-width: 2ch;
  text-align: right;
}
 
/* --- reduced motion 対応 ---
   大きな移動(スライド)は視覚的な負担になり得るため、
   モーション低減設定時はスライドを無効化し、フェードのみにする。
   スライドを担当しているのは .loading-curtain なので、
   そちら側でtransform無効化＋opacityフェードに置き換える。 */
@media (prefers-reduced-motion: reduce) {
  .loading-screen {
    transition: visibility 200ms step-end;
  }
  .loading-curtain {
    transform: none !important;
    transition: opacity 200ms linear;
  }
  .loading-screen.is-hidden .loading-curtain {
    opacity: 0;
  }
  .loading-mark {
    transition: none;
  }
  .loading-mark::after {
    transition: none;
  }
  .loading-rule-fill {
    transition: none;
  }
}
/* --- モバイル微調整 --- */
@media (max-width: 767px) {
  .loading-mark {
    
    top: 15vw;
    bottom: auto;
    left: 10vw;
    right: 10vw;
    transform: none;
    width: 80vw;
    height: 23.35vw;

    background-image: url(../img/logo-loadingW-sp.png);
  }
  .loading-mark::after {
    background-image: url(../img/logo-loading-sp.png);

  }
}