ふわふわブロブ Floating blobs

「ふわふわブロブ（Floating blobs）」の動きを実装してください。
OmochiX Learn の動く見本 #018（背景・雰囲気）です。

頼み方の例: セクションの背景に、ぼかした色の玉がゆっくり漂う演出を足して。文字の邪魔にならない程度に。
どんな動きか: ぼかした色の玉がゆっくり漂う
見本で起きること: ぼかした3つの色の玉が、それぞれ別のリズムでゆっくり漂います。中央の見出しはそのまま読めます。
仕様:
- 円形の要素3つに filter: blur(28px) と不透明度0.5前後を付ける
- それぞれ6〜8秒の異なる周期で translate と scale を alternate させる
- overflow: hidden のコンテナに収め、文字は position: relative で手前に置く
- GPU負荷を抑えるため、玉は3つまで・ブラーは要素側に付ける
使いどころ: セクション背景、ログイン画面、空状態（エンプティステート）の装飾。
調整した値:
- いちばん速いブロブの片道は6s（ほかは+1秒、+2秒）（既定）
- ぼかしは28px（既定）
- 色1: #6e4bff（既定）
- 色2: #2563eb（既定）
- 色3: #d97706（既定）

実装の条件:
- HTML / CSS（必要なら素のJavaScript）で、外部ライブラリは使わない
- 見本の形・タイミング・イージングの数値はそのまま使い、文字・色・素材だけ今作っているものに合わせる
- prefers-reduced-motion: reduce の環境では動きを止めるか最小限にする
- 使った技術: CSS

見本（動くプレビューと参考コード）: https://omochix.com/learn/motion/floating-blobs/

<!-- ふわふわブロブ (Floating blobs) | OmochiX Learn 動く見本 #018 | https://omochix.com/learn/motion/floating-blobs/ -->

<style>
.fb{position:relative;display:grid;place-items:center;width:300px;height:170px;overflow:hidden;border-radius:16px;background:var(--surface)}
.fb__b{position:absolute;width:140px;height:140px;border-radius:50%;filter:blur(var(--p-blur,28px));opacity:.55}
.fb__b--1{left:-20px;top:-30px;background:var(--p-c1,var(--primary));animation:fb1 var(--p-cycle,6s) ease-in-out infinite alternate}
.fb__b--2{right:-30px;top:10px;background:var(--p-c2,var(--blue));animation:fb2 calc(var(--p-cycle,6s) + 1s) ease-in-out infinite alternate}
.fb__b--3{left:90px;bottom:-70px;background:var(--p-c3,var(--amber));animation:fb3 calc(var(--p-cycle,6s) + 2s) ease-in-out infinite alternate}
.fb__t{position:relative;font:800 34px/1 system-ui,sans-serif;letter-spacing:-.04em;color:var(--text)}
@keyframes fb1{to{transform:translate(50px,30px) scale(1.15)}}
@keyframes fb2{to{transform:translate(-40px,40px) scale(.9)}}
@keyframes fb3{to{transform:translate(-30px,-40px) scale(1.1)}}
</style>

<div class="fb"><i class="fb__b fb__b--1"></i><i class="fb__b fb__b--2"></i><i class="fb__b fb__b--3"></i><span class="fb__t">Learn</span></div>