:root{
  --glow-hue:222deg;                /* โทนสีแสง */
  --spring-duration:1.0s;
  --spring-easing: cubic-bezier(.2,.7,.2,1);
}

html, body {
  touch-action: pan-x pan-y; /* ปิด pinch/double-tap โดยไม่ใช้ JS */
}

/* property สำหรับหมุนลำแสง */
@property --shimmer{ syntax:"<angle>"; inherits:false; initial-value:33deg; }

@keyframes shimmer{ 0%{--shimmer:0deg} 100%{--shimmer:360deg} }
@keyframes shine{ 0%{opacity:0} 15%{opacity:1} 55%{opacity:1} 100%{opacity:0} }
@keyframes textSweep{ 0%{background-position:100% center} 100%{background-position:-100% center} }

.qrsbtn{
  isolation:isolate;                 /* ให้ชั้นชิมเมอร์ผสมสีเฉพาะปุ่ม */
  box-shadow:0 2px 6px rgba(0,0,0,.18), inset 0 -10px 20px -10px rgba(0,0,0,.06);
  transform:translateZ(0);           /* ปรับ perf. */
}
.qrsbtn:hover{ transform:scale(1.04) }
.qrsbtn:active{ transform:scale(0.98) }

/* ลำแสง */
.qrsbtn .shimmer{
  position:absolute; inset:-40px; border-radius:inherit;
  mask-image:conic-gradient(from var(--shimmer,0deg),
     transparent 0%, transparent 10%, black 36%, black 45%,
     transparent 50%, transparent 60%, black 85%, black 95%, transparent 100%);
  mask-size:cover;
  mix-blend-mode:plus-lighter;       /* ให้แสงวาบ */
  opacity:.0;                        /* ปกติซ่อน */
  pointer-events:none;
}
.qrsbtn.active .shimmer,
.qrsbtn:hover .shimmer{              /* ตอนกด/โฮเวอร์ ค่อยแสดงและวิ่งรอบ */
  animation: shimmer 1s linear infinite both, shine 1.2s ease-in 1 forwards;
  opacity:1;
}

/* ขอบเรืองแสง (ก่อน/หลัง) */
.qrsbtn .shimmer::before,
.qrsbtn .shimmer::after{
  content:""; position:absolute; inset:40px; border-radius:inherit; opacity:0;
  transition:opacity .4s ease;
}
.qrsbtn.active .shimmer::before,
.qrsbtn.active .shimmer::after,
.qrsbtn:hover .shimmer::before,
.qrsbtn:hover .shimmer::after{ opacity:1 }
.qrsbtn .shimmer::before{
  box-shadow:
    0 0 3px 2px hsl(var(--glow-hue) 20% 95%),
    0 0 7px 4px hsl(var(--glow-hue) 20% 80%),
    0 0 13px 4px hsl(var(--glow-hue) 50% 70%),
    0 0 25px 5px hsl(var(--glow-hue) 100% 70%);
  z-index:-1;
}
.qrsbtn .shimmer::after{
  box-shadow:
    inset 0 0 0 1px hsl(var(--glow-hue) 70% 95%),
    inset 0 0 2px 1px hsl(var(--glow-hue) 100% 80%),
    inset 0 0 5px 2px hsl(var(--glow-hue) 100% 70%);
  z-index:2;
}

/* วิ่งแสงผ่านตัวอักษรเล็กน้อย */
.qrsbtn .text{
  color:#000;                         /* พื้นหลังปุ่มขาว → ตัวหนังสือดำ */
  background-image:linear-gradient(120deg, transparent, hsla(var(--glow-hue),100%,80%,.66) 45%, hsla(var(--glow-hue),100%,90%,.9) 55%, transparent 57%);
  background-clip:text; -webkit-background-clip:text;
  background-repeat:no-repeat; background-size:300% 300%;
}
.qrsbtn.active .text,
.qrsbtn:hover .text{ animation:textSweep .66s ease-in 1 both }