/* =========================================================
   かくれ家 ふわっと演出
   - kkrg-fuwa / -b / -c / -d / -e / -f … 6つのパターン
   - kkrg-fuwa-stagger を付けた親 … 中のカードが1枚ずつ登場

   ▼下の数値は「初期値（フォールバック）」。
     実際の値は管理画面「設定 → かくれ家ふわっと」で調整でき、
     その保存値が wp_head から出力されてここを上書きする。
     （このファイルは demo.html やPHP無効時にそのまま使われる）
   ========================================================= */

/* パターン1：下からふわっ（kkrg-fuwa） */
.kkrg-anim-ready .kkrg-fuwa {
  opacity: 0;
  transform: translateY(60px);
  filter: none;
  transition: opacity 1.2s cubic-bezier(0.16,1,0.3,1), transform 1.2s cubic-bezier(0.16,1,0.3,1), filter 1.2s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform, filter;
}
.kkrg-anim-ready .kkrg-fuwa.kkrg-in { opacity: 1; transform: none; filter: none; }

/* パターン2：上からふわっ（kkrg-fuwa-b） */
.kkrg-anim-ready .kkrg-fuwa-b {
  opacity: 0;
  transform: translateY(-60px);
  transition: opacity 1.2s cubic-bezier(0.16,1,0.3,1), transform 1.2s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform;
}
.kkrg-anim-ready .kkrg-fuwa-b.kkrg-in { opacity: 1; transform: none; }

/* パターン3：左からふわっ（kkrg-fuwa-c） */
.kkrg-anim-ready .kkrg-fuwa-c {
  opacity: 0;
  transform: translateX(-70px);
  transition: opacity 1.2s cubic-bezier(0.16,1,0.3,1), transform 1.2s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform;
}
.kkrg-anim-ready .kkrg-fuwa-c.kkrg-in { opacity: 1; transform: none; }

/* パターン4：右からふわっ（kkrg-fuwa-d） */
.kkrg-anim-ready .kkrg-fuwa-d {
  opacity: 0;
  transform: translateX(70px);
  transition: opacity 1.2s cubic-bezier(0.16,1,0.3,1), transform 1.2s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform;
}
.kkrg-anim-ready .kkrg-fuwa-d.kkrg-in { opacity: 1; transform: none; }

/* パターン5：ふわっと拡大（kkrg-fuwa-e） */
.kkrg-anim-ready .kkrg-fuwa-e {
  opacity: 0;
  transform: scale(0.928);
  transition: opacity 1.2s cubic-bezier(0.16,1,0.3,1), transform 1.2s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform;
}
.kkrg-anim-ready .kkrg-fuwa-e.kkrg-in { opacity: 1; transform: none; }

/* パターン6：やわらかボケ（kkrg-fuwa-f） */
.kkrg-anim-ready .kkrg-fuwa-f {
  opacity: 0;
  transform: none;
  filter: blur(10px);
  transition: opacity 1.4s cubic-bezier(0.16,1,0.3,1), filter 1.4s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, filter;
}
.kkrg-anim-ready .kkrg-fuwa-f.kkrg-in { opacity: 1; filter: none; }

/* ---- ハーブ散らし（背景レイヤー） ---- */
.kkrg-herb-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.kkrg-herb-item { position: absolute; display: block; }
.kkrg-herb-item img { display: block; }

/* 「動きを減らす」設定の人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .kkrg-anim-ready .kkrg-fuwa,
  .kkrg-anim-ready .kkrg-fuwa-b,
  .kkrg-anim-ready .kkrg-fuwa-c,
  .kkrg-anim-ready .kkrg-fuwa-d,
  .kkrg-anim-ready .kkrg-fuwa-e,
  .kkrg-anim-ready .kkrg-fuwa-f {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}