/* Motion เบา ๆ ตรงช่องซื้อบัตรหน้าแรก (ปุ่ม "ซื้อบัตร" + ป้ายราคา) — ขยับเฉพาะ transform/opacity ไม่กระทบ layout
   ไม่ใช้ mask-image (เปิดผ่าน WebView ของ LINE เป็นหลัก) ผู้ใช้ที่ตั้งลดการเคลื่อนไหวไว้ในเครื่องจะไม่เห็นอนิเมชันเลย */

/* กดแล้วต้องรู้สึกว่ากดโดน (ใช้ได้ทุกกรณี ไม่ใช่อนิเมชันต่อเนื่อง) */
.hero .primary-button{position:relative;overflow:hidden}
.hero .primary-button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #5e1520}
.hero .primary-button:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.hero-price{transition:transform .18s ease-out}
.hero-price:hover{transform:translateY(-2px)}

@media(prefers-reduced-motion:no-preference){
  /* ป้ายราคาไล่โผล่ขึ้นมาทีละอัน (backwards = ใช้ค่าเริ่มต้นก่อนเริ่มเท่านั้น จบแล้วปล่อยให้ hover ยกป้ายได้ตามปกติ) */
  .hero-price{animation:heroChipIn .45s cubic-bezier(.2,.7,.2,1) backwards}
  .hero-price:nth-child(2){animation-delay:.07s}
  .hero-price:nth-child(3){animation-delay:.14s}

  /* แสงวิ่งผ่านปุ่มทุก ~5 วิ ช่วงแรก 1.2 วิหลังโหลดหน้า เล่น 6 รอบแล้วหยุดพัก ไม่กวนสายตาตอนอ่านหน้า */
  .hero .primary-button::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent);
    transform:translateX(-140%) skewX(-18deg);animation:heroCtaSheen 5s ease-in-out 1.2s 6}
}

@keyframes heroChipIn{from{opacity:0;transform:translateY(6px)}}
@keyframes heroCtaSheen{0%,65%{transform:translateX(-140%) skewX(-18deg)}100%{transform:translateX(380%) skewX(-18deg)}}