/**
 * S2RJ Hub — Award級 WebGL ヒーロー（音波フィラメント）
 * 移植元プロト: 確認用/2026-06-16-s2rj-hero/award/hero-A-final.html
 *
 * 構造:
 *  - 演出本体（#s2rj-gl canvas + .s2rj-hero__overlay）は .hub-hero セクション内（72svh / WebGL有効時 100svh）
 *  - 入口層（#s2rj-preloader / #s2rj-gate）は position:fixed の全画面オーバーレイ
 *  - タイポ/CTA は常に表示（JS無効/WebGL非対応/reduced-motion でも可読）。canvas はその背面
 *  - preloader/gate は CSS 既定で display:none → html.s2rj-hero-js が付いた時のみ表示（JS無効で黒画面化を防ぐ）
 *  - フォント（Bebas Neue / Noto Sans JP）は親 s2rj-base が読込済み。ここでは @import しない
 */

:root{
  --s2rj-hero-base:#0D0D10;
  --s2rj-hero-lime:#C4F000;
  --s2rj-hero-red:#DC1E32;
  --s2rj-hero-safe-t: env(safe-area-inset-top, 0px);
  --s2rj-hero-safe-b: env(safe-area-inset-bottom, 0px);
}

/* ============ セクション枠（既存 .hub-hero を踏襲。既存 style.css 側で position:relative; height:72svh; overflow:hidden; border-bottom を保持） ============ */
.hub-hero{ background:var(--s2rj-hero-base); }
/* WebGL が動く時だけフルビューポート化（Award体験は全高前提）。reduced-motion / WebGL非対応 / JS無効 では既存 72svh のまま */
html.s2rj-hero-js:not(.s2rj-hero-nogl) .hub-hero{ height:100svh; }
@media (prefers-reduced-motion: reduce){
  html.s2rj-hero-js .hub-hero{ height:72svh; }
}

#s2rj-gl{
  position:absolute; inset:0; display:block; width:100%; height:100%; z-index:0;
}
/* WebGL-fail: canvas は黒のまま。DOMタイポ/CTA が上に出るので可読 */
html.s2rj-hero-nogl #s2rj-gl{
  background:radial-gradient(120% 80% at 50% 60%, rgba(196,240,0,.05), transparent 60%), var(--s2rj-hero-base);
}

/* ============ DOM overlay（タイポ / CTA / chrome）= 常設・実URL ============ */
.s2rj-hero__overlay{ position:absolute; inset:0; z-index:2; pointer-events:none; }

/* top brand bar */
.s2rj-hero__topbar{
  position:absolute; top:calc(var(--s2rj-hero-safe-t) + 22px); left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(18px,5vw,52px);
  opacity:0; transform:translateY(-12px);
  transition:opacity 1s ease .2s, transform 1s ease .2s;
}
html.s2rj-hero-ready .s2rj-hero__topbar{ opacity:1; transform:translateY(0); }
.s2rj-hero__brandmark{
  font-family:'Bebas Neue',sans-serif; font-size:clamp(18px,2.4vw,26px);
  letter-spacing:.18em; color:#fff; line-height:1;
  display:flex; align-items:center; gap:.5em;
}
.s2rj-hero__dot{
  width:.42em; height:.42em; border-radius:50%; background:var(--s2rj-hero-lime);
  box-shadow:0 0 14px var(--s2rj-hero-lime),0 0 30px rgba(196,240,0,.6);
  animation:s2rjHeroPulseDot 1.6s ease-in-out infinite;
}
@keyframes s2rjHeroPulseDot{ 0%,100%{ transform:scale(1); opacity:.9 } 50%{ transform:scale(1.5); opacity:1 } }
.s2rj-hero__tagline{
  font-family:'Bebas Neue',sans-serif; font-size:clamp(11px,1.5vw,15px);
  letter-spacing:.34em; color:rgba(255,255,255,.42);
}

/* center kinetic type */
.s2rj-hero__stage{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:0 16px;
}
.s2rj-hero__kicker{
  font-family:'Bebas Neue',sans-serif; letter-spacing:.5em;
  font-size:clamp(11px,1.6vw,15px); color:var(--s2rj-hero-lime);
  text-shadow:0 0 18px rgba(196,240,0,.7);
  margin-bottom:clamp(14px,2.6vh,26px); padding-left:.5em;
  opacity:0; transform:translateY(14px);
  transition:opacity .9s ease, transform .9s ease;
}
html.s2rj-hero-ready .s2rj-hero__kicker{ opacity:1; transform:translateY(0); transition-delay:.35s; }

