/* ==========================================================================
   HERO 背景レイヤー（ShaderGradient）
   --------------------------------------------------------------------------
   このファイルが持つのは「HEROの背景の実体」だけで、HEROのデザイン
   （タイポグラフィ・グリッド・配色）は forward.css 側が持つ。
   旧CSSを打ち消すためのoverrideは持たない（打ち消す対象は削除済み）。

   背景は次の2層が同一要素の上で完全に重なる構成にしている。

     奥: poster（sg-hero-poster.webp = 現行設定の実レンダリング静止画）
     手前: ShaderGradient canvas（実描画の完了後にposterの上へフェードイン）

   同じ要素の背景と子要素なので「背景が存在しない瞬間」が構造上作れず、
   回線速度やシェーダのコンパイル時間に関係なく白飛びが起こらない。
   JSが動かない環境でも poster は素の背景として残るため、
   fallbackがJSの実行に依存しない。

   ロールバック：index.html からこのfileの<link>、hero-shadergradient.js の
   <script>、#sg-hero-mount 要素の3点を外すと背景レイヤーだけが外れる。
   ========================================================================== */

/* HERO全体（1画面目・2画面目・滞留分）を貫通して1枚の背景を出す。
   sticky の包含ブロックは #hero。margin-bottom で自身のflow高さを相殺し、
   beat-a / beat-b / spacer を押し下げない。 */
.sg-hero-mount {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  margin-bottom: -100vh;
  margin-bottom: -100svh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* poster画像のデコード前・取得失敗時でもHEROが白く抜けないための最下層。
     ShaderGradientの最も深い部分と同じ色（装飾ではなくベース）。 */
  background-color: #06264d;
  background-image: url("/recruit/assets/sg-hero-poster.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* canvasはposterの上にクロスフェードで乗る。
   .sg-active は「WebGLが実際に描画を終えた」時だけ付与される
   （hero-shadergradient.js の FirstFrameSignal 参照）。
   マウント完了で出すと、シェーダのコンパイル中に透明なcanvasが
   posterを隠して背景が消えるため、実描画の完了を待つ必要がある。 */
#sg-hero-mount canvas {
  position: relative;
  z-index: 0;
  opacity: 0;
  transition: opacity 400ms ease-out;
}
#hero.sg-active #sg-hero-mount canvas {
  opacity: 1;
}

/* SP実機のSafariでは、スクロール中にtoolbarが収納されてvisual viewportが
   動的に広がるため、svh基準の固定高さのままだと#whatwedoの濃紺が
   拡張分の下端から覗く（詳細はforward.cssの同種コメント参照）。
   dvhへ追従させ、HEROの背景層自体も実際のviewportと同期させる。
   PCはtoolbarの出入りが無くvh=svh=dvhのため、SP幅のみに限定する。 */
@media (max-width: 767px) {
  .sg-hero-mount {
    height: 100dvh;
    margin-bottom: -100dvh;
  }
}

/* ==========================================================================
   構図の層（奥行きのネイビー ＋ 暖色の気配）
   --------------------------------------------------------------------------
   この層が担うのは「どこを深くして、どこを光らせるか」という構図の固定。
   シェーダは動き続けるので、コピーが乗る面の深さをシェーダ任せにすると
   位相によって明るくなり、文字のコントラストが安定しない。ここで
   左側だけを確実に落とすことで、白い台座やtext-shadowなしで可読性が出る。

   影の色は #021842 のような黒に近いネイビーではなく、彩度を残した
   深いブルー rgba(2,24,66) を使う。前者だと重ねた範囲から色が抜けて
   面全体が灰色に寄り、「鮮やかさが足りない」という印象の直接の原因になる。
   後者なら暗くしても青のまま濃くなる。

   暖色は「色面」ではなく「光の温度」として置く。実装上の要点が2つある。

   1) 置く場所は、シェーダ自身がいちばん明るい所（実測の輝度マップで
      左45〜60 → 右端160〜167）。暖色を中〜暗部の青に乗せると必ず
      ブラウンに濁るが、明るいシアンの上なら暖かい白＝光源の芯に見える。
      濁りと美しさを分けているのは色ではなく「乗せる場所の明るさ」。

   2) 主役は彩度の高いオレンジではなく、暖色に寄せた白 rgba(255,236,204)。
      シアンは G が高いので、彩度の高い橙を重ねると B だけが下がって
      オリーブ（khaki）に転ぶ（実測：amber/gold/coral の3案すべてで G>B）。
      暖色白なら B が落ちないので転ばず、光が熱を持ったようにだけ見える。
      その芯のさらに外側に、ごく小さくコーラルを置いて赤の気配を足す。

   なお暖色をシェーダのcolorパラメータ側へ入れるのは禁物で、面全体で青と
   補間されて中間調が濁る（color2/color3に入れた5パターンすべてでコピー面が
   (44,47,55)(39,42,48)(43,42,55) の濁った無彩色になった）。暖色は必ず
   この独立した層に閉じ込める。この層に mix-blend-mode は掛けられない
   （奥行きのネイビーも同じ層にあり、一緒に合成が変わってコピー面の
   深さが崩れる。実測でコピー面が -33〜-51 ずれた）。
   ========================================================================== */
