/* ============================================================
   MANFARE performance fixes
   Makes page scroll smoother and keeps login/register modal responsive.
   ============================================================ */

html {
  scroll-behavior: auto;
}

html.body-locked {
  overflow: hidden;
  padding-right: var(--scrollbar-width, 0px);
  overscroll-behavior: none;
}

html.body-locked,
html.body-locked body {
  scroll-behavior: auto !important;
}

body.body-locked {
  overflow: hidden;
}

/* Full-screen blur filters are expensive on many laptops/mobile browsers. */
.auth-overlay,
.track-overlay,
.cart-overlay,
.wishlist-overlay,
.qv-overlay,
.sidebar-overlay,
.mobile-search-overlay,
.filter-mobile-overlay,
.lightbox-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.auth-overlay.active,
.track-overlay.active,
.cart-overlay.active,
.wishlist-overlay.active,
.qv-overlay.active,
.sidebar-overlay.active,
.mobile-search-overlay.active,
.filter-mobile-overlay.active {
  pointer-events: auto;
}

.auth-modal,
.track-modal {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(-50%, -52%, 0) scale(0.98) !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
  will-change: opacity, transform;
}

.auth-modal.active,
.track-modal.active {
  transform: translate3d(-50%, -50%, 0) scale(1) !important;
}

.auth-modal:not(.active),
.track-modal:not(.active) {
  pointer-events: none !important;
}

/* Stop the brand section from repainting every scroll frame. */
.brand-parallax-bg {
  background-attachment: scroll !important;
  transform: none !important;
  will-change: auto !important;
}

/* Keep reveal animation lightweight after it has finished. */
.reveal.revealed,
.reveal-stagger.revealed,
[data-lazy-section].lazy-visible {
  will-change: auto !important;
}

/* Faster loader fade, then JS removes it. */
.page-loader {
  transition: opacity 0.18s ease, visibility 0.18s ease !important;
}

/* Avoid expensive hover work on touch devices. */
@media (hover: none) {
  .product-card:hover,
  .category-card:hover,
  .btn-primary:hover,
  .btn-secondary:hover {
    transform: none !important;
    box-shadow: inherit !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}