/* =====================================================================
   トップページのローダー（V15）
   - ページ全体を白い幕（.site-loader）で覆い、ヘッダーの文字を1つだけ幕の上に出す
     （コピーライトの行 または ロゴ。header.php の .walker の data-target で切りかえ）
   - その文字の前をドット1つ（文字と同じ色）が左右にランダムに行き来する（ドットは幕の外に置き、幕・文字より上に重ねる）
   - 動いている間だけドットが上下に圧縮される
   - ドットが動く範囲（.walker）の位置・幅は js/loader-walker.js がその文字に合わせる。ドットの大きさは JS の DOT_SIZE（10px）
   - 写真を読み込み終わったら、幕が2秒でフェードアウト（＝ページがフェードイン）。トップは一覧の写真5枚、記事ページはアイキャッチと本文の写真
   - 元ファイル：loader-walker-overlap.html（端に着いたときのオレンジは、サイトの方針で使わない）
   - functions.php の nrocks_enqueue_front() でトップと記事ページのときだけ読み込む
   ===================================================================== */

/* ---- 幕（画面いっぱい・ページの背景と同じ色） ---- */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;                  /* ヘッダー・右下の TO HEADER より上 */
  background: #fcfcfc;             /* ページの背景（body）と同じ */
  opacity: 1;
  transition: opacity 2s ease;     /* フェードの速さ（トップ以外のフェードインと同じ2秒） */
}
/* 写真5枚を読み込み終わったら（JS が .is-done を付ける）。ドットも一緒に消す */
.site-loader.is-done,
.site-loader.is-done ~ .walker {
  opacity: 0;
  pointer-events: none;            /* 消えていく途中でも下のページをクリックできる */
}
/* 幕が出ているあいだは、ページをスクロールさせない */
html:has(.site-loader:not(.is-done)) {
  overflow: hidden;
}
/* スクロールバーの場所をいつも空けておく
   ・幕が出ている間はスクロールバーが消え、消えると同時にスクロールバーが出る → その分ページが左右にずれ、ロゴが動いて見えた
   ・空けておけば、スクロールバーがあってもなくても、ロゴの位置は変わらない */
html {
  scrollbar-gutter: stable;
}
/* 幕があるあいだ（フェード中も含む）は、ドットを走らせる文字だけを幕より上に出す
   どの文字にするかは header.php の .walker の data-target で切りかえる
   ・"copyright"：ロゴの下のコピーライトの行（今はこれ）
   ・"logo"     ：ロゴ（NOTHING TO LOSE）。この案も残してある */
html:has(#site-loader-walker[data-target="copyright"]) .page-header .header-copyright,
html:has(#site-loader-walker[data-target="logo"]) .page-header h1.type-TTL {
  position: relative;
  z-index: 10001;
}

/* ---- ドットが動く範囲（位置・幅・高さは JS がロゴの文字に合わせて入れる） ----
   幕（z-index 10000）・ロゴ（10001）より上に重ねる → ドットがロゴの前を通る */
.walker {
  --loader-color: #3c3c3b;         /* ドットの色（文字と同じ色）。薄いグレー #bcbcbc も試した */

  position: fixed;
  z-index: 10002;
  left: 0;
  top: 0;
  pointer-events: none;
  transition: opacity 2s ease;     /* 幕と一緒に消える */
  width: 300px;                    /* JS が上書きする（ロゴの文字の幅） */
  height: 20px;                    /* JS が上書きする（ドットの直径） */
}

/* ---- ドット（JS が作る。大きさは JS の DOT_SIZE） ---- */
.walker .dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;                     /* JS が上書きする */
  height: 100%;
  border-radius: 50%;
  background: var(--loader-color);
  transition-property: translate;
  transition-timing-function: cubic-bezier(.45, 0, .55, 1);   /* ゆっくり始まりゆっくり止まる */
  transition-duration: 0s;         /* 移動の時間は JS が毎回ランダムに決める */
}