.sg-hero-mount::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* 上から順に重なる。
     1) 赤の気配（光の最先端。画面外に中心を置き、内側の裾だけを見せる）
     2) 光の温度（暖色白。シアンの光の芯が熱を持って見える）
     3) 奥行きのネイビー（コピーが乗る左側に効かせ、右上のシアンには掛けない） */
  background:
    radial-gradient(30% 22% at 108% 8%, rgba(255, 110, 60, 0.24), rgba(255, 110, 60, 0) 62%),
    radial-gradient(62% 50% at 103% 20%, rgba(255, 236, 204, 0.3), rgba(255, 236, 204, 0) 66%),
    radial-gradient(100% 134% at -14% 56%, rgba(2, 24, 66, 0.96), rgba(2, 24, 66, 0.62) 48%, rgba(2, 24, 66, 0) 80%);
}
/* SPは縦長。シアンの光は上空にあるので、温度もそこに合わせて上辺へ置く。
   コピーが乗る中〜下段は深いネイビーのままで、暖色は一切掛けない。 */
@media (max-width: 767px) {
  .sg-hero-mount::before {
    background:
      radial-gradient(34% 9% at 96% 2%, rgba(255, 110, 60, 0.22), rgba(255, 110, 60, 0) 66%),
      radial-gradient(86% 26% at 84% 6%, rgba(255, 236, 204, 0.28), rgba(255, 236, 204, 0) 70%),
      radial-gradient(168% 88% at 6% 78%, rgba(2, 24, 66, 0.94), rgba(2, 24, 66, 0.48) 44%, rgba(2, 24, 66, 0) 80%);
  }
}
/* この層はドリフトさせない。
   以前は暖色の小さな光だけを持つ層だったので transform で漂わせていたが、
   奥行きと下端のネイビーを同じ層に持たせた今は、scale/translate が
   グラデーションの端ごと動かしてしまう。実際、下端の暗部が画面外へ
   逃げて、HEROの終わりが鮮やかなシアンのままWHAT WE DOの紺にぶつかり
   段差になっていた。面の動きはシェーダ自身が持っているので、
   この層は構図を固定する役割に徹する。 */

/* ==========================================================================
   粒子（質感）
   --------------------------------------------------------------------------
   ページ側の .fwd-scene--noise と同じ feTurbulence・同じ180pxタイルだが、
   ノイズの作り方だけ変えている。ページ側は「黒＋アルファ変動」の粒子で、
   これは白〜淡色の地では機能するが、HEROのような暗い地では黒を黒に
   重ねることになり、実測でも粒状感が全く増えなかった
   （stddev 3.80 → 3.72、つまり無変化）。ここでは彩度を落とした
   グレーの粒子にしてsoft-lightで合成し、明暗の両方向に振れるようにした
   （実測 3.80 → 5.31）。
   さらに今回、粒子が「ほぼ感じられない」という指摘を受けて baseFrequency を
   0.95 → 0.75 に下げ、opacity を 0.5 → 0.9 に上げた。2倍DPR（Retina）で
   実際に描画して確認したところ、0.95では粒子が細かすぎて面が滑らかに
   見えていた。0.75の方が1粒が大きく、紙のような素材として認識される。

   副次的だが重要な効果として、暗いグラデーションは8bit表示だと
   バンディング（縞）が出る。粒子がこれをディザリングして消している。

   ShaderGradient本体のgrainは使わない：暗部でノイズが相対的に持ち上がって
   圧縮ノイズのように見えるうえ、poster画像の圧縮効率が57倍悪化するため
   （実測 7KB → 399KB）。CSS側なら poster と canvas の両方に同じ粒子が
   同じ密度でかかり、canvasの拡大縮小の影響も受けない。
   ========================================================================== */
.sg-hero-mount::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.9;
  mix-blend-mode: soft-light;
  background-repeat: repeat;
  background-size: 180px 180px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27180%27%20height%3D%27180%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.75%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%271%200%200%200%200%200%201%200%200%200%200%200%201%200%200%200%200%200%200%201%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
}

/* ==========================================================================
   HERO末尾 → WHAT WE DO への接続
   --------------------------------------------------------------------------
   以前はここに「HERO末尾で紺にフェードして継ぎ目を消す」ための
   ::after（透明→brand-deepのグラデーション、bottom 42vh）を置いていたが、
   sticky cover transition（.fwd-hero__reveal / forward.css参照）の導入により
   不要になったため削除した。理由：フェードの42vh区間は .fwd-hero の
   「総flow高さの末尾」に位置するため、.fwd-hero__reveal を追加して
   総高さを伸ばすと、フェード区間がまるごと新しいreveal区間の内側に
   ずれ込む。reveal中はまだ #whatwedo が被さり切っておらず
   ShaderGradientが見えている必要があるのに、フェードが先に効いて
   紺一色にしてしまうと「途中で背景が変化する」という禁止事項に触れる。
   #whatwedo自体が不透明な紺の面としてHEROへ重なっていくため、
   継ぎ目を隠すための色フェードはもう必要ない
   （実体が覆うので、そもそも継ぎ目が発生しない）。
   ========================================================================== */