/* 背景の泡: トップページと記事ページの背景で、泡がぶくぶく下から上へ上る（2026-09-24。試作は docs/drafts/bubbles/）
   カードより後ろの層に置くので、ガラスのカードの後ろを通る泡はぼやけ、余白や隙間ではくっきり見える。
   見た目は「水面に戻る」の泡（css/surface.css の .wa-rise）とそろえる。 */
.wa-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.wa-ambient-bubble {
  position: absolute;
  left: var(--x);
  bottom: -40px;
  width: var(--s);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--glow-blue) 55%, transparent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--glow-blue) 25%, transparent);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--glow-soft) 45%, transparent) 0%, transparent 55%);
  opacity: 0;
  animation: wa-ambient-rise var(--d) linear forwards;
}
/* 上るにつれて左右に揺れ、水面（画面の上）に近づくと消える */
@keyframes wa-ambient-rise {
  0%   { transform: translate(0, 0) scale(0.6);                                   opacity: 0; }
  10%  { opacity: var(--o); }
  35%  { transform: translate(calc(var(--sway) * 1), -35vh) scale(0.8); }
  65%  { transform: translate(calc(var(--sway) * -0.6), -70vh) scale(0.95); }
  85%  { opacity: var(--o); }
  100% { transform: translate(calc(var(--sway) * 0.4), -105vh) scale(1.05);      opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-ambient { display: none; }
}