@charset "UTF-8";
/* ============================================================
   HERO FX — トップ1画面目とローディングの演出（2026-10）
   ------------------------------------------------------------
   動かすのは hero-fx.js / loader-fx.js / spear-art.js。
   ここは見た目だけ。JS が動かなければ、どの要素も作られない。
   ============================================================ */


/* ============================================================
   稲妻（3枚重ね）
   ------------------------------------------------------------
   にじみ（太く薄い）→ 色（中くらい）→ 芯（細く白い）の順に重ねる。
   フィルターを使わないので、毎コマ形を変えても重くならない。
   線の太さは画面上の px で固定（絵を拡大縮小しても太さが変わらない）。
   ============================================================ */
.hfx-bolt path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.hfx-bolt--blue .glow { stroke: rgba(70, 128, 255, 0.26); stroke-width: 10px; }
.hfx-bolt--blue .mid  { stroke: rgba(108, 172, 255, 0.9); stroke-width: 3px; }
.hfx-bolt--blue .core { stroke: #FFFFFF; stroke-width: 1.3px; }
.hfx-bolt--gold .glow { stroke: rgba(232, 164, 52, 0.3); stroke-width: 10px; }
.hfx-bolt--gold .mid  { stroke: rgba(240, 186, 82, 0.95); stroke-width: 3px; }
.hfx-bolt--gold .core { stroke: #FFFDF2; stroke-width: 1.3px; }

/* 飛んでくる槍の稲妻。以前の1本線用の指定（にじみフィルター）を打ち消す */
.spear-fly__bolts .hfx-bolt path { filter: none; }


/* ============================================================
   槍の照り返し（穂先の上を走る光の筋）
   ------------------------------------------------------------
   SVG の中の移動量は、その絵の座標（槍の幅120）で数える。
   175 動かすと、穂先の根元から切っ先の先まで抜ける。
   ============================================================ */
.spa-sheen {
  animation: spa-sheen 3.6s cubic-bezier(0.55, 0.05, 0.35, 1) infinite;
}
@keyframes spa-sheen {
  0%        { transform: translateY(0); }
  42%, 100% { transform: translateY(-175px); }
}


/* ============================================================
   トップ1画面目
   ============================================================ */

/* 文字の後ろと前に敷く絵。ロゴの舞台と同じ大きさで、はみ出しても切らない */
.hero__stage .hfx-back,
.hero__stage .hfx-front {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.hero__stage .hfx-front { z-index: 3; }

/* ---- 文字がつながる ---- */
.hfx-link {
  stroke: rgba(198, 150, 62, 0.85);
  stroke-width: 1.4px;
  stroke-linecap: round;
}
.hfx-node { fill: #C9A050; }
.hfx-node__halo { fill: none; stroke: rgba(214, 170, 82, 0.85); stroke-width: 1.2px; }
.hfx-runner {
  fill: #FFF8E2;
  filter: drop-shadow(0 0 4px rgba(240, 190, 90, 1)) drop-shadow(0 0 10px rgba(240, 190, 90, 0.7));
}

/* ---- 槍を呼ぶ ---- */
.hfx-aim {
  stroke: rgba(198, 150, 62, 0.85);
  stroke-width: 1.4px;
  stroke-dasharray: 2 12;
  stroke-linecap: round;
}
.hfx-orb {
  fill: rgba(255, 242, 205, 0.75);
  filter: drop-shadow(0 0 8px rgba(255, 214, 130, 0.95)) drop-shadow(0 0 22px rgba(240, 180, 80, 0.6));
}

/* ---- 割れ目 ----
   ・にじみ：割れ目の奥から漏れる光。太い金の線をぼかす
   ・割れ目：根元が太く先が細い、紺の面（クリーム地で割れ目として読める濃さ）
   ・芯　　：割れ目の真ん中の、いちばん熱い白い線 */
.hfx-crack__glow path {
  fill: none;
  stroke: rgba(255, 196, 84, 0.58);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hfx-crack__glow { filter: blur(3px); }
.hfx-crack__fissure path { fill: #141C33; opacity: 0.8; }
.hfx-crack__core path {
  fill: none;
  stroke: #FFF6D4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- 割れ目から立ち上がる光の筋 ----
   放射状の帯（conic）を、中心から外へ溶かす（mask）。
   位置と大きさは JS が刃先に合わせて入れる */
.hero__stage .hfx-rays {
  position: absolute;
  width: 100px; height: 100px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: repeating-conic-gradient(from 0deg,
    rgba(255, 226, 150, 0) 0deg,
    rgba(255, 226, 150, 0.85) 3deg,
    rgba(255, 246, 220, 0.95) 4.5deg,
    rgba(255, 226, 150, 0) 9deg,
    rgba(255, 226, 150, 0) 17deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.85) 12%, transparent 62%);
          mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.85) 12%, transparent 62%);
}

/* ---- 閃光と衝撃の輪 ---- */
.hero__stage .hfx-flash {
  position: absolute;
  z-index: 4;
  width: 100px; height: 100px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 250, 230, 0.95) 14%,
    rgba(255, 220, 140, 0.55) 34%,
    rgba(255, 220, 140, 0) 68%);
}
.hero__stage .hfx-ring {
  position: absolute;
  z-index: 3;
  width: 100px; height: 100px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  border: 2px solid rgba(255, 236, 190, 0.95);
  box-shadow: 0 0 16px rgba(240, 186, 82, 0.85), inset 0 0 14px rgba(240, 186, 82, 0.7);
}
/* もとの光の輪も、少し太く大きく */
.hero__stage .spear-ring {
  width: calc(var(--sp-w, 96px) * 0.9);
  height: calc(var(--sp-w, 96px) * 0.9);
  border-width: 2px;
  box-shadow: 0 0 14px rgba(240, 186, 82, 0.8);
}
/* もとの「刺さった所に散る6本の雷」は、割れ目に置き換えたので出さない */
.hero__stage .spear-fx { display: none !important; }

/* ---- 画面全体にかぶせるもの（火花・白む光） ---- */
.hero .hfx-sparks {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 5;
  pointer-events: none;
}
.hero .hfx-veil {
  position: absolute; inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--vx, 50%) var(--vy, 40%),
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 244, 214, 0.6) 20%,
    rgba(255, 244, 214, 0) 62%);
}