.s2rj-hero__headline{
  font-family:'Noto Sans JP',sans-serif; font-weight:900;
  font-size:clamp(40px,11vw,150px); line-height:.96; letter-spacing:-.01em;
  color:#fff; position:relative; margin:0;
  text-shadow:0 0 2px rgba(255,255,255,.25);
}
.s2rj-hero__ln{ display:block; overflow:hidden; }
.s2rj-hero__ln > span{
  display:inline-block; transform:translateY(115%);
  transition:transform 1.05s cubic-bezier(.16,1,.3,1);
}
.s2rj-hero__ln.is-l2 > span{ transition-delay:.12s; }
html.s2rj-hero-ready .s2rj-hero__ln > span{ transform:translateY(0); }
.s2rj-hero__accent{
  color:var(--s2rj-hero-lime);
  text-shadow:0 0 26px rgba(196,240,0,.55),0 0 60px rgba(196,240,0,.25);
}

.s2rj-hero__subline{
  margin-top:clamp(20px,3.4vh,40px);
  font-family:'Bebas Neue',sans-serif; letter-spacing:.32em;
  font-size:clamp(14px,2.4vw,30px); color:rgba(255,255,255,.86);
  padding-left:.32em;
  opacity:0; transform:translateY(16px);
  transition:opacity 1s ease, transform 1s ease;
}
html.s2rj-hero-ready .s2rj-hero__subline{ opacity:1; transform:translateY(0); transition-delay:.7s; }
.s2rj-hero__subline b{ color:var(--s2rj-hero-lime); font-weight:400; }

/* CTA row（実URL・clickなので pointer-events:auto） */
.s2rj-hero__cta{
  position:absolute; left:0; right:0;
  bottom:calc(var(--s2rj-hero-safe-b) + clamp(56px,9vh,96px));
  display:flex; gap:clamp(12px,2vw,20px); justify-content:center;
  opacity:0; transform:translateY(20px);
  transition:opacity 1s ease, transform 1s ease;
}
html.s2rj-hero-ready .s2rj-hero__cta{ opacity:1; transform:translateY(0); transition-delay:.95s; }
/* フォールバック時（JS無効=reveal が付かない）でも overlay 全体を決めフレームで可読に。
   .s2rj-hero__ln > span（クラス無しの子）も明示リセットしないと translateY(115%) で見切れる */
html:not(.s2rj-hero-js) .s2rj-hero__topbar,
html:not(.s2rj-hero-js) .s2rj-hero__kicker,
html:not(.s2rj-hero-js) .s2rj-hero__subline,
html:not(.s2rj-hero-js) .s2rj-hero__cta,
html:not(.s2rj-hero-js) .s2rj-hero__scrollcue{ opacity:1 !important; transform:none !important; }
html:not(.s2rj-hero-js) .s2rj-hero__ln > span{ transform:none !important; transition:none !important; }
.s2rj-hero__cta{ pointer-events:auto; }
.s2rj-hero__btn{
  font-family:'Bebas Neue',sans-serif; font-size:clamp(15px,1.8vw,19px);
  letter-spacing:.22em; padding:clamp(13px,1.6vh,17px) clamp(26px,3.4vw,40px);
  border:1px solid rgba(255,255,255,.22); border-radius:2px; color:#fff;
  background:rgba(255,255,255,.02); backdrop-filter:blur(4px);
  text-decoration:none; position:relative; overflow:hidden; cursor:pointer;
  transition:color .35s ease, border-color .35s ease;
}
.s2rj-hero__btn > span{ position:relative; z-index:2; }
.s2rj-hero__btn::before{
  content:""; position:absolute; inset:0; background:var(--s2rj-hero-lime);
  transform:translateY(101%); transition:transform .42s cubic-bezier(.16,1,.3,1); z-index:1;
}
.s2rj-hero__btn:hover{ color:var(--s2rj-hero-base); border-color:var(--s2rj-hero-lime); }
.s2rj-hero__btn:hover::before{ transform:translateY(0); }
.s2rj-hero__btn--primary{ border-color:rgba(196,240,0,.5); box-shadow:0 0 24px rgba(196,240,0,.12); }

