浮遊する幾何オブジェクト

<!-- MOON BREW：浮遊する豆・湯気・リングを背に、店の世界観ヒーロー -->
<section class="ff-stage" id="ffStage">
  <!-- ★主役：視差で漂う幾何オブジェクト群 -->
  <div class="ff-shapes" id="ffShapes" aria-hidden="true">
    <span class="ff-shape ff-bean"  data-depth="1.4" style="left:12%; top:24%;"></span>
    <span class="ff-shape ff-ring"  data-depth="0.7" style="left:80%; top:18%;"></span>
    <span class="ff-shape ff-cap"   data-depth="1.0" style="left:72%; top:68%;"></span>
    <span class="ff-shape ff-bean ff-bean--2" data-depth="1.8" style="left:24%; top:74%;"></span>
    <span class="ff-shape ff-dot"   data-depth="2.2" style="left:52%; top:14%;"></span>
    <span class="ff-shape ff-ring ff-ring--sm" data-depth="1.2" style="left:42%; top:80%;"></span>
  </div>

  <div class="ff-inner">
    <span class="ff-eyebrow">☕ MOON BREW</span>
    <h1 class="ff-title">一杯ごとに、<br>ひと息つく。</h1>
    <p class="ff-sub">焙煎したての香りと、手描きのラテアート。マウスを動かすと豆がふわりと漂います。</p>
    <button class="ff-btn" type="button">席を予約する</button>
  </div>
</section>

/* MOON BREW：クリーム地に、漂うコーヒーモチーフの幾何オブジェクト */
* { box-sizing: border-box; margin: 0; padding: 0; }

.ff-stage {
  position: relative;
  min-height: 400px;
  height: 400px;
  overflow: hidden;
  background: radial-gradient(120% 100% at 80% 20%, #f7efe1 0%, #efe1cd 60%, #e6d3b8 100%);
  font-family: "Hiragino Kaku Gothic ProN", "Segoe UI", system-ui, sans-serif;
  color: #2b1d12;
}

/* ★主役：浮遊オブジェクト群（JSで視差移動） */
.ff-shapes { position: absolute; inset: 0; z-index: 0; }
.ff-shape {
  position: absolute;
  will-change: transform;
  animation: ffFloat 7s ease-in-out infinite;
}

/* コーヒー豆 */
.ff-bean {
  width: 46px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6b4423, #3a2414);
  transform: rotate(-20deg);
  box-shadow: 0 8px 18px rgba(80,50,20,0.25);
}
.ff-bean::after {
  content: "";
  position: absolute;
  left: 50%; top: 4px; bottom: 4px;
  width: 3px;
  transform: translateX(-50%) rotate(8deg);
  background: rgba(245,237,225,0.6);
  border-radius: 2px;
}
.ff-bean--2 { width: 34px; height: 24px; opacity: 0.85; }

/* リング */
.ff-ring {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 6px solid rgba(201,138,59,0.45);
}
.ff-ring--sm { width: 38px; height: 38px; border-width: 4px; border-color: rgba(107,68,35,0.35); }

/* カプセル（湯気イメージ） */
.ff-cap {
  width: 70px; height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* ドット */
.ff-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(201,138,59,0.55);
}

@keyframes ffFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -14px; }
}

