/*
  motion.css
  ------------------------------------------------------------
  ไฟล์นี้รวม "ท่าเคลื่อนไหว" ทั้งหมดของเว็บ (animation)
  - Marquee = ตัวหนังสือ/แถบวิ่งไม่หยุด (ใช้แค่ 2 จุด: trust bar + testimonials)
  - Hover-flip = การ์ดเปลี่ยนสีตอนเอาเมาส์ชี้ (พื้นเหลือง+ตัวหนังสือดำ)
  - Scroll-reveal = เนื้อหาค่อยๆ ปรากฏตอน scroll ลงมาเจอ (ทำงานคู่กับ js/scroll-reveal.js)

  ทุก animation ต้องเคารพ prefers-reduced-motion (คนที่ตั้งค่าเครื่องไม่ให้มี
  animation จะไม่เห็นการเคลื่อนไหว แต่ยังเห็นเนื้อหาปกติ ไม่เสีย UX)
  ------------------------------------------------------------
*/

/* ========================================================
   1) MARQUEE - แถบตัวหนังสือวิ่งไม่หยุด
   ======================================================== */

.marquee {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
}

.marquee__track {
  display: inline-flex;
  width: max-content;
}

.marquee__track span {
  display: inline-block;
  padding: 0 var(--space-md);
}

/* ความเร็วสูง: ใช้กับ Trust/Stats bar (หลัง Hero) */
.marquee--fast .marquee__track {
  animation: marquee-scroll 18s linear infinite;
}

/* ความเร็วช้า: ใช้กับ Testimonials */
.marquee--slow .marquee__track {
  animation: marquee-scroll 45s linear infinite;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); } /* ต้อง duplicate เนื้อหา track 2 รอบใน HTML เพื่อให้วนลื่น */
}

/* คนตั้งค่า reduce motion ในเครื่อง -> หยุด marquee ให้เป็น static แถบนิ่งแทน */
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none !important;
  }
  .marquee {
    overflow-x: auto; /* เผื่อเนื้อหายาวกว่าจอ ให้เลื่อนดูเองได้ */
  }
}

/* ========================================================
   2) HARD COLOR-FLIP HOVER - การ์ดพลิกสีตอน hover
   (ใช้กับ curriculum card, bonus card, instructor card)
   ======================================================== */

.flip-card {
  background: var(--color-white);
  color: var(--color-black);
  border: var(--border-width) solid var(--color-black);
  border-radius: var(--radius-lg);
  transition: background-color var(--transition-base), color var(--transition-base);
}

.flip-card:hover,
.flip-card:focus-within {
  background: var(--color-yellow);
  color: var(--color-black);
}

/* ปุ่ม CTA: hard color-flip + scale เด้งเบาๆ ตอนกด */
.btn-cta {
  transition: background-color var(--transition-base),
              color var(--transition-base),
              transform var(--transition-fast);
}

.btn-cta:hover {
  transform: scale(1.05);
}

.btn-cta:active {
  transform: scale(0.95);
}

/* ========================================================
   3) SCROLL-REVEAL - เนื้อหาค่อยๆ ปรากฏตอน scroll ลงมาเจอ
   ทำงานคู่กับ js/scroll-reveal.js ที่เติม class .is-visible
   ======================================================== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.reveal--scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* คนตั้งค่า reduce motion -> โชว์เนื้อหาเลยทันที ไม่ต้องรอ animation */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn-cta:hover,
  .btn-cta:active {
    transform: none;
  }
}

/* ========================================================
   4) ACCORDION - FAQ เปิด/ปิด (height 0 -> auto + fade)
   ======================================================== */

.accordion__content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--transition-base), opacity var(--transition-base);
}

.accordion__content > div {
  overflow: hidden;
}

.accordion[open] .accordion__content,
.accordion.is-open .accordion__content {
  grid-template-rows: 1fr;
  opacity: 1;
}

.accordion__icon {
  transition: transform var(--transition-base);
}

.accordion__toggle[aria-expanded="true"] .accordion__icon {
  transform: rotate(45deg);
}