/*
 * Motion — ลูกเล่นรูป/การ์ดทั้งเว็บ (โหลดจาก views/homepage/footer.php คู่กับ js/motion.js)
 * 1) ค่อย ๆ โผล่ตอนเลื่อนถึง  2) รูปจางเข้าตอนโหลดเสร็จ  3) hover ซูมรูปในกรอบ + การ์ดมีเงา
 * ขยับด้วย opacity/transform เท่านั้น (ไม่ทำให้หน้าเลื่อน/CLS) · class mo-* ถูกใส่โดย JS เฉพาะของที่อยู่ใต้จอตอนเปิดหน้า
 */

/* 1) ค่อย ๆ โผล่ — JS ถอด class ออกเมื่อเล่นจบ เพื่อคืน transform ให้ hover เดิมของธีม */
.mo-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mo-reveal.mo-in {
  opacity: 1;
  transform: none;
}

/* 2) รูปจางเข้าเมื่อโหลดเสร็จ (ไม่โผล่พรวด) */
.mo-img {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.mo-img.mo-loaded {
  opacity: 1;
}

/* 3) hover: รูปซูมในกรอบมน + การ์ดมีเงา (ธีมเดิมขยายการ์ด 1.02 อยู่แล้ว) */
.rbt-card .rbt-card-img a {
  overflow: hidden;
  border-radius: var(--radius);
}
.rbt-card .rbt-card-img a img {
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rbt-card.rbt-hover {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.ss-img-frame {
  overflow: hidden;
  border-radius: 10px;
}
.ss-section .ss-img,
.ss-profile .about-wrapper .thumbnail img {
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ss-profile .about-wrapper .thumbnail {
  overflow: hidden;
  border-radius: 10px;
}

@media (hover: hover) {
  .rbt-card:hover .rbt-card-img a img {
    transform: scale(1.06);
  }
  .rbt-card.rbt-hover:hover {
    box-shadow: 0 14px 34px rgba(25, 35, 53, 0.12);
  }
  .ss-img-frame:hover > .ss-img,
  .ss-profile .about-wrapper .thumbnail:hover img {
    transform: scale(1.04);
  }
}

/* ผู้ใช้ตั้ง "ลดการเคลื่อนไหว" ในเครื่อง → ปิดทั้งหมด */
@media (prefers-reduced-motion: reduce) {
  .mo-reveal,
  .mo-img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .rbt-card .rbt-card-img a img,
  .ss-section .ss-img,
  .ss-profile .about-wrapper .thumbnail img {
    transition: none !important;
    transform: none !important;
  }
}