プロフィールカード

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

# 追加してほしい効果
プロフィールカード（カード & テーブル）
アバターと名前、肩書、一言コメント、SNSリンクとフォローボタンをまとめた定番のプロフィールカード。ホバーでふわりと浮き上がり、アバター周りの光が呼吸するように瞬きます。

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

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- プロフィールカード: アバター＋名前＋肩書＋一言＋SNS/フォローボタン -->
<div class="stage">
  <article class="pf-card">
    <div class="pf-card__cover"></div>
    <div class="pf-card__avatar-ring">
      <img class="pf-card__avatar" src="https://picsum.photos/id/64/200/200" alt="ユーザーのアバター写真" width="88" height="88">
    </div>
    <h2 class="pf-card__name">白石 澪</h2>
    <p class="pf-card__role">プロダクトデザイナー ・ Tokyo</p>
    <p class="pf-card__bio">やわらかい体験づくりが好きな3年目デザイナーです。休日はコーヒーと展示巡り。</p>

    <dl class="pf-card__stats">
      <div><dt>投稿</dt><dd>482</dd></div>
      <div><dt>フォロワー</dt><dd>12.4k</dd></div>
      <div><dt>フォロー中</dt><dd>318</dd></div>
    </dl>

    <div class="pf-card__actions">
      <button type="button" class="pf-card__follow" aria-pressed="false">
        <span class="pf-card__follow-label">フォローする</span>
      </button>
      <div class="pf-card__social" aria-label="SNSリンク">
        <a href="#" aria-label="Xのプロフィールを見る">𝕏</a>
        <a href="#" aria-label="Instagramのプロフィールを見る">◎</a>
        <a href="#" aria-label="メールを送る">✉</a>
      </div>
    </div>
  </article>
</div>

【CSS】
/* プロフィールカード */
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  padding: 20px;
  display: grid;
  place-items: center;
  font-family: "Hiragino Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 14% 18%, #f6dcec 0%, transparent 46%),
    radial-gradient(circle at 88% 12%, #dee3fb 0%, transparent 50%),
    radial-gradient(circle at 50% 100%, #fdf3df 0%, transparent 55%),
    #faf8f6;
  color: #22232b;
}

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

.pf-card {
  position: relative;
  width: min(320px, 88vw);
  background: #fff;
  border-radius: 22px;
  padding: 0 26px 26px;
  text-align: center;
  box-shadow: 0 14px 40px rgba(40, 30, 70, .12);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}

.pf-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 60px rgba(40, 30, 70, .2);
}

.pf-card__cover {
  height: 84px;
  margin: 0 -26px 0;
  background: linear-gradient(120deg, #a78bfa 0%, #f472b6 55%, #fbbf6e 100%);
  background-size: 200% 200%;
  animation: pf-cover-shift 9s ease-in-out infinite;
}

@keyframes pf-cover-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.pf-card__avatar-ring {
  position: relative;
  width: 88px;
  height: 88px;
  margin: -44px auto 12px;
  border-radius: 50%;
  padding: 4px;
  background: #fff;
  display: grid;
  place-items: center;
}

.pf-card__avatar-ring::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(167, 139, 250, .55);
  animation: pf-halo 2.6s ease-in-out infinite;
}

@keyframes pf-halo {
  0%, 100% { transform: scale(1); opacity: .6; }
  50% { transform: scale(1.12); opacity: 0; }
}

.pf-card__avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.pf-card__name { margin: 0 0 2px; font-size: 19px; font-weight: 800; letter-spacing: .01em; }
.pf-card__role { margin: 0 0 12px; font-size: 12.5px; font-weight: 600; color: #9061e0; letter-spacing: .03em; }
.pf-card__bio { margin: 0 0 18px; font-size: 13px; line-height: 1.7; color: #5b5d6b; }

.pf-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 18px;
  padding: 14px 0;
  border-top: 1px solid #eee7f5;
  border-bottom: 1px solid #eee7f5;
}
.pf-card__stats div { display: flex; flex-direction: column; gap: 2px; }
.pf-card__stats dt { order: 2; margin: 0; font-size: 11px; color: #9a9ba8; font-weight: 500; }
.pf-card__stats dd { order: 1; margin: 0; font-size: 16px; font-weight: 800; color: #23202c; }

.pf-card__actions { display: grid; gap: 12px; }

.pf-card__follow {
  font: inherit;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .02em;
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 999px;
  padding: 12px 0;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  box-shadow: 0 10px 24px rgba(139, 92, 246, .32);
  transition: transform .18s ease, box-shadow .18s ease, background .25s ease, color .25s ease;
}
.pf-card__follow:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(139, 92, 246, .4); }
.pf-card__follow:active { transform: translateY(0); }
.pf-card__follow[aria-pressed="true"] {
  background: #fff;
  color: #8b5cf6;
  box-shadow: inset 0 0 0 1.5px #d9c8f7;
}

.pf-card__social { display: flex; justify-content: center; gap: 10px; }
.pf-card__social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f5f2fb;
  color: #6d4fa8;
  text-decoration: none;
  font-size: 14px;
  transition: background .2s ease, transform .2s ease;
}
.pf-card__social a:hover { background: #ece3fb; transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .pf-card, .pf-card__follow, .pf-card__social a { transition: none; }
  .pf-card__cover, .pf-card__avatar-ring::after { animation: none; }
}

【JavaScript】
// フォローボタンの状態をトグル（フォローする ⇄ フォロー中）
(() => {
  const btn = document.querySelector('.pf-card__follow');
  const label = btn ? btn.querySelector('.pf-card__follow-label') : null;
  if (!btn || !label) return;

  btn.addEventListener('click', () => {
    const pressed = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!pressed));
    label.textContent = pressed ? 'フォローする' : 'フォロー中';
  });
})();

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

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