@charset "UTF-8";
/* ============================================================
   SPEAR AIM — 槍を「Aの金の角度」に沿わせる（index-test.html 専用）
   ------------------------------------------------------------
   もとの spear.css は、軌道跡・光の輪・雷の位置を
   left:35% / top:53% と決め打ちしていた。
   ロゴは画像から自動で切り出しているので、書体や画面幅で
   金の位置は動く。決め打ちだと、そのぶんズレる。

   ここでは JS（spear-aim.js）が金の実際の位置と角度を測り、
       --sp-x  金の刃先の位置（ステージ左端からのpx）
       --sp-y  同じく上端からのpx
       --sp-ang 金の軸の傾き（真上を0度として、右に倒れる向きが＋）
   を書き込む。CSS 側はその値を使うだけにする。

   ★共有ファイルを書き換えない理由★
   spear.css / spear.js / hero.js は index.html でも使う。
   ============================================================ */

/* ---- 軌道跡・光の輪・雷を、測った刃先の位置に置き直す ----
   もとの 35%/53% を上書きする。値が測れるまでは
   もとの位置のままなので、失敗しても見た目は崩れない */
.hero__stage .spear-trail,
.hero__stage .spear-ring,
.hero__stage .spear-fx {
  left: var(--sp-x, 35%);
  top:  var(--sp-y, 53%);
}

/* 軌道跡は「刃先から後ろへ伸びる線」なので、
   金の軸と同じ角度に倒す。回転の中心は上端＝刃先。
   ★transform を CSS で書かない理由★
   この要素は GSAP が transform を組み立てて動かしている。
   CSS 側で transform を書くと、その組み立てを壊してしまう。
   角度は JS から rotation として渡す。 */
.hero__stage .spear-trail {
  transform-origin: 50% 0%;
}


/* ============================================================
   飛んでくる槍そのもの
   ------------------------------------------------------------
   これまでは「Aの金の部分」自体が下から上がってきていた。
   つまり突き刺さってくるのは槍ではなく、Aの部品だった。
   ここでは別に槍を作って飛ばし、刺さった瞬間に
   本物の金と入れ替える。
   ============================================================ */
.hero__stage .spear-fly {
  position: absolute;
  left: var(--sp-x, 35%);
  top:  var(--sp-y, 53%);
  width:  var(--sp-w, 96px);
  height: var(--sp-len, 620px);
  /* 回転の中心を上端の中央＝刃先に置く。
     こうすると、角度を変えても刃先は動かない。 */
  transform-origin: 50% 0%;
  margin-left: calc(var(--sp-w, 96px) / -2);
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}
.hero__stage .spear-fly svg {
  width: 100%; height: 100%;
  display: block;
  overflow: visible;
}

/* 刃は白く熱く、柄は金から消えていく（ローダーの槍と同じ考え方） */
.spear-fly__blade { filter: drop-shadow(0 0 10px rgba(255, 226, 150, 0.75)); }

.spear-fly__bolts path {
  fill: none;
  stroke: #FFF3D2;
  stroke-width: 1.6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(255, 226, 150, 0.9));
}

/* 刃先の光 */
.spear-fly__spark {
  fill: #FFFDF2;
  filter: drop-shadow(0 0 12px rgba(255, 240, 190, 0.95));
}

/* ---- 動きを控える設定のときは、槍そのものを出さない ----
   もとの spear.css も同じ考え方で軌道跡を消している */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) .hero__stage .spear-fly { display: none !important; }
}
html.motion-reduced .hero__stage .spear-fly { display: none !important; }


/* ============================================================
   ローディングの雷を、はっきり見えるようにする
   ------------------------------------------------------------
   もとの雷はクリーム色(#FFF6E2)で、金の槍とほぼ同じ色だった。
   槍の上に槍と同じ色の線を重ねていたので、
   光っているのか分からない状態になっていた。

   ・もとのグループは隠し、spear-aim.js が入れた
     .ldr-bolts2 のほうを描く（共有ファイルは触らない）
   ・色を電光の白青に変えて、金の槍から分離する
   ・金色の線を混ぜて、槍から生まれた電気に見せる
   ============================================================ */
.ldr-spear .ldr-spear__bolts { display: none; }

