/* POS Motion — GPU-friendly micro-interactions (vanilla) */
:root {
  --pm-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --pm-ease-spring: cubic-bezier(0.34, 1.2, 0.48, 1);
  --pm-dur-fast: 0.16s;
  --pm-dur-med: 0.28s;
  --pm-dur-slow: 0.38s;
}

/* Top loading bar */
.pm-top-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--pm-dur-fast) var(--pm-ease-out);
}
.pm-top-loader.is-active {
  opacity: 1;
}
.pm-top-loader__bar {
  height: 100%;
  width: 36%;
  background: linear-gradient(90deg, transparent, var(--accent, #f5c518), #fff6c0, var(--accent, #f5c518), transparent);
  border-radius: 0 2px 2px 0;
  transform: translateX(-120%);
  animation: pmTopLoaderSlide 0.9s var(--pm-ease-out) infinite;
  will-change: transform;
}
@keyframes pmTopLoaderSlide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

/* Pressable controls */
.pm-press,
button:not(:disabled),
.pay-method,
.quick-cash-btn,
.pm-nk,
.ep-tab,
.nav-item,
.product-card,
.rt-card,
.pm-pay-split-toggle {
  -webkit-tap-highlight-color: transparent;
}
.pm-press:active,
button:not(:disabled):active,
.pay-method:active,
.quick-cash-btn:active,
.pm-nk:active,
.ep-tab:active,
.product-card:active,
.pm-pay-submit:active {
  transform: scale(0.97);
}
@media (hover: hover) {
  .pm-press:hover,
  button:not(:disabled):hover,
  .pay-method:hover,
  .quick-cash-btn:hover {
    transform: translateY(-1px);
  }
}

/* Modal overlay — smooth open */
.modal-overlay.open,
.modal-overlay.show {
  animation: none !important;
}

.modal-overlay,
.rt-modal-backdrop {
  transition: opacity var(--pm-dur-med) var(--pm-ease-out),
    backdrop-filter var(--pm-dur-med) var(--pm-ease-out);
}
.modal-overlay:not(.open):not(.show),
.rt-modal-backdrop:not(.is-open) {
  pointer-events: none;
}
.modal-overlay.pm-modal-animating,
.rt-modal-backdrop.pm-modal-animating {
  display: flex !important;
}
.modal-overlay > *,
.rt-modal-backdrop > .rt-modal,
.pm-pay-modal,
.settings-modal,
.numpad-modal,
.success-modal {
  transition: transform var(--pm-dur-med) var(--pm-ease-spring),
    opacity var(--pm-dur-med) var(--pm-ease-out);
  will-change: transform, opacity;
}
.modal-overlay:not(.open):not(.show) > *,
.rt-modal-backdrop:not(.is-open) > .rt-modal,
.modal-overlay.pm-modal-leave > *,
.rt-modal-backdrop.pm-modal-leave > .rt-modal {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
}
.modal-overlay.open > *,
.modal-overlay.show > *,
.rt-modal-backdrop.is-open > .rt-modal,
.modal-overlay.pm-modal-enter > *,
.rt-modal-backdrop.pm-modal-enter > .rt-modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.pm-pay-overlay.open {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Cart item enter */
.cart-item.pm-cart-enter {
  opacity: 0;
  transform: translateX(12px) scale(0.98);
}
.cart-item.pm-cart-enter.pm-cart-enter--on {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition: opacity var(--pm-dur-med) var(--pm-ease-out),
    transform var(--pm-dur-med) var(--pm-ease-spring);
}

.cart-panel-main.pm-cart-pulse {
  animation: pmCartPulse 0.42s var(--pm-ease-out);
}
@keyframes pmCartPulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 197, 24, 0); }
  40% { box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(245, 197, 24, 0); }
}

/* Totals flash */
.grand-total.pm-total-flash span:last-child {
  animation: pmTotalFlash 0.45s var(--pm-ease-out);
}
@keyframes pmTotalFlash {
  0% { transform: scale(1); }
  35% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* Success modal */
.success-modal.pm-success-pop {
  animation: pmSuccessPop 0.5s var(--pm-ease-spring);
}
@keyframes pmSuccessPop {
  0% { opacity: 0; transform: scale(0.92); }
  60% { opacity: 1; transform: scale(1.02); }
  100% { transform: scale(1); }
}
.success-icon i.pm-success-icon-pop {
  animation: pmSuccessIcon 0.55s var(--pm-ease-spring) 0.08s both;
}
@keyframes pmSuccessIcon {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Toast */
.toast.pm-toast-in {
  animation: pmToastIn 0.32s var(--pm-ease-spring);
}
@keyframes pmToastIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Skeleton */
.pm-skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-elevated, #2a3045) 0%,
    rgba(255, 255, 255, 0.06) 50%,
    var(--bg-elevated, #2a3045) 100%
  );
  background-size: 200% 100%;
  animation: pmSkeleton 1.1s ease-in-out infinite;
  border-radius: 10px;
}
@keyframes pmSkeleton {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Sidebar nav */
.nav-item {
  transition: background var(--pm-dur-fast) var(--pm-ease-out),
    color var(--pm-dur-fast) var(--pm-ease-out),
    transform var(--pm-dur-fast) var(--pm-ease-out);
}

/* Process button loading */
.btn-process.loading {
  pointer-events: none;
  opacity: 0.88;
}
.btn-process.loading .btn-process-icon {
  animation: pmSpin 0.7s linear infinite;
}
@keyframes pmSpin {
  to { transform: rotate(360deg); }
}

html.pm-modal-open body {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .pm-top-loader,
  .pm-top-loader__bar,
  .cart-item.pm-cart-enter,
  .cart-panel-main.pm-cart-pulse,
  .grand-total.pm-total-flash span:last-child,
  .success-modal.pm-success-pop,
  .toast.pm-toast-in,
  .pm-skeleton,
  .product-card.pm-fade-in {
    animation: none !important;
    transition: none !important;
  }
  .modal-overlay > *,
  .rt-modal-backdrop > .rt-modal,
  .pm-pay-modal {
    transform: none !important;
  }
}