グラスカード

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

# 追加してほしい効果
グラスカード（カード & テーブル）
カラフルに揺らめく背景の上に、backdrop-filterで透け感を出したグラスカード。薄い枠と斜めの光沢が時間差でゆっくり流れ、上品な質感を演出します。

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

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- グラスカード: カラフルな背景の上に backdrop-blur の半透明カード＋光沢＋薄い枠 -->
<div class="stage">
  <div class="gl-bg" aria-hidden="true">
    <span class="gl-bg__blob gl-bg__blob--1"></span>
    <span class="gl-bg__blob gl-bg__blob--2"></span>
    <span class="gl-bg__blob gl-bg__blob--3"></span>
  </div>
  <article class="gl-card">
    <span class="gl-card__icon" aria-hidden="true">✦</span>
    <p class="gl-card__eyebrow">PREMIUM PLAN</p>
    <h2 class="gl-card__title">すべての機能を、制限なく</h2>
    <p class="gl-card__desc">広告非表示・優先サポート・無制限保存。チームの生産性をワンランク引き上げます。</p>
    <ul class="gl-card__list">
      <li>無制限のプロジェクト作成</li>
      <li>優先カスタマーサポート</li>
      <li>高度な分析ダッシュボード</li>
    </ul>
    <button type="button" class="gl-card__cta">アップグレードする</button>
  </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: #170f2e;
  color: #fff;
  overflow: hidden;
}

.stage { position: relative; display: grid; place-items: center; width: 100%; }

.gl-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: linear-gradient(135deg, #1c1240, #170f2e 60%, #2a0f3a);
}
.gl-bg__blob {
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .75;
  animation: gl-drift 16s ease-in-out infinite;
}
.gl-bg__blob--1 { background: #f472b6; top: -14%; left: -10%; animation-delay: 0s; }
.gl-bg__blob--2 { background: #60a5fa; bottom: -18%; right: -12%; animation-delay: -5s; }
.gl-bg__blob--3 { background: #fbbf24; top: 30%; right: 18%; width: 30vmax; height: 30vmax; animation-delay: -10s; opacity: .5; }

@keyframes gl-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6%, 8%) scale(1.12); }
}

.gl-card {
  position: relative;
  z-index: 1;
  width: min(320px, 88vw);
  padding: 32px 28px 28px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.gl-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 76px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .6);
}

.gl-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .4) 48%, transparent 65%);
  background-size: 260% 260%;
  background-position: 130% 0;
  animation: gl-sheen 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gl-sheen {
  0%, 55%, 100% { background-position: 130% 0; }
  28% { background-position: -30% 0; }
}

.gl-card__icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  font-size: 18px;
  color: #fde68a;
}
.gl-card__eyebrow { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .16em; color: #e9d5ff; }
.gl-card__title { margin: 0 0 10px; font-size: 20px; font-weight: 800; line-height: 1.4; }
.gl-card__desc { margin: 0 0 18px; font-size: 13px; line-height: 1.75; color: rgba(255, 255, 255, .8); }

.gl-card__list { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 9px; }
.gl-card__list li { font-size: 12.5px; padding-left: 22px; position: relative; color: rgba(255, 255, 255, .88); }
.gl-card__list li::before { content: "✓"; position: absolute; left: 0; color: #86efac; font-weight: 800; }

.gl-card__cta {
  width: 100%;
  font: inherit;
  font-weight: 700;
  font-size: 13.5px;
  color: #241a3d;
  cursor: pointer;
  border: none;
  border-radius: 12px;
  padding: 13px 0;
  background: linear-gradient(135deg, #fff, #f3e8ff);
  transition: transform .18s ease, box-shadow .18s ease;
}
.gl-card__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .3); }

@media (prefers-reduced-motion: reduce) {
  .gl-bg__blob, .gl-card::before { animation: none; }
  .gl-card { transition: none; }
}

【JavaScript】
// このグラスカードは背景の揺らぎ・光沢ともCSSアニメーションのみで完結するためJSは不要

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

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