入力フォーム付きヒーロー

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「入力フォーム付きヒーロー」の効果を追加してください。

# 追加してほしい効果
入力フォーム付きヒーロー（ヒーロー & タイトル）
中央のキャッチコピーにメール入力欄と登録ボタンを一体化させたウェイトリスト向けヒーロー。背景は揺れるメッシュグラデ、送信すると注記テキストが成功表示に切り替わります。

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

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- 入力フォーム付きヒーロー：中央コピー＋メール入力＋登録ボタン一体型。背景は揺れるメッシュグラデ -->
<section class="hwl">
  <div class="hwl__mesh" aria-hidden="true"></div>
  <div class="hwl__inner">
    <span class="hwl__kicker">&#9679; COMING SOON</span>
    <h1 class="hwl__title">早期登録で、<br><span>ローンチの先頭に並ぶ。</span></h1>
    <p class="hwl__sub">公開前の先行アクセスと特別価格をお届けします。メールアドレスを登録するだけ、30秒で完了です。</p>
    <form class="hwl__form" id="hwlForm" onsubmit="return false" novalidate>
      <label class="hwl__field">
        <input class="hwl__input" type="email" id="hwlEmail" placeholder="you@example.com" autocomplete="email" required>
        <button class="hwl__btn hwl__btn--primary" type="submit">登録する</button>
      </label>
      <p class="hwl__note" id="hwlNote">今すぐ登録すると、招待コードを優先的にお送りします。</p>
    </form>
    <div class="hwl__cta">
      <a class="hwl__btn hwl__btn--ghost" href="#" onclick="return false">プロダクト資料を見る &rarr;</a>
    </div>
    <div class="hwl__stack" aria-hidden="true">
      <span></span><span></span><span></span>
      <b class="hwl__stack-text">既に842名が登録済み</b>
    </div>
  </div>
</section>

【CSS】
* { box-sizing: border-box; }
body {
  margin: 0;
  display: block;
  background: #0b0e17;
  font-family: "Segoe UI", "Hiragino Sans", system-ui, sans-serif;
}

/* ルート：全幅フル、中央寄せの土台（自前でflex centerを組む） */
.hwl {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #0b0e17;
  color: #f3f4fb;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 34px 24px;
}

/* 揺れるメッシュグラデーション（背景アニメ） */
.hwl__mesh {
  position: absolute; inset: -20%;
  background:
    radial-gradient(36% 40% at 18% 22%, rgba(56, 189, 248, .32), transparent 62%),
    radial-gradient(34% 38% at 84% 18%, rgba(129, 140, 248, .3), transparent 62%),
    radial-gradient(40% 44% at 55% 88%, rgba(45, 212, 191, .22), transparent 65%);
  filter: blur(10px);
  animation: hwlMesh 19s ease-in-out infinite alternate;
}
@keyframes hwlMesh {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-3%, 3%) scale(1.06); }
  100% { transform: translate(3%, -2%) scale(1); }
}

.hwl__inner { position: relative; z-index: 1; max-width: 560px; }
.hwl__kicker {
  display: inline-block; padding: 7px 16px; border-radius: 999px;
  background: rgba(56, 189, 248, .12); border: 1px solid rgba(56, 189, 248, .32);
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; color: #7dd3fc;
}
.hwl__title {
  margin: 16px 0 0; font-size: clamp(26px, 4.2vw, 40px); font-weight: 800; line-height: 1.28;
  color: #f3f4fb;
}
.hwl__title span {
  background: linear-gradient(90deg, #7dd3fc, #a5b4fc 55%, #5eead4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hwl__sub { margin: 14px auto 0; max-width: 420px; font-size: 14.5px; line-height: 1.75; color: #a7acc4; }

.hwl__form { margin: 26px auto 0; max-width: 440px; }
.hwl__field {
  display: flex; gap: 8px; padding: 6px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.hwl__field:focus-within { border-color: #7dd3fc; box-shadow: 0 0 0 3px rgba(125, 211, 252, .18); }
.hwl__input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  padding: 11px 12px; font-size: 14.5px; color: #f3f4fb; font-family: inherit;
}
.hwl__input::placeholder { color: #6d7391; }
.hwl__note { margin: 10px 0 0; font-size: 12px; color: #7a7fa0; transition: color .2s ease; }
.hwl__note.is-ok { color: #5eead4; font-weight: 700; }

.hwl__cta { margin-top: 16px; }
.hwl__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 22px; border-radius: 10px; font-size: 14px; font-weight: 700;
  text-decoration: none; border: 0; cursor: pointer; white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  font-family: inherit;
}
.hwl__btn--primary {
  color: #0b0e17; background: linear-gradient(135deg, #7dd3fc, #a5b4fc);
  box-shadow: 0 12px 26px rgba(125, 211, 252, .28);
}
.hwl__btn--primary:hover { transform: translateY(-1px); }
.hwl__btn--ghost { color: #f3f4fb; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .22); }
.hwl__btn--ghost:hover { border-color: rgba(255, 255, 255, .5); transform: translateY(-2px); }

.hwl__stack { margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.hwl__stack span {
  width: 26px; height: 26px; border-radius: 50%; margin-left: -10px;
  border: 2px solid #0b0e17;
  background: linear-gradient(135deg, #7dd3fc, #a5b4fc);
  animation: hwlPop 3.6s ease-in-out infinite;
}
.hwl__stack span:first-child { margin-left: 0; }
.hwl__stack span:nth-child(2) { background: linear-gradient(135deg, #a5b4fc, #5eead4); animation-delay: .5s; }
.hwl__stack span:nth-child(3) { background: linear-gradient(135deg, #5eead4, #7dd3fc); animation-delay: 1s; }
@keyframes hwlPop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.hwl__stack-text { font-size: 12.5px; font-weight: 700; color: #a7acc4; }

@media (max-width: 560px) {
  .hwl { padding: 28px 20px; }
  .hwl__title { font-size: clamp(22px, 7vw, 28px); }
  .hwl__field { flex-direction: column; }
  .hwl__btn--primary { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hwl__mesh, .hwl__stack span { animation: none; }
}

【JavaScript】
// 入力フォーム付きヒーロー：送信時にメールの簡易バリデーションを行い、注記テキストを成功表示に差し替える（実送信はしない）。
(() => {
  const form = document.getElementById('hwlForm');
  const email = document.getElementById('hwlEmail');
  const note = document.getElementById('hwlNote');
  if (!form || !email || !note) return;

  const defaultNote = note.textContent;

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const value = (email.value || '').trim();
    const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
    if (ok) {
      note.textContent = '登録ありがとうございます。招待コードをメールでお送りします。';
      note.classList.add('is-ok');
    } else {
      note.textContent = '正しいメールアドレスを入力してください。';
      note.classList.remove('is-ok');
    }
  });

  email.addEventListener('input', () => {
    if (note.classList.contains('is-ok')) {
      note.classList.remove('is-ok');
      note.textContent = defaultNote;
    }
  });
})();

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

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