/* ============================================================
   Foodmapme — Card Background Library (ฉากหลังการ์ด)
   ฉากหลังทุกอันเป็น CSS ล้วน (0 KB image) + เป็นพื้น "จาง/โปร่งแสง" (translucent)
   จึงอ่านตัวอักษรได้ทั้งโหมดสว่าง/มืด (พื้นผิวการ์ดเดิมยังโชว์ผ่าน)

   ใช้งาน: เติมคลาส .fm-bg .fm-bg--KEY ลงบนการ์ดของเจ้าของเนื้อหา
     (ดู includes/backgrounds.php : bg_class) เช่น
       <div class="cmt fm-bg fm-bg--cream">…</div>

   เพิ่มฉากหลังใหม่ = เพิ่ม 1 แถวใน FM_BACKGROUNDS (backgrounds.php) + บล็อก CSS 1 ก้อนที่นี่
   * ใช้ selector สองคลาส (.fm-bg.fm-bg--KEY) เพื่อให้ชนะ background ของการ์ดเดิม
   * ตัว "นิ่ง" = ใส่ background-image บนตัวการ์ดเลย (วาดครั้งเดียว ต้นทุน ~0)
   * ตัว "ขยับได้" = ลายขยับอยู่บน ::before แล้วขยับด้วย transform/opacity เท่านั้น
       → ทำงานบน GPU compositor ไม่ repaint ทุกเฟรม (เบาบนมือถือ แม้มีหลายใบในฟีด)
       host การ์ดต้อง position:relative + isolation:isolate (กัน z-index:-1 หลุด) + overflow:hidden (clip เลเยอร์ที่ขยับ)
   ============================================================ */

.fm-bg{ position:relative; background-repeat:no-repeat; }

/* host ของฉากหลังแบบขยับได้ (เลเยอร์ขยับอยู่บน ::before, z-index:-1 = หลังเนื้อหาแต่หน้าพื้นการ์ด) */
.fm-bg--sakura, .fm-bg--confetti, .fm-bg--gold, .fm-bg--bokeh, .fm-bg--aurora, .fm-bg--galaxy{
  isolation:isolate; overflow:hidden;
}
.fm-bg--sakura::before, .fm-bg--confetti::before, .fm-bg--gold::before, .fm-bg--bokeh::before,
.fm-bg--aurora::before, .fm-bg--galaxy::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
}

/* ---- SOFT (ฟรี) — โทนพาสเทลเรียบ (นิ่ง) ---- */
.fm-bg.fm-bg--cream{ background-image:linear-gradient(135deg, rgba(237,160,90,.12), rgba(237,160,90,.02)); }
.fm-bg.fm-bg--blush{ background-image:linear-gradient(135deg, rgba(244,114,150,.13), rgba(244,114,150,.03)); }
.fm-bg.fm-bg--sky{   background-image:linear-gradient(135deg, rgba(80,150,235,.13), rgba(80,150,235,.03)); }
.fm-bg.fm-bg--mint{  background-image:linear-gradient(135deg, rgba(60,190,140,.14), rgba(60,190,140,.03)); }

/* ---- FOOD (นิ่ง) ---- */
.fm-bg.fm-bg--citrus{ background-image:linear-gradient(120deg, rgba(255,160,40,.17), rgba(255,210,80,.05)); }
.fm-bg.fm-bg--matcha{ background-image:linear-gradient(120deg, rgba(120,180,70,.17), rgba(190,215,120,.05)); }
.fm-bg.fm-bg--berry{  background-image:linear-gradient(120deg, rgba(190,80,180,.15), rgba(120,90,220,.06)); }
.fm-bg.fm-bg--cocoa{  background-image:linear-gradient(120deg, rgba(150,100,60,.18), rgba(200,150,90,.05)); }

/* ---- NATURE ---- */
.fm-bg.fm-bg--ocean{  background-image:linear-gradient(120deg, rgba(40,140,200,.16), rgba(40,200,170,.06)); }
.fm-bg.fm-bg--forest{ background-image:linear-gradient(120deg, rgba(40,150,90,.17), rgba(120,180,70,.06)); }
.fm-bg.fm-bg--sunset{ background-image:linear-gradient(120deg, rgba(255,120,60,.17), rgba(180,80,200,.09)); }

/* ซากุระ — พื้นชมพูจาง (นิ่ง) + กลีบโปรยลง (::before ขยับด้วย transform) */
.fm-bg.fm-bg--sakura{ background-image:linear-gradient(135deg, rgba(250,200,215,.10), rgba(250,200,215,.02)); }
.fm-bg.fm-bg--sakura::before{
  inset:-180px 0 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(244,140,180,.22) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 40%, rgba(244,140,180,.18) 0 5px, transparent 6px),
    radial-gradient(circle at 40% 75%, rgba(250,170,200,.20) 0 4px, transparent 5px),
    radial-gradient(circle at 88% 80%, rgba(244,140,180,.16) 0 3px, transparent 4px);
  background-size:160px 160px;
  animation:fm-bg-fall 14s linear infinite; will-change:transform;
}

