@charset "UTF-8";
/* ============================================================
   SPEAR — 雷をまとった金の槍
   ------------------------------------------------------------
   2か所で使います。

   ① ローディング画面
      ・金の槍が立っていて、その上にパーセンテージが乗っています
      ・100%に近づくほど、槍にまとう雷が強くなります
      ・100%になると、槍が上へ放たれて画面の外へ消えます

   ② トップの1画面目（ヒーロー）
      ・その槍が、こんどは下から突き刺さるように現れます
      ・後ろにロケットのような軌道跡を引きます
      ・刺さったあと、軌道跡が「下から順に」消えていきます

   ★ここは見た目だけのファイルです★
     JSが動かなくても、レイアウトは崩れません。
   ============================================================ */


/* ============================================================
   ① ローディングの槍
   ============================================================ */
.ldr-spear {
  position: relative;
  width: clamp(74px, 9vw, 108px);
  /* 数字のすぐ下に立たせます */
  height: clamp(150px, 26vh, 268px);
  will-change: transform, opacity;
}
.ldr-spear svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}

/* 槍の本体（刃と柄） */
.ldr-spear__body { filter: drop-shadow(0 0 6px rgba(198, 167, 104, 0.45)); }

/* まとう雷。ふだんは消えていて、進むほど濃くなります */
.ldr-spear__bolts {
  opacity: 0;
  mix-blend-mode: screen;
}
.ldr-spear__bolts path {
  fill: none;
  stroke: #FFF6E2;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(255, 233, 170, 0.95));
}

/* 刃先で光るかたまり */
.ldr-spear__spark {
  fill: #FFFDF4;
  opacity: 0;
  filter: drop-shadow(0 0 12px rgba(255, 231, 160, 0.95));
}

/* 放たれるときに後ろへ引く光の線 */
.ldr-spear__jet {
  position: absolute;
  left: 50%; top: 62%;
  width: clamp(5px, 0.9vw, 9px);
  height: 150vh;
  transform: translateX(-50%) scaleY(0);
  transform-origin: 50% 0%;
  opacity: 0;
  pointer-events: none;
  border-radius: 999px;
  background: linear-gradient(to bottom,
    rgba(255, 252, 240, 0.95) 0%,
    rgba(239, 223, 184, 0.80) 8%,
    rgba(198, 167, 104, 0.52) 24%,
    rgba(176, 143, 78, 0.24) 52%,
    rgba(138, 110, 54, 0) 100%);
}


/* ============================================================
   ② ヒーローの軌道跡（ロケットの噴射跡）
   ------------------------------------------------------------
   金の刃の位置（横35%・縦53%）から、まっすぐ下へ伸ばします。
   ヒーローは overflow:hidden なので、画面の下で自然に切れます。
   ============================================================ */
.spear-trail {
  position: absolute;
  left: 35%;
  top: 53%;
  width: clamp(7px, 1.2vw, 14px);
  height: 165vh;
  transform: translateX(-50%) scaleY(0);
  transform-origin: 50% 0%;
  opacity: 0;
  pointer-events: none;
  border-radius: 999px;

  /* 先端は白く熱く、うしろへいくほど金→濃い琥珀→透明へ。
     これが「色の変化」の本体です */
  background: linear-gradient(to bottom,
    rgba(255, 253, 244, 0.98) 0%,
    rgba(255, 240, 200, 0.90) 5%,
    rgba(239, 223, 184, 0.78) 13%,
    rgba(198, 167, 104, 0.56) 28%,
    rgba(176, 143, 78, 0.32) 50%,
    rgba(138, 110, 54, 0.13) 74%,
    rgba(138, 110, 54, 0) 100%);

  /* ★下から順に消していくための「けしゴム」★
     --erase を 0% → 120% へ動かすと、透明な部分が
     下からせり上がってきて、跡が下から順に消えます。 */
  --erase: 0%;
  -webkit-mask-image: linear-gradient(to top,
    transparent var(--erase), #000 calc(var(--erase) + 17%));
          mask-image: linear-gradient(to top,
    transparent var(--erase), #000 calc(var(--erase) + 17%));
}

/* 芯。細く白く、先に消えるので「熱が冷めていく」感じが出ます */
.spear-trail__core {
  position: absolute;
  left: 50%; top: 0;
  width: 34%;
  height: 62%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(to bottom,
    rgba(255, 255, 252, 0.95) 0%,
    rgba(255, 246, 226, 0.62) 30%,
    rgba(255, 240, 200, 0) 100%);
}

/* 刺さった場所に散る火花と雷 */
.spear-fx {
  position: absolute;
  left: 35%; top: 53%;
  width: clamp(120px, 20vw, 260px);
  height: clamp(120px, 20vw, 260px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
}
.spear-fx svg { width: 100%; height: 100%; overflow: visible; }
.spear-fx path {
  fill: none;
  stroke: #FFF3D2;
  stroke-width: 1.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(255, 226, 150, 0.9));
}
/* ぶつかった瞬間に広がる光の輪 */
.spear-ring {
  position: absolute;
  left: 35%; top: 53%;
  width: clamp(60px, 9vw, 120px);
  height: clamp(60px, 9vw, 120px);
  margin: 0;
  transform: translate(-50%, -50%) scale(0.2);
  border-radius: 50%;
  border: 1px solid rgba(255, 240, 200, 0.9);
  pointer-events: none;
  opacity: 0;
}


/* ============================================================
   動きを減らす設定にしている方への配慮
   ------------------------------------------------------------
   槍が飛ぶ・雷が走るといった強い動きは出しません。
   （JS側でも、演出を短く静かなものに切り替えます）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* html に motion-full が付いているときは、この控えめ指定を効かせません。
     （URLに ?motion=full を付けたとき、motion-pref.js が付けます） */
  html:not(.motion-full) .ldr-spear__bolts,
  html:not(.motion-full) .ldr-spear__jet,
  html:not(.motion-full) .spear-trail,
  html:not(.motion-full) .spear-fx,
  html:not(.motion-full) .spear-ring { display: none !important; }
}
/* 逆に「控えめにする」を選んだときは、設定に関係なく隠します */
html.motion-reduced .ldr-spear__bolts,
html.motion-reduced .ldr-spear__jet,
html.motion-reduced .spear-trail,
html.motion-reduced .spear-fx,
html.motion-reduced .spear-ring { display: none !important; }