/* scroll cue */
.s2rj-hero__scrollcue{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(var(--s2rj-hero-safe-b) + 14px);
  font-family:'Bebas Neue',sans-serif; letter-spacing:.3em; font-size:11px;
  color:rgba(255,255,255,.34); display:flex; flex-direction:column; align-items:center; gap:7px;
  opacity:0; transition:opacity 1s ease;
}
html.s2rj-hero-ready .s2rj-hero__scrollcue{ opacity:1; transition-delay:1.2s; }
.s2rj-hero__bar{ width:1px; height:34px; background:linear-gradient(var(--s2rj-hero-lime),transparent); animation:s2rjHeroCue 1.8s ease-in-out infinite; }
@keyframes s2rjHeroCue{ 0%,100%{ transform:scaleY(.4); opacity:.3; transform-origin:top } 50%{ transform:scaleY(1); opacity:1; transform-origin:top } }

/* ============ 常設サウンドトグル（ゲート後もいつでも音ON/OFF）============ */
.s2rj-hero__soundtoggle{
  position:absolute; top:calc(var(--s2rj-hero-safe-t) + 18px); right:clamp(16px,5vw,50px);
  z-index:4; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(196,240,0,.4); background:rgba(13,13,16,.42); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; cursor:pointer; pointer-events:auto;
  opacity:0; transition:opacity .8s ease .4s, transform .25s ease, box-shadow .25s ease;
}
html.s2rj-hero-ready .s2rj-hero__soundtoggle{ opacity:1; }
.s2rj-hero__soundtoggle:hover{ transform:scale(1.08); box-shadow:0 0 22px rgba(196,240,0,.3); }
.s2rj-hero__sticon{ display:flex; align-items:flex-end; gap:3px; height:18px; }
.s2rj-hero__sticon i{ width:3px; background:rgba(255,255,255,.62); border-radius:2px; transition:background .25s; }
.s2rj-hero__sticon i:nth-child(1){ height:9px } .s2rj-hero__sticon i:nth-child(2){ height:16px } .s2rj-hero__sticon i:nth-child(3){ height:6px }
.s2rj-hero__soundtoggle.is-on{ border-color:var(--s2rj-hero-lime); box-shadow:0 0 20px rgba(196,240,0,.25); }
.s2rj-hero__soundtoggle.is-on .s2rj-hero__sticon i{ background:var(--s2rj-hero-lime); animation:s2rjStEq .9s ease-in-out infinite; transform-origin:bottom; }
.s2rj-hero__soundtoggle.is-on .s2rj-hero__sticon i:nth-child(2){ animation-delay:.15s } .s2rj-hero__soundtoggle.is-on .s2rj-hero__sticon i:nth-child(3){ animation-delay:.3s }
@keyframes s2rjStEq{ 0%,100%{ transform:scaleY(.45) } 50%{ transform:scaleY(1) } }

/* ============ Preloader（入口層・全画面 fixed。CSS既定で非表示 → JS起動時のみ表示） ============ */
#s2rj-preloader{
  position:fixed; inset:0; z-index:1001; background:var(--s2rj-hero-base);
  display:none; align-items:center; justify-content:center; flex-direction:column;
  transition:opacity .9s ease; pointer-events:auto;
}
html.s2rj-hero-js #s2rj-preloader{ display:flex; }
#s2rj-preloader.is-gone{ opacity:0; pointer-events:none; }
.s2rj-hero__pre-num{
  font-family:'Bebas Neue',sans-serif; font-size:clamp(64px,15vw,180px);
  line-height:.85; color:#fff; letter-spacing:.02em; position:relative; z-index:2;
  text-shadow:0 0 30px rgba(196,240,0,.18);
}
.s2rj-hero__pre-num small{ font-size:.34em; opacity:.5; margin-left:.1em; vertical-align:top; }
.s2rj-hero__pre-label{
  font-family:'Bebas Neue',sans-serif; letter-spacing:.42em; font-size:clamp(10px,1.5vw,13px);
  color:var(--s2rj-hero-lime); margin-top:18px; text-shadow:0 0 16px rgba(196,240,0,.6);
  opacity:.85; z-index:2;
}
.s2rj-hero__pre-bar{
  width:min(64vw,420px); height:2px; margin-top:26px; position:relative; z-index:2;
  background:rgba(255,255,255,.08); overflow:hidden;
}
.s2rj-hero__pre-bar i{
  position:absolute; inset:0; width:0%; background:var(--s2rj-hero-lime); display:block;
  box-shadow:0 0 14px var(--s2rj-hero-lime),0 0 30px rgba(196,240,0,.6);
}
#s2rj-pre-filament{ position:absolute; inset:0; z-index:1; opacity:.9; }

