Scroll Animations

<motion.div
  initial={{ opacity: 0, y: 50 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true }}         // animate ครั้งเดียว
  transition={{ duration: 0.5 }}
>
  Content appears on scroll
</motion.div>

<motion.div
  initial={{ opacity: 0 }}
  whileInView={{ opacity: 1 }}
  viewport={{
    once: true,      // true = animate ครั้งเดียว, false = ทุกครั้งที่เข้า viewport
    amount: 0.3,     // 0-1 = element ต้องเข้ามา 30% ถึง trigger
    margin: '-100px', // offset ก่อน trigger (ค่าลบ = trigger เร็วขึ้น)
  }}
>
  Content
</motion.div>

<motion.div
  variants={staggerContainer}
  initial="hidden"
  whileInView="show"
  viewport={{ once: true, amount: 0.1 }}
  className="grid grid-cols-3 gap-4"
>
  {cards.map((card) => (
    <motion.div key={card.id} variants={staggerItem}>
      <Card>{card.title}</Card>
    </motion.div>
  ))}
</motion.div>