/* =========================================================
   スナック — play.css
   style.css の上に「控えめな演出」だけを足すファイル
   ========================================================= */

/* ---------- ファーストビュー：ゆっくり上がる、かすかな泡 ---------- */
.bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bubble {
  position: absolute; bottom: -20px;
  border-radius: 50%;
  border: 1px solid rgba(243,236,228,.35);
  animation: rise var(--d) linear var(--delay) infinite;
  opacity: 0;
}
@keyframes rise {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: .4; }
  80% { opacity: .25; }
  100% { transform: translateY(-105vh); opacity: 0; }
}

/* ---------- How to：3枚が少しずつ時間をずらして浮かぶ ---------- */
.howto__step:nth-child(2) { transition-delay: .2s; }
.howto__step:nth-child(3) { transition-delay: .4s; }

/* ---------- Q&A：開くと「Q.」が「A.」に変わり、答えが静かに現れる ---------- */
.qa__item[open] summary::before { content: "A."; }
.qa__item[open] p { animation: answerIn .9s var(--ease); }
@keyframes answerIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 動きを減らす設定の人には泡を出さない ---------- */
@media (prefers-reduced-motion: reduce) {
  .bubbles { display: none; }
}