/* ============================================
   ✨ PCHERO Motion — จังหวะตอบรับทั้งระบบ
   กติกา: เร็ว ≤250ms · เคลื่อนเฉพาะ transform/opacity (ลื่น 60fps บนมือถือเก่า)
          · เล่นเมื่อผู้ใช้กดเท่านั้น (จอ re-render ทุก snapshot — ห้ามผูกกับการวาดจอ)
          · เคารพ prefers-reduced-motion (บล็อกท้ายไฟล์)
   ============================================ */

/* ---------- เฟส 1: ปุ่มมีน้ำหนัก (ทั้งระบบ) ----------
   กดยุบรับนิ้ว ปล่อยเด้งคืน — .no-press ไว้ยกเว้นปุ่มที่ไม่ต้องการ */
button:not(.no-press) {
    transition: transform .12s cubic-bezier(.2, .9, .3, 1.4);
}
button:not(.no-press):active {
    transform: scale(.95);
}
button:focus-visible {
    outline: 2px solid #818cf8;
    outline-offset: 2px;
}

/* ---------- เฟส 1: หน้าต่าง (Swal) เปิดนุ่ม ----------
   override จังหวะเปิดของ SweetAlert2 ให้ scale+fade สั้น ๆ แทนซูมแรง ๆ */
@keyframes pchero-pop-in {
    from { transform: scale(.93) translateY(8px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}
.swal2-show {
    animation: pchero-pop-in .2s cubic-bezier(.2, .9, .3, 1.25) !important;
}

/* ---------- เฟส 1: Toast เลื่อนเข้าจากขอบจอ ----------
   (toast ของระบบอยู่มุมล่างขวา + มี timerProgressBar อยู่แล้ว) */
@keyframes pchero-toast-in {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.swal2-toast.swal2-show {
    animation: pchero-toast-in .22s cubic-bezier(.2, .9, .25, 1) !important;
}

/* ---------- เฟส 1: โครงรอโหลด (Skeleton) ---------- */
.sk-shimmer {
    background: linear-gradient(100deg,
        rgba(148, 163, 184, .10) 40%,
        rgba(148, 163, 184, .22) 50%,
        rgba(148, 163, 184, .10) 60%);
    background-size: 200% 100%;
    animation: pchero-shimmer 1.3s infinite linear;
    border-radius: 10px;
}
@keyframes pchero-shimmer {
    to { background-position: -200% 0; }
}

/* ---------- เฟส 2: ของบินเข้าตะกร้า + ตัวเลขเด้ง ---------- */
.pchero-fly-dot {
    position: fixed;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #818cf8;
    box-shadow: 0 0 10px rgba(129, 140, 248, .8);
    pointer-events: none;
    z-index: 9999;
}
#cart-badge.pchero-bump {
    animation: pchero-bump .4s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes pchero-bump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.6); }
    100% { transform: scale(1); }
}

/* ---------- เฟส 2: รายการใหม่วาบสีทอง (ออเดอร์/คำขอจองที่เพิ่งเข้า) ---------- */
.pchero-row-fresh {
    animation: pchero-row-flash 1.8s ease-out both;
}
@keyframes pchero-row-flash {
    0%   { background-color: rgba(230, 180, 80, .30); }
    100% { background-color: transparent; }
}

/* ---------- เฟส 3: ตัวเลขเด่นบนแดชบอร์ด (คู่กับ MotionFX.countUp) ---------- */
.pchero-tabular {
    font-variant-numeric: tabular-nums;
}

/* ---------- ทั่วไป: วงแหวนหายใจเรียกสายตา (ใช้เท่าที่จำเป็น) ---------- */
.pchero-pulse {
    position: relative;
}
.pchero-pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid currentColor;
    opacity: .6;
    animation: pchero-pulse 2.2s ease-out infinite;
    pointer-events: none;
}
@keyframes pchero-pulse {
    0%        { opacity: .55; transform: scale(1); }
    70%, 100% { opacity: 0;  transform: scale(1.15); }
}

/* ---------- เครื่องที่ตั้งค่า "ลดการเคลื่อนไหว" → จอนิ่งทั้งหมด ---------- */
@media (prefers-reduced-motion: reduce) {
    button:not(.no-press),
    .sk-shimmer,
    .pchero-fly-dot,
    #cart-badge.pchero-bump,
    .pchero-row-fresh,
    .pchero-pulse::after,
    .swal2-show,
    .swal2-toast.swal2-show {
        animation: none !important;
        transition: none !important;
    }
}