ネオン発光

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「ネオン発光」の効果を追加してください。

# 追加してほしい効果
ネオン発光（ボタン）
漆黒の背景に浮かぶ枠と文字がシアンに多重発光。待機中は淡く呼吸し、ホバーで発光が強まり、押すと沈み込みます。配信やゲーム系サイトのCTAに。

# 追加する場所
👉【ここに対象箇所を記入：例「トップのヒーローセクション」「お問い合わせボタン」「記事カードの一覧」など】

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- ネオン発光ボタン: ダーク背景で枠と文字が多重発光。待機で呼吸、hoverで強発光、activeで沈む -->
<div class="stage">
  <button class="btn-neon" type="button" aria-label="今すぐ体験する">今すぐ体験する</button>
  <p class="hint">待機中は淡く呼吸し、ホバーで発光が強まります</p>
</div>

【CSS】
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-family: "Segoe UI", system-ui, sans-serif;
  /* 漆黒に近いダーク背景 + 中央の淡いビネットで上品に */
  background:
    radial-gradient(circle at 50% 45%, #0e1b22 0%, #05080b 55%, #020304 100%);
}

.stage {
  display: grid;
  place-items: center;
  gap: 22px;
}

.btn-neon {
  --neon: #5ef1ff;
  position: relative;
  padding: 19px 54px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--neon);
  background: rgba(10, 18, 22, .45);
  border: 1.5px solid var(--neon);
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-shadow: 0 0 6px rgba(94, 241, 255, .7), 0 0 14px rgba(94, 241, 255, .4);
  box-shadow:
    0 0 8px rgba(94, 241, 255, .28),
    0 0 18px rgba(94, 241, 255, .14),
    inset 0 0 8px rgba(94, 241, 255, .06);
  transition: color .35s ease, background .35s ease, transform .18s ease;
  /* 待機時のアイドル: 発光が2.6秒周期でゆっくり呼吸する */
  animation: neon-idle 2.6s ease-in-out infinite;
}

@keyframes neon-idle {
  0%, 100% {
    box-shadow:
      0 0 8px rgba(94, 241, 255, .26),
      0 0 18px rgba(94, 241, 255, .12),
      inset 0 0 6px rgba(94, 241, 255, .05);
    text-shadow: 0 0 5px rgba(94, 241, 255, .6), 0 0 12px rgba(94, 241, 255, .3);
  }
  50% {
    box-shadow:
      0 0 14px rgba(94, 241, 255, .5),
      0 0 32px rgba(94, 241, 255, .28),
      inset 0 0 10px rgba(94, 241, 255, .12);
    text-shadow: 0 0 9px rgba(94, 241, 255, .9), 0 0 22px rgba(94, 241, 255, .55);
  }
}

.btn-neon:hover,
.btn-neon:focus-visible {
  color: #eafffe;
  background: rgba(94, 241, 255, .1);
  transform: translateY(-2px);
  animation: neon-hover 1.1s ease-in-out infinite;
}

@keyframes neon-hover {
  0%, 100% {
    box-shadow:
      0 0 16px rgba(94, 241, 255, .68),
      0 0 40px rgba(94, 241, 255, .4),
      inset 0 0 12px rgba(94, 241, 255, .18);
    text-shadow: 0 0 9px rgba(255, 255, 255, .85), 0 0 20px rgba(94, 241, 255, .8), 0 0 36px rgba(94, 241, 255, .5);
  }
  50% {
    box-shadow:
      0 0 22px rgba(94, 241, 255, .85),
      0 0 52px rgba(94, 241, 255, .5),
      inset 0 0 16px rgba(94, 241, 255, .24);
    text-shadow: 0 0 12px rgba(255, 255, 255, 1), 0 0 26px rgba(94, 241, 255, .95), 0 0 46px rgba(94, 241, 255, .6);
  }
}

.btn-neon:active {
  transform: translateY(1px) scale(.97);
  animation: none;
  box-shadow:
    0 0 8px rgba(94, 241, 255, .35),
    inset 0 0 10px rgba(94, 241, 255, .22);
  text-shadow: 0 0 4px rgba(94, 241, 255, .5);
}

.btn-neon:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .65);
  outline-offset: 5px;
}

.hint {
  margin: 0;
  font-size: 13px;
  color: #7fa3ac;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .btn-neon,
  .btn-neon:hover,
  .btn-neon:focus-visible { animation: none; }
}

【JavaScript】
/* ネオン発光ボタン: 演出はCSSのみで完結(box-shadow/text-shadowの多重発光アニメーション)。JS不要。 */

# 外部ライブラリ
なし（追加ライブラリ不要）

# 守ってほしいこと
- 既存のHTML構造・レイアウト・デザインを壊さないこと。必要に応じてクラス名・色・サイズを私のサイトに合わせて調整してよい。
- クラス名やidが既存と衝突しないよう、必要なら接頭辞で名前空間を分けること。
- レスポンシブ対応と prefers-reduced-motion への配慮を入れること。
- 私のサイトのフレームワーク（React / Vue / 素のHTML など）に合わせて実装すること。不明な場合は素のHTML/CSS/JSで提示し、組み込み手順も説明すること。
- 変更後の確認手順も簡潔に教えてください。