/* ============================================================
   ลูกเล่นการเคลื่อนไหว

   กติกาที่ยึดไว้เพื่อไม่ให้เว็บหนืด
     1. ขยับด้วย transform กับ opacity เท่านั้น (การ์ดจอวาดให้ ไม่กินซีพียู)
     2. ไม่ทำอนิเมชันวนไม่รู้จบหลายชิ้น มีแค่ 3 จุดเล็ก ๆ
     3. ของที่อยู่นอกจอยังไม่เล่น ค่อยเล่นตอนเลื่อนมาถึง แล้วเลิกจับตาทันที
     4. ถ้าเครื่องตั้งค่า "ลดการเคลื่อนไหว" ปิดทั้งหมด
     5. สถานะ "ยังไม่โผล่" ใส่โดย JavaScript ถ้าสคริปต์ไม่ทำงาน ทุกอย่างแสดงปกติ
   ============================================================ */

/* ---------- ท่าเคลื่อนไหวพื้นฐาน ---------- */
@keyframes krUp   { from{opacity:0;transform:translate3d(0,22px,0)} to{opacity:1;transform:none} }
@keyframes krLeft { from{opacity:0;transform:translate3d(-26px,0,0)} to{opacity:1;transform:none} }
@keyframes krPop  { from{opacity:0;transform:scale(.72)} to{opacity:1;transform:scale(1)} }
@keyframes krFade { from{opacity:0} to{opacity:1} }
@keyframes krZoom { from{transform:scale(1.09)} to{transform:scale(1)} }
@keyframes krFloat{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(0,-7px,0)} }
@keyframes krSweep{ 0%{transform:translate3d(-60%,0,0)} 55%,100%{transform:translate3d(160%,0,0)} }
@keyframes krRing { from{stroke-dashoffset:120} to{stroke-dashoffset:0} }

/* ---------- ของที่รอเลื่อนมาถึงค่อยโผล่ ---------- */
.kranim .rv{opacity:0;transform:translate3d(0,22px,0)}
.kranim .rv.in{
  animation:krUp .72s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--d,0ms)}
.kranim .rv.done{will-change:auto}

@media (prefers-reduced-motion:reduce){
  .kranim .rv,.kranim .rv.in{opacity:1;transform:none;animation:none}
}

/* ============================================================
   ฮีโร่
   ============================================================ */
@media (prefers-reduced-motion:no-preference){

  /* ภาพพื้นหลังค่อย ๆ ซูมเข้า ครั้งเดียวจบ */
  .hero-bg{animation:krZoom 10s cubic-bezier(.16,.6,.3,1) both}

  /* แสงกวาดผ่านทีละรอบ ช้า ๆ บาง ๆ */
  .hero::after{
    content:'';position:absolute;z-index:1;top:-20%;bottom:-20%;left:0;width:38%;
    pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(178,255,90,.12) 45%,rgba(255,255,255,.06) 55%,transparent);
    transform:translate3d(-60%,0,0);
    animation:krSweep 9s cubic-bezier(.4,0,.2,1) 1.6s infinite}

  .hero h1      {animation:krLeft .8s cubic-bezier(.22,1,.36,1) .05s both}
  .hero .sub    {animation:krLeft .8s cubic-bezier(.22,1,.36,1) .18s both}
  .hero .l2     {animation:krLeft .8s cubic-bezier(.22,1,.36,1) .30s both}
  .hero .free   {animation:krPop  .62s cubic-bezier(.34,1.56,.64,1) .44s both}
  .hero .num    {animation:krPop  .62s cubic-bezier(.34,1.56,.64,1) .54s both}
  .hero .hr     {animation:krFade .6s ease .68s both}
  .checks li:nth-child(1){animation:krUp .7s cubic-bezier(.22,1,.36,1) .74s both}
  .checks li:nth-child(2){animation:krUp .7s cubic-bezier(.22,1,.36,1) .86s both}

  .warranty{animation:krPop .8s cubic-bezier(.34,1.4,.64,1) .5s both}
  .warranty .shield{animation:krFloat 6s ease-in-out 1.4s infinite}

  /* ปุ่มลอยข้างจอ โผล่ทีหลังสุด */
  .fab a:nth-child(1){animation:krPop .5s cubic-bezier(.34,1.56,.64,1) 1.0s both}
  .fab a:nth-child(2){animation:krPop .5s cubic-bezier(.34,1.56,.64,1) 1.12s both}
}

/* บนมือถือ ตัดอนิเมชันที่วนไม่รู้จบออก ประหยัดแบตและไม่ทำให้เครื่องร้อน */
@media (max-width:860px){
  .hero::after{display:none}
  .warranty .shield{animation:none}
}

/* ============================================================
   ลูกเล่นเล็ก ๆ ตอนเลื่อนถึง
   ============================================================ */

/* วงแหวนเขียวรอบไอคอน ค่อย ๆ ลากเส้น */
@media (prefers-reduced-motion:no-preference){
  .krarc{stroke-dashoffset:120}
  .in .krarc{animation:krRing 1.1s cubic-bezier(.22,1,.36,1) .25s both}
}

/* แสงวิ่งผ่านการ์ดยี่ห้อตอนเอาเมาส์ชี้ */
.bcard .ph{position:relative}
.bcard .ph::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);
  transform:translate3d(-100%,0,0)}
@media (prefers-reduced-motion:no-preference){
  .bcard:hover .ph::after{opacity:1;animation:krSweep .9s ease-out}
}

/* หัวเว็บมีเงาเมื่อเลื่อนลง */
.site-head{transition:box-shadow .25s,background-color .25s}
.site-head.stuck{box-shadow:0 10px 30px rgba(0,0,0,.7)}

/* ปุ่มกดแล้วยุบนิดหนึ่ง */
.btn:active,.chip:active,.btn-more:active,.fab a:active{transform:translateY(1px) scale(.98)}
.pcard:active,.scard:active{transform:translateY(-1px) scale(.995)}

/* ตัวเลขราคาและหัวข้อในกล่องรายละเอียด ค่อย ๆ โผล่ */
@media (prefers-reduced-motion:no-preference){
  .pmodal.on .pmbox{animation:krUp .34s cubic-bezier(.22,1,.36,1) both}
  .pmodal.on{animation:krFade .22s ease both}
}