/* ===========================================================
   connectera4 — 章構成レイヤー（style.css の後に読み込む）

   方針: コンポーネントCSSは書き換えない。
   既存の `--c-*` トークンを `.on-dark` の中で再定義することで、
   同じマークアップのまま暗章の配色に切り替える。

   守っている制約（移植元の設計）:
     ① 文字色は章ごとに固定。連続変化させるのは背景側の3変数だけ
     ② 色が入れ替わる区間（.chapter-gap）には文字を置かない
     ③ 画面中央の本文帯に入った粒子は減光する（gl.js の uBand）
     ④ 暗章のセクションに .on-dark を付け、その中で色変数を上書きする
   =========================================================== */

/* -----------------------------------------------------------
   0. 背景レイヤー
   ----------------------------------------------------------- */
:root {
  /* gl.js が毎フレーム書き換える。ここに書くのは初期値だけ */
  --veil:      rgba(244, 247, 252, .66);
  --veil-out:  rgba(244, 247, 252, 0);
  --paper-dyn: #f4f7fc;
}

html, body { background: transparent; }

#gl {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
}
#fallback {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: none;   /* WebGL が使えないときだけ gl.js が出す */
  background:
    radial-gradient(80% 60% at 70% 20%, #dbe8f8, transparent 70%),
    var(--paper-dyn);
}

/* 本文の可読性を担保する薄い膜。中央ほど濃く、上下端でも濃くする */
.veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(92% 72% at 50% 48%, var(--veil) 0%, var(--veil) 42%, var(--veil-out) 82%),
    linear-gradient(to bottom, var(--veil) 0%, var(--veil-out) 14%, var(--veil-out) 86%, var(--veil) 100%);
}

/* .header は style.css 側で position:sticky / z-index:200。ここで上書きしない
   （relative を当てると固定ヘッダーが壊れる） */
main, .footer { position: relative; z-index: 2; }

/* WordPress 版の追加。
   テーマのヘッダー・フッター・CTA帯は l- 接頭辞なので、上の行では拾えない。
   これを入れないと .veil（z-index:1 の全画面の膜）がフッターを覆って
   真っ白に見える。実際にそうなった */
.l-footer, .l-cta { position: relative; z-index: 2; }
/* .l-header は position:fixed。ここで relative を当てると追従が壊れる。
   z-index だけ上げる（テーマ側は --z-header を使っているが、
   このページでは canvas と veil の上に確実に出す必要がある） */
.l-header { z-index: 200; }

/* スクロール進捗バー */
.hbar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  z-index: 60;
  background: var(--c-brand);
  transition: background .55s ease;
}

/* -----------------------------------------------------------
   0-b. ローディング
   WebGL の初期化とシェーダのコンパイルに 0.6〜1.2 秒かかる。
   JS が動かないときは出さない（.js は head で付与される）
   ----------------------------------------------------------- */
.loader { display: none; }
.js .loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s-6);
  background: var(--paper-dyn);
  transition: opacity .6s var(--ease-reveal), visibility .6s;
}
.loader.is-done { opacity: 0; visibility: hidden; }

.loader__mark {
  font-family: var(--f-en);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: var(--ls-en);
  color: var(--c-fg);
}
.loader__mark span { color: var(--c-brand); }

/* ロゴ画像を置いたとき。高さだけ決めて横幅は成り行きにする
   （設定で差し替えられるので、縦横比の違う画像が来ても崩れないように） */
.loader__mark--img { line-height: 0; }
.loader__mark--img img { height: 32px; width: auto; display: block; }

/* 進捗ではなく「待っている」ことだけを示す不定形バー */
.loader__bar {
  position: relative;
  width: 132px;
  height: 2px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: rgba(1, 117, 207, .14);
}
.loader__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: inherit;
  background: var(--c-brand);
  animation: loader-slide 1.15s var(--ease-ui) infinite;
}
@keyframes loader-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(330%); }
}
@media (prefers-reduced-motion: reduce) {
  .loader__bar i { animation: none; width: 100%; }
  .js .loader { transition: none; }
}

/* -----------------------------------------------------------
   1. 章の切り替え区間 — ここに文字を置かない（制約②）
   ----------------------------------------------------------- */