.ff-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 40px;
  max-width: 460px;
}
.ff-eyebrow {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #2b1d12;
}
.ff-title {
  margin-top: 12px;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: 0.02em;
  color: #2b1d12;
}
.ff-sub {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.85;
  color: #6b5340;
}
.ff-btn {
  margin-top: 20px;
  align-self: flex-start;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #3a2414, #2b1d12);
  border: none;
  padding: 12px 26px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(43,29,18,0.3);
  transition: transform 0.2s ease, background 0.2s ease;
}
.ff-btn:hover { transform: translateY(-2px); background: linear-gradient(135deg, #c98a3b, #a86c24); }
.ff-btn:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .ff-shape { animation: none; }
  .ff-btn { transition: none; }
}

// マウス位置に応じて各オブジェクトを深さ別に動かし、視差の奥行きを出す
(() => {
  const stage = document.getElementById("ffStage");
  const layer = document.getElementById("ffShapes");
  if (!stage || !layer) return; // null安全

  const shapes = Array.from(layer.querySelectorAll(".ff-shape"));
  if (!shapes.length) return;

  const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (reduce) return; // 視差は無効化（CSSの浮遊も停止済み）

  let tx = 0, ty = 0;      // 目標オフセット(中心からの比率)
  let cx = 0, cy = 0;      // 現在値（補間用）
  let raf = 0;

  // マウス位置を -0.5〜0.5 に正規化
  stage.addEventListener("pointermove", (e) => {
    const rect = stage.getBoundingClientRect();
    tx = (e.clientX - rect.left) / rect.width - 0.5;
    ty = (e.clientY - rect.top) / rect.height - 0.5;
    if (!raf) raf = requestAnimationFrame(tick);
  });
  stage.addEventListener("pointerleave", () => {
    tx = 0; ty = 0;
    if (!raf) raf = requestAnimationFrame(tick);
  });

  // 慣性付きで各シェイプへ深さ別に反映
  const tick = () => {
    cx += (tx - cx) * 0.08;
    cy += (ty - cy) * 0.08;
    for (const el of shapes) {
      const depth = parseFloat(el.dataset.depth) || 1;
      const dx = -cx * depth * 30;
      const dy = -cy * depth * 30;
      // translate プロパティで視差。transform(回転)やアニメと干渉しない
      el.style.translate = `${dx.toFixed(1)}px ${dy.toFixed(1)}px`;
    }
    // 中心へ戻りきったら inline translate を消し、CSSの浮遊アニメを復帰
    if (Math.abs(tx - cx) < 0.002 && Math.abs(ty - cy) < 0.002 && tx === 0 && ty === 0) {
      for (const el of shapes) el.style.removeProperty("translate");
      raf = 0;
      return;
    }
    raf = requestAnimationFrame(tick);
  };
})();

<!-- 浮遊する幾何オブジェクト: 半透明の図形が漂い、マウスで視差が付くヒーロー背景 -->
<div class="fs-stage" id="fsStage">
  <!-- 視差レイヤー: data-depth が大きいほど大きく動く -->
  <div class="fs-layer" data-depth="0.25">
    <span class="fs-shape fs-circle" style="--x:14%; --y:24%; --size:120px; --dur:13s; --delay:-2s"></span>
    <span class="fs-shape fs-ring"   style="--x:78%; --y:66%; --size:96px;  --dur:17s; --delay:-6s"></span>
  </div>
  <div class="fs-layer" data-depth="0.5">
    <span class="fs-shape fs-capsule" style="--x:30%; --y:74%; --size:140px; --dur:15s; --delay:-4s"></span>
    <span class="fs-shape fs-triangle" style="--x:64%; --y:18%; --size:90px; --dur:19s; --delay:-9s">
      <svg viewBox="0 0 100 100" aria-hidden="true"><polygon points="50,6 94,90 6,90"/></svg>
    </span>
  </div>
  <div class="fs-layer" data-depth="0.85">
    <span class="fs-shape fs-circle fs-small" style="--x:88%; --y:30%; --size:58px; --dur:11s; --delay:-1s"></span>
    <span class="fs-shape fs-ring fs-small"   style="--x:10%; --y:70%; --size:64px; --dur:14s; --delay:-7s"></span>
    <span class="fs-shape fs-triangle fs-small" style="--x:46%; --y:40%; --size:46px; --dur:21s; --delay:-3s">
      <svg viewBox="0 0 100 100" aria-hidden="true"><polygon points="50,6 94,90 6,90"/></svg>
    </span>
  </div>

  <!-- 前景コピー -->
  <div class="fs-content">
    <p class="fs-eyebrow">IMMERSIVE</p>
    <h1 class="fs-title">Floating Shapes</h1>
    <p class="fs-sub">漂う幾何オブジェクトがマウスに合わせて視差で動く、没入感のある動く背景。</p>
  </div>
</div>

/* 浮遊する幾何オブジェクト + マウス視差 */
* { box-sizing: border-box; margin: 0; padding: 0; }

.fs-stage {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  display: grid;
  place-items: center;
  /* 没入感のある深い青紫グラデ */
  background:
    radial-gradient(120% 90% at 18% 12%, #2a2f6b 0%, transparent 55%),
    radial-gradient(120% 90% at 88% 88%, #6d2a78 0%, transparent 55%),
    linear-gradient(160deg, #0c1030, #161038);
  font-family: "Segoe UI", "Hiragino Sans", system-ui, sans-serif;
  /* JSが書き換える視差オフセット(-1〜1) */
  --px: 0;
  --py: 0;
}

/* 視差レイヤー: JSが --px/--py と data-depth から平行移動 */
.fs-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translate3d(var(--tx, 0), var(--ty, 0), 0);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* 図形共通: 位置とゆっくりした漂いアニメ */
.fs-shape {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  display: block;
  opacity: 0.82;
  /* 常時ゆっくり漂う(マウス無しでも動く) */
  animation: fs-drift var(--dur, 16s) ease-in-out var(--delay, 0s) infinite;
  filter: drop-shadow(0 8px 24px rgba(10, 8, 40, 0.35));
}
.fs-small { opacity: 0.66; }

/* 円: 半透明グラデの塗り */
.fs-circle {
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55), rgba(129, 140, 248, 0.32) 45%, rgba(99, 102, 241, 0.12) 70%);
}

/* リング: 太い半透明ボーダーの円 */
.fs-ring {
  border-radius: 50%;
  background: transparent;
  border: calc(var(--size) * 0.12) solid rgba(167, 139, 250, 0.45);
  box-shadow: inset 0 0 18px rgba(167, 139, 250, 0.25);
}

/* カプセル: 角丸の縦長 */
.fs-capsule {
  height: calc(var(--size) * 0.52);
  margin-top: calc(var(--size) * -0.26);
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(94, 234, 212, 0.42), rgba(56, 189, 248, 0.28));
  transform: rotate(-18deg);
}

/* 三角: SVGで半透明塗り */
.fs-triangle svg { width: 100%; height: 100%; display: block; }
.fs-triangle polygon {
  fill: rgba(244, 114, 182, 0.32);
  stroke: rgba(244, 114, 182, 0.5);
  stroke-width: 3;
  stroke-linejoin: round;
}

/* ゆっくり上下に漂い、わずかに回転 */
@keyframes fs-drift {
  0%   { translate: 0 0; rotate: 0deg; }
  50%  { translate: 0 -22px; rotate: 8deg; }
  100% { translate: 0 0; rotate: 0deg; }
}

/* 前景コピー */
.fs-content {
  position: relative;
  z-index: 3;
  text-align: center;
  color: #eef1ff;
  padding: 0 24px;
  max-width: 520px;
  pointer-events: none;
}
.fs-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.42em;
  color: rgba(196, 181, 253, 0.85);
  margin-bottom: 10px;
}
.fs-title {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: 0.01em;
  background: linear-gradient(90deg, #c4b5fd, #a5b4fc, #5eead4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fs-sub {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.9;
  color: rgba(238, 241, 255, 0.8);
}

/* 動きを抑える設定では漂いを止める */
@media (prefers-reduced-motion: reduce) {
  .fs-shape { animation: none; }
  .fs-layer { transition: none; }
}

// マウス位置から視差オフセットを算出し、各レイヤーを depth に応じて動かす
(() => {
  const stage = document.getElementById("fsStage");
  if (!stage) return; // null安全

  const layers = Array.from(stage.querySelectorAll(".fs-layer"));
  if (!layers.length) return;

  // 目標値と現在値(慣性でなめらかに追従)
  let tx = 0, ty = 0;   // 目標(-1〜1)
  let cx = 0, cy = 0;   // 現在
  const MAX = 26;       // レイヤー基準の最大移動px

  // ポインタ座標を中心基準の -1〜1 に正規化
  const onMove = (e) => {
    const r = stage.getBoundingClientRect();
    if (!r.width || !r.height) return;
    tx = ((e.clientX - r.left) / r.width - 0.5) * 2;
    ty = ((e.clientY - r.top) / r.height - 0.5) * 2;
  };

  // 離れたら中心へ戻す
  const reset = () => { tx = 0; ty = 0; };

  stage.addEventListener("pointermove", onMove, { passive: true });
  stage.addEventListener("pointerleave", reset, { passive: true });

  // 慣性で現在値を目標へ寄せ、各レイヤーへ depth 倍で反映
  const tick = () => {
    cx += (tx - cx) * 0.06;
    cy += (ty - cy) * 0.06;
    for (const layer of layers) {
      const depth = parseFloat(layer.dataset.depth) || 0.5;
      layer.style.setProperty("--tx", (cx * MAX * depth).toFixed(2) + "px");
      layer.style.setProperty("--ty", (cy * MAX * depth).toFixed(2) + "px");
    }
    raf = requestAnimationFrame(tick);
  };
  let raf = requestAnimationFrame(tick);

  // 動きを抑える設定なら視差ループを止める(漂いCSSも別途停止)
  const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
  if (mq.matches) cancelAnimationFrame(raf);
})();