/* =====================================================
   トップページ 背景シェーダーアニメーション用スタイル
   - #bg-webgl を画面全体に固定表示（最背面）
   - スクロールしても常に表示されたまま
   ===================================================== */

/* 背景canvas本体：ビューポート全面に固定 */
#bg-webgl {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;          /* 全コンテンツの最背面へ */
  display: block;
  pointer-events: none;  /* クリック等はページ側に通す（マウス演出は維持） */
}

/* 背景の下地。canvas読み込み前や余白部分が黒く沈むように */
body {
  background-color: #05010a;
}

/* =====================================================
   オープニング導入部（bg-shader.js が html.mgm-intro を制御）
   - 導入中の下地色のみ制御する。MVテキストは最初から白（暗色スタートはしない）。
   - このCSSは全ページで読み込まれるが、html.mgm-intro が付くのはトップのみ、
     .mv_txt 系の要素もトップにしか存在しないので、下層ページには影響しない。
   ===================================================== */
/* テキストは常に色遷移できるように（導入クラスの付け外しでフェード） */
.mv_txt_block,
.mv_txt3 {
  transition: color 0.9s ease;
}
/* 導入中の下地（canvas 読み込み前のちらつき防止）。 */
html.mgm-intro body {
  background-color: #e9e7f0;
}
/* ★ オープニングのタグラインは白（暗色スタート＆暗→白の遷移はしない）。
   以前の html.mgm-intro .mv_txt_block/.mv_txt3 { color:#191528 } は削除。
   文字色は top.css の #fff をそのまま使う。 */
/* ★ タグラインは「下からバラバラっと」出現させる。初期は隠す（ちらつき防止）。
   実際のライズ＋スタッガーは bg-shader.js が制御し、出現後は解除される。 */
html.mgm-intro .mv_txt1,
html.mgm-intro .mv_txt2,
html.mgm-intro .mv_txt3 {
  opacity: 0;
}
/* ★ オープニング中は #header を上からスライドイン。初期は上に隠す（ちらつき防止）。
   実際の動きは bg-shader.js（appear で mv_txt と同期）。出現後にインラインを解除して通常へ。 */
html.mgm-intro #header {
  transform: translateY(-100%); /* 位置で隠す（フェードはしない＝下の文字と同じ出方） */
  transition: none;             /* JSの毎フレーム更新に header.css の transition:0.4s が乗って遅延するのを防ぐ */
}
@media (prefers-reduced-motion: reduce) {
  .mv_txt_block,
  .mv_txt3 { transition: none; }
}

/*
  ※ index.php を作り直す際のメモ：
    背景アニメーションを見せたいセクションは背景色を付けない
    （または rgba(...) の半透明にする）と、この canvas が透けて見えます。
    不透明な background を指定したブロックは、その部分だけ背景を覆います。
*/