/* ==========================================================
   smoke-fx.css — ผืน canvas ของเอฟเฟกต์ "สลับโซนด้วยควัน"
   คู่กับ js/smoke-fx.js (ต้องโหลดหลัง js/main.js)

   ไฟล์นี้มีหน้าที่เดียว: วางผืน canvas ให้ถูกที่และถูกชั้น
   สีทั้งหมด ขนาดทั้งหมด จังหวะทั้งหมด อยู่ใน js/smoke-fx.js
   ★ จึงไม่มีค่าสีในไฟล์นี้แม้แต่ค่าเดียว — ไม่มีโอกาสหลุด hex ดิบตั้งแต่โครงสร้าง
     (สีที่ควันใช้ถูกอ่านจาก css/tokens.css ด้วย getComputedStyle ใน js)

   ⚠ ไฟล์นี้ไม่ได้แทนที่ css/zone-fx.css — ของเก่ายังอยู่เพราะ
     lab/transition-lab.html ลิงก์ไว้ ห้ามลบ ห้ามแก้
   ========================================================== */

.smokefx {
  /* fixed + inset:0 ไม่ใช่ 100vw/100vh — 100vw รวมความกว้างของ scrollbar
     เข้าไปด้วย แล้วผืนจะล้นขอบขวาจนเกิด horizontal scroll ที่ 375px
     (บทเรียนเดียวกับ .zonefx ของเดิม) */
  position: fixed;
  inset: 0;
  display: block;

  /* top bar sticky อยู่ที่ z-index 60 — ควันต้องบัง "ทุกอย่าง" รวมถึงปุ่มที่กด
     ไม่งั้นปุ่มจะลอยอยู่เหนือควันแล้วเห็นว่าโซนสลับใต้ปุ่มพอดี = เห็นภาพกระโดด
     900 คือค่าเดียวกับที่ zone-fx เดิมใช้และผ่านการตรวจมาแล้ว */
  z-index: 900;

  /* ★ ห้ามบังการกด — กดรัวสลับไปมาต้องได้ตลอดแม้ควันเต็มจอ
     (js/smoke-fx.js รับคลิกที่ document ไม่ได้รับที่ผืนนี้) */
  pointer-events: none;

  /* ผืนนี้ไม่มีผลต่อ layout ของใครและไม่ต้องให้ใครมาคิด paint ร่วม */
  contain: layout paint;
}

/* js ซ่อนผืนด้วย attribute hidden ตอนไม่มีอะไรเล่น
   ★ ต้องเขียนกฎนี้ไว้ เพราะ display:block ข้างบนชนะ display:none ของ
     user-agent stylesheet ที่มาจาก [hidden] (specificity เท่ากันแต่เราชนะ
     เพราะเป็น author stylesheet) ⇒ ไม่มีบรรทัดนี้ ผืนจะไม่เคยหายไปเลย */
.smokefx[hidden] { display: none; }

/* ---------- prefers-reduced-motion ----------
   kill switch กลางใน base.css ใช้ transition/animation-duration:.01ms!important
   ซึ่ง "ไม่" ครอบอะไรเลยในไฟล์นี้ เพราะการเคลื่อนไหวทั้งหมดถูกวาดด้วย
   requestAnimationFrame ใน js ไม่ได้อ่านเวลาจาก CSS
   ⇒ ถ้าพึ่ง kill switch อย่างเดียว ควันจะยังลอยอยู่เหมือนไม่มีอะไรเกิดขึ้น

   js/smoke-fx.js เช็ค matchMedia ตอนกดทุกครั้งแล้วปล่อยให้ main.js สลับทันที
   โดยไม่สร้างผืนเลย — บรรทัดล่างนี้คือชั้นที่สอง เผื่อกรณีที่ js เช็คไม่ทัน
   (ผู้ใช้เปิด reduced-motion กลางคันขณะควันกำลังลอย) หรือ js ถูกบล็อก
   ⇒ ไม่ว่าสถานะไหน จะไม่มี canvas ค้างบนจอเด็ดขาด */
@media (prefers-reduced-motion: reduce) {
  .smokefx { display: none !important; }
}