.chapter-gap {
  height: 70vh;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* -----------------------------------------------------------
   2. 暗章 — 既存トークンを上書きするだけで配色が入れ替わる（制約④）
   ----------------------------------------------------------- */
.on-dark {
  --c-fg:          #eaf1fa;
  --c-ink:         #eaf1fa;
  --c-ink-muted:   rgba(234, 241, 250, .74);
  --c-ink-faint:   rgba(234, 241, 250, .46);
  --c-line:        rgba(234, 241, 250, .17);

  /* カード・pill の地。透けさせて背景の粒子を残す */
  --c-paper:       rgba(10, 37, 64, .52);
  --c-surface:     rgba(10, 37, 64, .48);
  --c-pale:        rgba(234, 241, 250, .10);
  --c-pale-deep:   rgba(234, 241, 250, .14);

  /* 暗章のアクセントはシアン。明章のブランドブルーとは役割が違う */
  --c-brand:       #38e1d6;
  --c-brand-deep:  #1fbdb4;
  --c-brand-soft:  #8af0e8;

  --shadow-card:   0 4px 40px rgba(0, 0, 0, .34);
  --shadow-raise:  0 16px 44px rgba(0, 0, 0, .44);
  --shadow-btn:    0 4px 50px rgba(56, 225, 214, .28);

  color: var(--c-ink);
}

/* -----------------------------------------------------------
   3. セクションの地を外す
   背景は WebGL キャンバスが担当する。ベタ塗りを残すと粒子が隠れる
   ----------------------------------------------------------- */
.sec--kv,
.sec--service,
.sec--works,
.sec--contact { background: transparent; }

/* Catch は自前の濃紺をやめ、章の地色に任せる */
.sec--catch { background: transparent; }
.sec--catch::before,
.sec--catch::after { display: none; }   /* 前後へのグラデも不要（gap が担う） */

/* About のパネルは「面」として残すが、透けさせて粒子を通す */
.about__panel {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, .60) 0%,
    rgba(255, 255, 255, .38) 48%,
    rgba(255, 255, 255, .10) 100%);
  backdrop-filter: blur(2px);
}

/* Works の白ブロックも同様 */
.works__stage::before {
  background: rgba(10, 37, 64, .34);
  backdrop-filter: blur(2px);
}

/* -----------------------------------------------------------
   4. 暗章に入った既存コンポーネントの微調整
   （トークンの上書きだけでは足りない、色を直書きしている箇所）
   ----------------------------------------------------------- */
.on-dark .card {
  border-color: var(--c-line);
  backdrop-filter: blur(6px);
}
.on-dark .work__badge { color: var(--c-deep); background: var(--c-brand); }
.on-dark .bar--before { background: rgba(234, 241, 250, .22); }
.on-dark .figure__before del { color: var(--c-ink-faint); }
.on-dark .btn--outline {
  background: rgba(10, 37, 64, .40);
  border-color: var(--c-line);
  color: var(--c-fg);
}
.on-dark .work__media { background: rgba(10, 37, 64, .5); }

/* Catch の一行。暗章の中でも最も明るく置く */
.sec--catch .catch { color: #ffffff; }

/* -----------------------------------------------------------
   5. ヘッダー — 章に追従させる
   ----------------------------------------------------------- */
.header { background: transparent; backdrop-filter: none; }
.header.is-stuck {
  background: color-mix(in srgb, var(--paper-dyn) 74%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--c-line);
}
/* 暗章に入ったら body.dark が付く（gl.js） */
body.dark .logo__en   { color: #eaf1fa; }
body.dark .logo__era  { color: #38e1d6; }
body.dark .nav__list a { color: rgba(234, 241, 250, .78); }
body.dark .hbar       { background: #38e1d6; }
body.dark .header.is-stuck { background: rgba(10, 37, 64, .62); }

/* -----------------------------------------------------------
   6. フッターは常に暗い。章の外側として固定する
   ----------------------------------------------------------- */
.footer { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .hbar { transition: none; }
}

/* -----------------------------------------------------------
   7. 暗章での追加パーツの配色
   （ホバー・追従CTA・カーソル。トークン上書きだけでは足りない分）
   ----------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .on-dark .chip:hover,
  .on-dark .row:hover { border-color: var(--c-brand); }
  .on-dark .step:hover .pill { background: rgba(234, 241, 250, .18); }
  .on-dark .stance__row:hover .stance__no { -webkit-text-stroke-color: var(--c-brand); }
}

/* 追従CTA — 暗章では地を濃紺側に寄せる（SPのバーのみ。PCはピルなので不要） */
@media (max-width: 900px) {
  body.dark .sticky-cta {
    background: rgba(10, 37, 64, .82);
    border-top-color: var(--c-line-on-dark);
  }
}

/* カーソル — 暗章ではシアンに */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body.dark .cursor { border-color: #38e1d6; }
}