/* Arrival 背景（試作 2026-10-06）
 * 本番 HOME（_deploy/index.html）の最後の節「Arrival」の地：明るい地（#fafbfc）＋青い粒が寄り集まる three.js の粒子。
 * 使い方：背景を敷きたい節（position:relative）の最初の子に
 *   <div class="arrival-bg" data-arrival-bg aria-hidden="true"></div>
 * を置き、arrival-bg.js を defer で読む。文字や枠は position:relative; z-index:1 で上に重ねる。
 * - 粒子のキャンバスは画面の高さで節の中に貼り付く（position:sticky）＝本番と同じ「画面いっぱいの絵」の縮尺
 * - 節に overflow:hidden を付けない（sticky が効かなくなる）。はみ出しは overflow:clip（節）と clip-path（.arrival-bg）で切る
 * - 動きを減らす設定・WebGL なし・読み込み前は、下の CSS の点（静止）を出す
 */
.arrival-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:#fafbfc;clip-path:inset(0)}
.arrival-bg canvas{position:sticky;top:0;display:block;width:100%;height:100vh;height:100lvh;opacity:0;transition:opacity .9s ease}
.arrival-bg.is-on canvas{opacity:1}
/* 本番の .vig（production-light.css）：画面の端ほど地の色に溶かす。キャンバスと同じく画面の高さで貼り付く */
.arrival-bg::after{content:"";position:sticky;top:0;display:block;height:100vh;height:100lvh;margin-top:-100vh;margin-top:-100lvh;
  background:radial-gradient(ellipse at 50% 46%,transparent 36%,rgba(250,251,252,.4) 75%,rgba(250,251,252,.88))}
/* 本番の Arrival の文字の下の薄い幕（.scene.arrive .in::before）。文字の塊に class="arrival-scrim" を付ける。
   幕は文字の塊より広いので、節には overflow:clip を付けて横にはみ出させない（hidden は sticky を止めるので使わない） */
.arrival-scrim{position:relative;isolation:isolate}
.arrival-scrim::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;transform:translate(-50%,-50%);width:150%;height:170%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(250,251,252,.96),rgba(250,251,252,.78) 42%,transparent 72%)}
/* 静止の点（動きを減らす設定・WebGL が使えないとき）。大きさの違う3枚の点の柄を重ね、並びが揃って見えないようにしている */
.arrival-bg.is-static{
  background-color:#fafbfc;
  background-image:
    radial-gradient(circle at 50% 46%,rgba(63,107,255,.07) 0,rgba(63,107,255,0) 46%),
    radial-gradient(circle,rgba(28,107,255,.42) 0 1.6px,transparent 2.2px),
    radial-gradient(circle,rgba(110,155,255,.36) 0 1.2px,transparent 1.8px),
    radial-gradient(circle,rgba(87,97,128,.22) 0 1px,transparent 1.5px);
  background-size:100% 100%,97px 89px,61px 67px,37px 41px;
  background-position:0 0,13px 29px,41px 7px,23px 17px;
}
.arrival-bg.is-static canvas{display:none}
.arrival-bg.is-static::after{position:absolute;inset:0;height:auto;margin:0}