/* ============================================================
   ローディング画面
   ============================================================ */
#loader .ldr-fx,
#loader .ldr-strike,
#loader .ldr-flash {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
#loader .ldr-fx { z-index: 0; }
#loader .loader__stage { position: relative; z-index: 1; }
#loader .ldr-strike { z-index: 2; overflow: visible; }
#loader .ldr-flash {
  z-index: 3;
  opacity: 0;
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 40%),
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 246, 222, 0.6) 16%,
    rgba(255, 246, 222, 0) 55%);
}
/* 槍を少し大きく。穂先の映り込みや口金の締め輪が見える大きさにする
   （spear.css の大きさを上書き。縦長の箱で、高さが大きさを決める） */
#loader .ldr-spear {
  width: clamp(100px, 12vw, 148px);
  height: clamp(176px, 31vh, 296px);
}
/* 落雷は太く */
#loader .ldr-strike .glow { stroke-width: 16px; }
#loader .ldr-strike .mid  { stroke-width: 4.2px; }
#loader .ldr-strike .core { stroke-width: 1.8px; }


/* ============================================================
   スマホ
   ------------------------------------------------------------
   ぼかし（blur）は、ぼかす範囲を毎コマ描き直すので重い。
   スマホでは割れ目のにじみを、ぼかさない太い薄い線に置き換える。
   ============================================================ */
@media (max-width: 767px) {
  .hfx-crack__glow { filter: none; }
  .hfx-crack__glow path { stroke: rgba(255, 196, 84, 0.38); }
  .hfx-bolt--blue .glow, .hfx-bolt--gold .glow { stroke-width: 7px; }
  #loader .ldr-strike .glow { stroke-width: 11px; }
  #loader .ldr-strike .mid  { stroke-width: 3.2px; }
}


/* ============================================================
   動きを減らす設定
   ------------------------------------------------------------
   JS 側でも作らないが、念のため見た目でも止める
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) .spa-sheen { animation: none; }
  html:not(.motion-full) .hfx-sparks,
  html:not(.motion-full) .hfx-veil,
  html:not(.motion-full) .ldr-fx,
  html:not(.motion-full) .ldr-strike,
  html:not(.motion-full) .ldr-flash { display: none !important; }
}
html.motion-reduced .spa-sheen { animation: none; }
html.motion-reduced .hfx-sparks,
html.motion-reduced .hfx-veil,
html.motion-reduced .ldr-fx,
html.motion-reduced .ldr-strike,
html.motion-reduced .ldr-flash { display: none !important; }