/* ==========================================================================
   assets/css/mes-motion.css — 🎛️ เครื่องยนต์เอฟเฟกต์กลาง (คู่กับ js/mes-motion.js)
   [23 ก.ย. 2569] ทุกกฎอยู่ใต้คลาส mm-* เท่านั้น (ห้ามกวาดกว้าง — กฎเหล็ก CSS กระทบทั้งเว็บ)
   fade = ไม่มีกฎในไฟล์นี้เลย → ตัวเล่นเดิมใช้ CSS ของตัวเองเหมือนก่อนทุกประการ
   ========================================================================== */

/* ---- 📖 ตัวดูสตอรี่ (รอบ 2) — ใช้เฉพาะตอนเปลี่ยนรูปในชุดเดียวกันที่เลือกเอฟเฟกต์ไว้ (คลาส mm-sv ใส่โดย story-viewer.js)
   วางสองรูปซ้อนกันในเวที · รูปพอดีจอแบบเดิม (contain) · กฎนี้ต้องอยู่ก่อนกฎเลื่อนสไลด์ (น้ำหนักเท่ากัน ตัวหลังชนะ) */
.story-stage.mm-sv { position: relative; overflow: hidden; }
.story-stage.mm-sv > .mm-cell { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .5s ease; }
.story-stage.mm-sv > .mm-cell.on { opacity: 1; }
.story-stage.mm-sv > .mm-cell > img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* ---- 🖼️ ปกโปรไฟล์เคลื่อนไหว (รอบ 3) — คลาส mm-cover ใส่โดย mes-motion.js เท่านั้น ---- */
.mpc-cover.mm-cover { position: relative; overflow: hidden; }
.mpc-cover.mm-cover > .mm-cell { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .8s ease; }
.mpc-cover.mm-cover > .mm-cell.on { opacity: 1; }
.mpc-cover.mm-cover > *:not(.mm-cell) { position: relative; z-index: 2; }

/* ---- เลื่อนสไลด์ ----
   🐞 [23 ก.ย. 2569] ต้องซ้ำคลาส (.mm-fx-slide.mm-fx-slide) ให้น้ำหนักตัวเลือก 0,3,0 ชนะ CSS ตัวเล่นเดิม
   (.mes-slideshow-embed .ss-stage > div = 0,2,1 ตั้ง opacity:0 + transition:opacity) — ไม่งั้นรูปเก่าจางหาย
   ก่อนเลื่อนออก และคำสั่งเลื่อนถูกทับจนกระโดด (วัดจริงใน Chromium: รูปที่ไม่ได้โชว์ทึบ 0) · ไม่แตะ CSS เดิม */
.mm-fx-slide.mm-fx-slide { overflow: hidden; }
.mm-fx-slide.mm-fx-slide > .mm-cell { opacity: 1; transform: translateX(100%); transition: transform .6s ease; }
.mm-fx-slide.mm-fx-slide > .mm-cell.on { transform: translateX(0); }
.mm-fx-slide.mm-fx-slide > .mm-cell.mm-out { transform: translateX(-100%); }

/* ---- เฟด + ซูมช้า (ซูมที่ตัวครอบ ไม่ทับ transform ของรูปที่ผู้ใช้ตั้งซูมไว้) ---- */
.mm-fx-kb { overflow: hidden; }
.mm-fx-kb > .mm-cell.mm-kb { animation: mmKenBurns var(--mm-dur, 4s) ease-out forwards; }
@keyframes mmKenBurns { from { transform: scale(1); } to { transform: scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
  .mm-fx-kb > .mm-cell.mm-kb { animation: none; }
  .mm-fx-slide.mm-fx-slide > .mm-cell { transition: none; }
}

/* ---- ตัวเลือกเอฟเฟกต์ ---- */
.mm-pick { border: 1px solid rgba(212, 175, 55, .45); border-radius: 12px; padding: 9px 10px; background: rgba(212, 175, 55, .06); margin-top: 9px; }
.mm-pick-lbl { font-size: 12.5px; font-weight: 700; color: var(--gold-soft, #f0d98a); margin-bottom: 6px; }
.mm-pick-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.mm-pick-seg button {
  flex: 1 1 80px; min-height: 36px; padding: 6px 8px; border-radius: 9px; cursor: pointer;
  background: var(--surface-2, #1f1a15); border: 1px solid var(--line, #2e271f); color: var(--text-dim, #a89c8a);
  font: inherit; font-size: 12.5px; line-height: 1.3;
}
.mm-pick-seg button.on { border-color: var(--gold, #d4af37); color: var(--gold-soft, #f0d98a); background: rgba(212, 175, 55, .12); }

/* ---- 🖼️ [รอบ 4] สไลด์โชว์ในอัลบั้ม ---- */
.album-ss-tools { display: flex; flex-direction: column; gap: 8px; }
.album-ss-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.album-cell.is-picking { cursor: pointer; outline: 2px dashed rgba(212,175,55,.5); outline-offset: -4px; }
.album-cell.is-picked { outline: 3px solid #d4af37; outline-offset: -4px; }
.album-cell.is-picked::after { content: attr(data-pick-no); position: absolute; right: 6px; top: 6px; z-index: 3;
  width: 24px; height: 24px; border-radius: 50%; background: #d4af37; color: #1a1307; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center; }
.album-ss-h { font-size: 1rem; margin: 14px 0 6px; }
.album-ss-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.album-ss-card { position: relative; flex: 0 0 120px; }
.album-ss-open { display: block; width: 120px; height: 120px; padding: 0; border: 1px solid rgba(212,175,55,.5); border-radius: 10px; overflow: hidden; background: #000; cursor: pointer; }
.album-ss-open img { width: 100%; height: 100%; object-fit: cover; }
.album-ss-badge { position: absolute; left: 6px; bottom: 6px; font-size: 11px; background: rgba(0,0,0,.65); color: #f0d98a; border-radius: 99px; padding: 1px 8px; }
.album-ss-del { position: absolute; right: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; }
.album-ssview { position: fixed; inset: 0; z-index: 200010;   /* เท่าตัวดูรูปเดิมของอัลบั้ม — ต่ำกว่านี้แถบบนทับปุ่มปิด */ background: rgba(0,0,0,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.album-ssview[hidden] { display: none; }
.album-ssview-stage { position: relative; width: min(92vw, 520px); aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: #000; }
.album-ssview-stage > .mm-cell { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .8s ease; }
.album-ssview-stage > .mm-cell.on { opacity: 1; }
.album-ssview-stage > .mm-cell > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.album-ssview > .album-viewer-close { z-index: 2; }   /* 🐞 [23 ก.ย.] แถบบนของเว็บ (.tb-avatar) เคยทับปุ่มปิดจนกดไม่ได้ — วัดด้วย elementFromPoint */
.album-ssview-bar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.album-ssview-note { color: #e8dcc0; font-size: .85rem; text-align: center; max-width: 92vw; }