/* ============================================================
   โลโก้ค่ายเกม / รูปเกม — โผล่ทีละช่องเมื่อรูปนั้นโหลดเสร็จ

   ปัญหาเดิม (somsree 23 ต.ค. 2026): โลโก้ค่ายเป็น PNG 600px ไฟล์ละ ~240 KB
   เบราว์เซอร์วาดทีละบรรทัดตามไบต์ที่ทยอยมาถึง ลูกค้าจึงเห็นโลโก้ครึ่งใบ
   เต็มหน้าจอ แล้วค่อย ๆ เติมลงมา ดูเหมือนเว็บพัง

   ทำไมเลือก "ทีละช่อง" ไม่ใช่ "รอครบแล้วโชว์พร้อมกัน":
   หน้าหนึ่งมีโลโก้ได้ถึง 87 ตัว ถ้ารอให้ครบ ลูกค้าจะเห็นจอว่างเปล่านานมาก
   และถ้ามีรูปใดเสียหรือช้าผิดปกติ ทั้งหน้าจะไม่ขึ้นเลย

   🔴 กฎทั้งหมดอยู่ใต้ html.js-img-reveal ซึ่ง js เป็นคนเติมให้
      ถ้า js โหลดไม่สำเร็จ จะไม่มีอะไรถูกซ่อน รูปแสดงตามปกติเหมือนไม่เคยมีไฟล์นี้
      (ถ้าเขียนกฎไว้ลอย ๆ แล้ว js พัง = รูปหายทั้งเว็บ)
   ============================================================ */

html.js-img-reveal #provider img,
html.js-img-reveal #trending img,
html.js-img-reveal #gamelist-item img {
    opacity: 0;
}

html.js-img-reveal #provider img.img-ready,
html.js-img-reveal #trending img.img-ready,
html.js-img-reveal #gamelist-item img.img-ready {
    opacity: 1;
    /* หน่วงสั้น ๆ พอให้รู้สึกว่าค่อย ๆ ปรากฏ ไม่ใช่กระพริบ */
    transition: opacity .25s ease-in;
}

/* ผู้ใช้ที่ตั้งค่าเครื่องว่าไม่ชอบภาพเคลื่อนไหว — ให้โผล่ทันทีไม่ต้องเฟด */
@media (prefers-reduced-motion: reduce) {
    html.js-img-reveal #provider img.img-ready,
    html.js-img-reveal #trending img.img-ready,
    html.js-img-reveal #gamelist-item img.img-ready {
        transition: none;
    }
}