/* ブランドの場面（試作 2026-10-06）
 * 本番 HOME の最初の画面（_deploy/index.html の three.js と production-light.css）から：
 *   - 背景の層 .bg-scene[data-bg-scene="rings"]（細い同心の輪・線の多面体・淡い星）… brand-scene.js が描く
 *   - 文字の部品 .brand-mark（グラデーションの「bundlyze」）・.brand-tag（bundle × analyze）・.brand-lede（本番の .lede）
 * 背景の層の置き方は arrival-bg と同じ：節（position:relative）の最初の子に置き、文字は position:relative; z-index:1 で上に。
 * キャンバスは「節の幅 × 画面の高さ」まで（節が低ければ節の高さ）で、節の中に貼り付く（sticky）。節に overflow:hidden を付けない（clip を使う）
 */
.bg-scene{position:absolute;inset:0;z-index:0;pointer-events:none;clip-path:inset(0)}
/* キャンバスの高さは JS が px で決める（層の高さと画面の高さの小さいほう）。縦横比を CSS で決めない */
.bg-scene canvas{position:sticky;top:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .9s ease}
.bg-scene.is-on canvas{opacity:1}
/* 本番の .vig：端ほど地の色に溶かす（節の地が明るい前提） */
.bg-scene[data-bg-scene="rings"]::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at var(--scene-cx,50%) 46%,transparent 36%,rgba(250,251,252,.4) 75%,rgba(250,251,252,.88))}
/* 文字の下の薄い幕（本番の .scene.hero .in::before の明るい版）。文字の塊に class="scene-scrim" を付ける */
.scene-scrim{position:relative;isolation:isolate}
.scene-scrim::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;transform:translate(-50%,-50%);width:130%;height:150%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(250,251,252,.92),rgba(250,251,252,.7) 45%,transparent 72%)}

/* 静止（動きを減らす設定・WebGL が使えないとき）：同心の細い輪と、まばらな点 */
.bg-scene[data-bg-scene="rings"].is-static{
  background-image:
    repeating-radial-gradient(circle at var(--scene-cx,50%) 50%,transparent 0 118px,rgba(0,64,255,.13) 119px 120px,transparent 121px 168px),
    radial-gradient(circle,rgba(28,107,255,.30) 0 1.2px,transparent 1.8px),
    radial-gradient(circle,rgba(110,155,255,.28) 0 1px,transparent 1.5px);
  background-size:100% 100%,97px 89px,61px 67px;
  background-position:0 0,13px 29px,41px 7px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at var(--scene-cx,50%) 50%,#000 30%,transparent 80%);
  mask-image:radial-gradient(ellipse 60% 70% at var(--scene-cx,50%) 50%,#000 30%,transparent 80%)}
.bg-scene.is-static canvas{display:none}

/* ===== 文字（本番 HOME の .wordmark / .tagline / .lede。明るい地の値は production-light.css から） ===== */
.brand-mark{display:block;font-family:"Inter",sans-serif;font-weight:700;font-size:min(12.5vw,146px);line-height:1.2;letter-spacing:-.045em;white-space:nowrap;
  background:linear-gradient(118deg,#173f93,#0040ff 65%,#476ca5);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-tag{display:block;margin-top:8px;font-family:"Inter",sans-serif;font-size:clamp(1rem,2.3vw,1.9rem);color:var(--ink-muted,#586375);letter-spacing:.02em}
.brand-tag .x{margin:0 .35em;color:var(--brand,#0040ff)}
.brand-lede{margin:26px auto 0;max-width:40em;font-size:clamp(.95rem,1.5vw,1.1rem);line-height:2.1;color:var(--ink-muted,#586375)}
.brand-lede b{font-weight:700;color:var(--ink,#202838)}
@media(max-width:600px){
  .brand-mark{font-size:17vw;white-space:normal;line-height:1.15;letter-spacing:-.04em}
  .brand-tag{font-size:1rem}
  .brand-lede{font-size:15px;line-height:2}
}