/* ============ Sound gate（入口層・全画面 fixed。CSS既定で非表示 → JS起動時のみ表示） ============ */
#s2rj-gate{
  position:fixed; inset:0; z-index:1000; background:rgba(13,13,16,.86);
  backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center;
  flex-direction:column; transition:opacity .7s ease; pointer-events:auto;
}
html.s2rj-hero-js #s2rj-gate{ display:flex; }
#s2rj-gate.is-pending{ opacity:0; pointer-events:none; }
#s2rj-gate.is-gone{ opacity:0; pointer-events:none; }
.s2rj-hero__gate-head{
  font-family:'Bebas Neue',sans-serif; letter-spacing:.16em;
  font-size:clamp(18px,3vw,30px); text-align:center; line-height:1.3;
  color:#fff; margin-bottom:clamp(30px,5vh,52px);
}
.s2rj-hero__gate-sm{ display:block; color:var(--s2rj-hero-lime); font-size:.7em; letter-spacing:.3em; margin-top:.5em; text-shadow:0 0 18px rgba(196,240,0,.6); }
.s2rj-hero__gate-circles{ display:flex; gap:clamp(18px,4vw,40px); }
.s2rj-hero__gate-c{
  width:clamp(110px,22vw,168px); aspect-ratio:1; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  cursor:pointer; transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
  font-family:'Bebas Neue',sans-serif; letter-spacing:.2em; font-size:clamp(13px,1.6vw,16px);
  border:0; background:transparent; color:#fff;
}
.s2rj-hero__gate-c--on{ background:var(--s2rj-hero-lime); color:var(--s2rj-hero-base); box-shadow:0 0 50px rgba(196,240,0,.4); }
.s2rj-hero__gate-c--on svg{ stroke:var(--s2rj-hero-base); }
.s2rj-hero__gate-c--off{ border:1px solid rgba(196,240,0,.4); color:rgba(255,255,255,.7); }
.s2rj-hero__gate-c--off svg{ stroke:rgba(255,255,255,.7); }
.s2rj-hero__gate-c:hover{ transform:scale(1.06); }
.s2rj-hero__gate-c--on:hover{ box-shadow:0 0 70px rgba(196,240,0,.6); }
.s2rj-hero__gate-c svg{ width:30px; height:30px; fill:none; stroke-width:2; stroke-linecap:round; }
.s2rj-hero__eqbar{ animation:s2rjHeroEq 1s ease-in-out infinite; transform-origin:bottom; }
.s2rj-hero__eqbar:nth-child(2){ animation-delay:.2s } .s2rj-hero__eqbar:nth-child(3){ animation-delay:.4s }
@keyframes s2rjHeroEq{ 0%,100%{ transform:scaleY(.4) } 50%{ transform:scaleY(1) } }

/* ============ スクロールロック（入口層 表示中。iOS慣性貫通対策に overscroll-behavior 併用） ============ */
html.s2rj-hero-gate-lock,
html.s2rj-hero-gate-lock body{ overflow:hidden !important; overscroll-behavior:none; }

/* ============ モバイル ============ */
@media (max-width:600px){
  .s2rj-hero__headline{ letter-spacing:0; }
  .s2rj-hero__tagline{ display:none; }
  .s2rj-hero__kicker{ font-size:12px; letter-spacing:.34em; margin-bottom:22px; padding-left:.34em; }
  .s2rj-hero__stage{ padding:0 22px; transform:translateY(-3vh); }
  .s2rj-hero__subline{ font-size:15px; letter-spacing:.28em; margin-top:22px; }
  .s2rj-hero__cta{ gap:14px; bottom:calc(var(--s2rj-hero-safe-b) + 92px); }
  .s2rj-hero__btn{ font-size:15px; padding:14px 30px; }
  .s2rj-hero__scrollcue{ bottom:calc(var(--s2rj-hero-safe-b) + 34px); }
}

/* ============ reduced-motion: 入口層を出さず、決めフレームを即表示 ============ */
@media (prefers-reduced-motion: reduce){
  #s2rj-preloader, #s2rj-gate{ display:none !important; }
  .s2rj-hero__dot, .s2rj-hero__bar, .s2rj-hero__eqbar{ animation:none !important; }
  .s2rj-hero__ln > span{ transition:none; transform:translateY(0); }
  .s2rj-hero__kicker, .s2rj-hero__subline, .s2rj-hero__cta, .s2rj-hero__topbar, .s2rj-hero__scrollcue{ transition:none; opacity:1; transform:none; }
}