.ldr-bolts2 {
  opacity: 0;
  mix-blend-mode: screen;
}
.ldr-bolts2 path {
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 電光の白青。二重のにじみで、細い線でも芯が見える */
.ldr-bolts2 .b--arc {
  stroke: #EAF3FF;
  filter:
    drop-shadow(0 0 4px rgba(180, 216, 255, 0.98))
    drop-shadow(0 0 13px rgba(120, 176, 255, 0.75));
}
/* 混ぜる金色。槍から出ている電気だと分かる */
.ldr-bolts2 .b--gold {
  stroke: #FFE9AE;
  filter:
    drop-shadow(0 0 4px rgba(255, 226, 150, 0.98))
    drop-shadow(0 0 14px rgba(255, 196, 92, 0.6));
}

/* ちらつき。明るさだけを動かすので、
   進みぐあいで濃くしている opacity のほうは邪魔しない */
.ldr-bolts2 { animation: ldrArc 0.16s steps(2, end) infinite; }
@keyframes ldrArc {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.45); }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) .ldr-bolts2 { display: none !important; }
}
html.motion-reduced .ldr-bolts2 { display: none !important; }


/* ============================================================
   ④ 光の跡を、ローディングの槍の跡と同じ見え方に合わせる
   ------------------------------------------------------------
   ローダーの跡（.ldr-spear__jet）は
       幅 5〜9px ／ 上端がいちばん白く、後ろへ細く消える
   という、細くて芯のはっきりした線。

   いっぽうヒーローの跡は 幅 7〜14px の決め打ちで、
   飛んでくる槍の柄（実測 3.4px）の 4倍も太かった。
   槍より太い跡が出ていたので、「槍が引いた跡」に見えず
   ぼんやりした帯に見えていた。

   ここでは槍の実寸から幅を出す。
     --sp-w        槍の絵の横幅（JSが金の長さから計算）
     ×0.11         その中で柄まわりが占める割合
   結果はローダーの跡とほぼ同じ太さになる。
   ============================================================ */
.hero__stage .spear-trail {
  /* 細くしすぎると光って見えないので、下限を持たせる */
  width: clamp(4px, calc(var(--sp-w, 96px) * 0.11), 9px);
}

/* 芯もローダーに合わせて、細く長く。
   先端の白さは強め、消えぎわは早めにする */
.hero__stage .spear-trail__core {
  width: 40%;
  height: 54%;
  background: linear-gradient(to bottom,
    rgba(255, 255, 252, 0.98) 0%,
    rgba(255, 248, 232, 0.70) 22%,
    rgba(255, 240, 200, 0) 100%);
}


/* ============================================================
   スマホ（iPhone など）向けの軽量化
   ------------------------------------------------------------
   この演出は「読み込み中」に走る。つまりロゴ画像の解析や
   書体の読み込みと時間帯が重なる。ここで欲張ると、
   いちばん重い瞬間にさらに描画を積むことになる。

   重いのは次の3つで、どれもスマホでだけ外す。

     1. drop-shadow の二重がけ
        線の形が変わるたび、そのにじみの範囲を丸ごと
        描き直す。1本ごとに2回かかっていた。
     2. グループ全体の brightness アニメ
        0.16秒ごとにグループを丸ごとラスタライズし直す。
     3. mix-blend-mode: screen
        重ね合わせのために別レイヤーを1枚起こす。
        iOS では filter と併用したときの負担が大きい。

   見た目は「にじみ1枚・ちらつきなし」になるが、
   色と本数は残るので、光っていることは十分伝わる。
   ============================================================ */
@media (max-width: 767px) {
  .ldr-bolts2 {
    mix-blend-mode: normal;
    animation: none;
  }
  .ldr-bolts2 .b--arc {
    filter: drop-shadow(0 0 5px rgba(150, 200, 255, 0.95));
  }
  .ldr-bolts2 .b--gold {
    filter: drop-shadow(0 0 5px rgba(255, 214, 130, 0.95));
  }

  /* 槍にまとう雷も同じ理由でにじみを1枚に */
  .spear-fly__bolts path {
    filter: drop-shadow(0 0 4px rgba(255, 226, 150, 0.9));
  }
}

/* ---- 動かす要素だと、あらかじめブラウザに伝えておく ----
   スマホは合成のやり直しが高くつくので、
   専用のレイヤーを先に用意させておくと動きが滑らかになる。
   ただし常時ではなく、演出が終わったら手放したい要素なので
   ヒーローの中だけに絞る */
.hero__stage .spear-fly,
.hero__stage .spear-trail {
  will-change: transform, opacity;
  backface-visibility: hidden;
}