/* ---- FESTIVAL ---- */
/* คอนเฟตตี — จุดสีสันโปรยลง (::before ขยับ) */
.fm-bg.fm-bg--confetti::before{
  inset:-180px 0 0;
  background-image:
    radial-gradient(circle at 12% 25%, rgba(255,90,90,.28) 0 4px, transparent 5px),
    radial-gradient(circle at 50% 15%, rgba(90,160,255,.26) 0 4px, transparent 5px),
    radial-gradient(circle at 80% 35%, rgba(255,200,40,.30) 0 4px, transparent 5px),
    radial-gradient(circle at 30% 70%, rgba(80,200,140,.26) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 80%, rgba(200,90,230,.24) 0 4px, transparent 5px);
  background-size:170px 170px;
  animation:fm-bg-fall 18s linear infinite; will-change:transform;
}
/* ทองอร่าม — พื้นทองจาง (นิ่ง) + แถบประกายกวาดผ่าน (::before translateX) */
.fm-bg.fm-bg--gold{ background-image:linear-gradient(120deg, rgba(220,170,40,.18), rgba(255,225,140,.07)); }
.fm-bg.fm-bg--gold::before{
  top:0; bottom:0; left:-60%; width:55%;
  background:linear-gradient(100deg, transparent, rgba(255,240,190,.5), transparent);
  animation:fm-bg-sweep 6s ease-in-out infinite; will-change:transform;
}
/* โบเก้ — วงแสงอุ่นฟุ้ง (::before ลอยเบาๆ ด้วย transform) */
.fm-bg.fm-bg--bokeh::before{
  inset:-30px;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,200,120,.30), transparent 40px),
    radial-gradient(circle at 75% 25%, rgba(255,160,200,.26), transparent 50px),
    radial-gradient(circle at 60% 80%, rgba(180,200,255,.24), transparent 45px),
    radial-gradient(circle at 35% 70%, rgba(255,230,150,.22), transparent 35px);
  animation:fm-bg-bob 9s ease-in-out infinite alternate; will-change:transform;
}

/* ---- GRADIENT / NEON ---- */
.fm-bg.fm-bg--dawn{
  background-image:linear-gradient(120deg, rgba(255,170,120,.16), rgba(180,150,230,.12) 50%, rgba(120,180,230,.10));
}
/* ออโรรา — ผืนไล่สีใหญ่บน ::before เลื่อน/เอียงด้วย transform */
.fm-bg.fm-bg--aurora::before{
  inset:-60%;
  background:linear-gradient(120deg, rgba(80,220,180,.20), rgba(120,140,240,.18) 40%, rgba(200,110,230,.18) 70%, rgba(80,220,200,.20));
  animation:fm-bg-aurora 12s ease-in-out infinite alternate; will-change:transform;
}
/* กาแล็กซี — พื้นคราม-ม่วง (นิ่ง) + ดาวพราว (::before กะพริบด้วย opacity) */
.fm-bg.fm-bg--galaxy{
  background-image:linear-gradient(125deg, rgba(70,60,160,.20), rgba(150,80,200,.14) 60%, rgba(60,90,180,.18));
}
.fm-bg.fm-bg--galaxy::before{
  inset:0;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.55) 0 1.3px, transparent 2px),
    radial-gradient(circle at 62% 18%, rgba(255,255,255,.45) 0 1px, transparent 1.6px),
    radial-gradient(circle at 82% 60%, rgba(255,255,255,.5) 0 1.3px, transparent 2px),
    radial-gradient(circle at 38% 72%, rgba(255,255,255,.4) 0 1px, transparent 1.6px);
  background-size:140px 140px;
  animation:fm-bg-twinkle 5s ease-in-out infinite; will-change:opacity;
}

/* keyframes — ใช้ transform/opacity เท่านั้น (GPU compositor, ไม่ repaint) */
@keyframes fm-bg-fall{ from{ transform:translate3d(0,-160px,0); } to{ transform:translate3d(0,0,0); } }
@keyframes fm-bg-sweep{ 0%{ transform:translateX(0); } 100%{ transform:translateX(360%); } }
@keyframes fm-bg-bob{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(14px,-12px,0); } }
@keyframes fm-bg-aurora{ from{ transform:translate3d(-12%,-8%,0) rotate(0deg); } to{ transform:translate3d(12%,8%,0) rotate(8deg); } }
@keyframes fm-bg-twinkle{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

/* เคารพการตั้งค่า "ลดการเคลื่อนไหว" ของผู้ใช้ — ปิด animation ทั้งบนตัวการ์ดและ ::before */
@media (prefers-reduced-motion: reduce){
  .fm-bg, .fm-bg::before{ animation:none !important; }
}

/* ============================================================
   พรีวิวในหน้าร้าน (การ์ดตัวอย่างพร้อมแถบ "ข้อความ" จำลอง)
   ============================================================ */
.bgp-demo{ width:100%; height:108px; border:1px solid var(--border); border-radius:var(--r-md);
  padding:16px 18px; display:flex; flex-direction:column; gap:9px; justify-content:center; overflow:hidden; }
.bgp-line{ height:9px; border-radius:999px; background:var(--ink); opacity:.20; width:100%; }
.bgp-line--strong{ height:11px; opacity:.42; width:58%; }
.bgp-line--short{ width:42%; }