アニメーショングラデーション

<!-- FlowDesk：アニメグラデを土台にしたSaaSヒーロー -->
<section class="fd-hero">
  <!-- 主役：無限ループするアニメーショングラデーション -->
  <div class="fd-hero__bg" aria-hidden="true"></div>
  <div class="fd-hero__grain" aria-hidden="true"></div>

  <header class="fd-nav">
    <div class="fd-logo">Flow<span>Desk</span></div>
    <nav class="fd-links">
      <a href="#">機能</a>
      <a href="#">料金</a>
      <a href="#">導入事例</a>
    </nav>
    <button class="fd-nav__cta" type="button">無料で始める</button>
  </header>

  <div class="fd-hero__inner">
    <span class="fd-badge">▲ 新機能：AIタスク要約</span>
    <h1 class="fd-title">チームの仕事を、<br>ひとつの画面に。</h1>
    <p class="fd-sub">タスク・ドキュメント・チャットを束ねる次世代ワークスペース。今日から30秒でセットアップ。</p>
    <div class="fd-actions">
      <button class="fd-btn fd-btn--main" type="button" id="fdStart">14日間無料トライアル</button>
      <button class="fd-btn fd-btn--ghost" type="button">デモを見る</button>
    </div>
    <p class="fd-note">クレジットカード不要・いつでも解約可</p>
  </div>
</section>

/* FlowDesk：紺×青の世界観。主役はループするアニメグラデーション */
* { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: "Segoe UI", "Hiragino Sans", system-ui, sans-serif; }

.fd-hero {
  position: relative;
  min-height: 400px;
  height: 400px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #fff;
  background: #0f1b34;
}

/* ★主役：background-position を流して4色グラデを無限ループ */
.fd-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(120deg, #0f1b34, #1c3a7a, #4f7cff, #16224a, #0f1b34);
  background-size: 300% 300%;
  animation: fdFlow 14s ease infinite;
}
@keyframes fdFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 上質感を足す微細ノイズ */
.fd-hero__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.06;
  background-image: radial-gradient(rgba(255,255,255,0.8) 0.5px, transparent 0.5px);
  background-size: 4px 4px;
  pointer-events: none;
}

/* ナビ */
.fd-nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 26px;
}
.fd-logo { font-weight: 800; font-size: 18px; letter-spacing: 0.01em; }
.fd-logo span { color: #7fa0ff; }
.fd-links { display: flex; gap: 20px; margin-left: 8px; }
.fd-links a {
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s ease;
}
.fd-links a:hover { color: #fff; }
.fd-nav__cta {
  margin-left: auto;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #0f1b34;
  background: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.fd-nav__cta:hover { transform: translateY(-2px); }

/* ヒーロー本体 */
.fd-hero__inner {
  position: relative;
  z-index: 2;
  margin: auto;
  text-align: center;
  padding: 0 24px;
  max-width: 560px;
}
.fd-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.25);
  color: #cfe0ff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.fd-title {
  margin-top: 16px;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-shadow: 0 4px 24px rgba(0,0,0,0.35);
}
.fd-sub {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255,255,255,0.9);
}
.fd-actions {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.fd-btn {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  border-radius: 999px;
  padding: 12px 22px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fd-btn--main {
  color: #fff;
  background: linear-gradient(135deg, #4f7cff, #6f5cff);
  border: none;
  box-shadow: 0 10px 28px rgba(79,124,255,0.5);
}
.fd-btn--main:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(79,124,255,0.6); }
.fd-btn--main:active { transform: scale(0.98); }
.fd-btn--ghost {
  color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.3);
}
.fd-btn--ghost:hover { background: rgba(255,255,255,0.16); }
.fd-note { margin-top: 12px; font-size: 11px; color: rgba(255,255,255,0.6); }

@media (prefers-reduced-motion: reduce) {
  .fd-hero__bg { animation: none; background-position: 50% 50%; }
  .fd-btn, .fd-nav__cta { transition: none; }
}

// トライアルCTAの軽いフィードバック（SaaSの申込み体験を演出）
const startBtn = document.getElementById("fdStart");

if (startBtn) {
  startBtn.addEventListener("click", () => {
    const label = startBtn.textContent;
    startBtn.textContent = "登録メールを送信しました ✓";
    startBtn.disabled = true;
    // 数秒で元に戻す
    setTimeout(() => {
      startBtn.textContent = label;
      startBtn.disabled = false;
    }, 1800);
  });
}

<!-- アニメーショングラデーション: 滑らかに色が流れる背景 -->
<div class="ag-stage">
  <div class="ag-card">
    <span class="ag-eyebrow">ANIMATED GRADIENT</span>
    <h1 class="ag-title">流れる色彩</h1>
    <p class="ag-lead">background-position をアニメーションさせ、4色のグラデが無限にループします。</p>
    <div class="ag-chips">
      <span>CSS only</span>
      <span>60fps</span>
      <span>軽量</span>
    </div>
  </div>
</div>

/* ベース: ステージ全面に大きなグラデを敷き、位置を動かす */
* { box-sizing: border-box; margin: 0; padding: 0; }

.ag-stage {
  min-height: 360px;
  display: grid;
  place-items: center;
  font-family: "Segoe UI", "Hiragino Sans", system-ui, sans-serif;
  /* 4色を200%幅で配置し position を流す */
  background: linear-gradient(125deg, #ff5f6d, #845ec2, #2c73d2, #00c9a7);
  background-size: 300% 300%;
  animation: ag-flow 12s ease-in-out infinite;
  padding: 24px;
}

@keyframes ag-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 中央のガラスカード */
.ag-card {
  max-width: 460px;
  text-align: center;
  color: #fff;
  padding: 34px 38px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.ag-eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  font-weight: 700;
  opacity: 0.85;
}

.ag-title {
  margin: 10px 0 12px;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.ag-lead {
  font-size: 14px;
  line-height: 1.8;
  opacity: 0.92;
}

.ag-chips {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.ag-chips span {
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* モーション低減設定を尊重 */
@media (prefers-reduced-motion: reduce) {
  .ag-stage { animation: none; background-position: 50% 50%; }
}