/* ubu-fade.css — เอฟเฟกต์ fade + สไลด์จากข้าง ของแต่ละ section หน้าแรก (เบา, เคารพ prefers-reduced-motion)
   ซ่อนเนื้อหาก็ต่อเมื่อ JS ทำงานแล้ว (คลาส .u-fx บน <html>) — ไม่มี JS = แสดงปกติ
   ถ้าจะยกเลิก: เอา <link> และ <script> ของไฟล์นี้ออกจาก index_main_v3.php */
@media (prefers-reduced-motion: no-preference) {
  /* --u-dir: 1 = สไลด์มาจากขวา, -1 = มาจากซ้าย (JS สลับซ้าย/ขวาทีละ section) | --u-dist: ระยะเลื่อน */
  .u-fx .u-home { overflow-x: clip; }            /* กันแถบเลื่อนแนวนอนระหว่างที่ element ยังอยู่นอกจอ */
  .u-fx .u-fade {
    --u-dist: 140px;
    opacity: 0; translate: calc(var(--u-dir, 1) * var(--u-dist)) 0;
    transition: opacity 0.85s var(--u-ease, ease-out), translate 0.85s cubic-bezier(0.22, 0.8, 0.3, 1);
    will-change: opacity, translate;
  }
  .u-fx .u-fade.is-in { opacity: 1; translate: 0 0; will-change: auto; }
  @media (max-width: 699px) { .u-fx .u-fade { --u-dist: 56px; } }

  /* การ์ด/รายการในแต่ละ section ไล่เข้าทีละใบ (สไลด์จากด้านเดียวกับ section) */
  .u-fx .u-fade-item {
    opacity: 0; translate: calc(var(--u-dir, 1) * var(--u-dist, 140px) * 0.45) 0;
    transition: opacity 0.7s var(--u-ease, ease-out), translate 0.8s cubic-bezier(0.22, 0.8, 0.3, 1);
    transition-delay: calc(var(--u-i, 0) * 90ms + 120ms);
  }
  .u-fx .u-fade.is-in .u-fade-item { opacity: 1; translate: 0 0; }

  /* ใช้เอฟเฟกต์ชุดนี้แทน scroll-driven reveal เดิม ไม่ให้ซ้อนกัน */
  .u-fx .u-fade .u-reveal { animation: none; }
}