/**
 * HuyMMO 120 FPS Ultra-Performance Engine
 * Designed for 120Hz ProMotion (Apple Silicon / iPad / iPhone) and 120Hz-240Hz High Refresh Displays
 * Hardware acceleration, GPU layer promotion, zero-latency touch, and offscreen containment.
 */

/* ==========================================================================
   1. GLOBAL ENGINE & VIEWPORT 120Hz TUNING
   ========================================================================== */
html {
    /* Permit native 120Hz compositor smooth inertial scrolling */
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overscroll-behavior-y: none;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Eliminate 300ms tap delay on mobile & touch displays for instant 120fps interaction */
a,
button,
input,
select,
textarea,
label,
summary,
.btn,
.action-btn,
.nav-link,
.dash-card,
.product-card,
.boutique-product-card {
    touch-action: manipulation;
}

/* ==========================================================================
   2. HARDWARE ACCELERATION & GPU COMPOSITOR PROMOTION
   ========================================================================== */
/* Promote fixed & sticky elements to independent GPU layers */
.top-navbar,
body.ai-future-theme .top-navbar,
header.top-navbar,
.sidebar,
.sidebar-wrapper,
#liveChatRoot,
.lc-launcher,
.mobile-bottom-nav,
.page-shell-footer,
.modal-overlay,
.app-popup-overlay,
.toast,
.notification-modal,
.rental-modal {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    isolation: isolate;
}

/* Prevent layout thrashing on sticky header while scrolling */
.top-navbar,
body.ai-future-theme .top-navbar {
    contain: layout style;
    will-change: transform;
}

/* ==========================================================================
   3. OFFSCREEN CONTENT CONTAINMENT (content-visibility: auto)
   Skips layout, paint and style calculations for offscreen items.
   Massively boosts scroll FPS to locked 120fps on product catalogs and lists.
   ========================================================================== */
.product-card,
.boutique-product-card,
.boutique-category-card,
.acc-card,
.proxy-card,
.order-card,
.blog-card,
.service-item-row,
.dash-card,
.table-responsive tbody tr {
    content-visibility: auto;
    contain-intrinsic-size: 0 380px;
}

/* Smooth composite for product images and avatars */
.product-image img,
.boutique-product-thumb img,
.nav-avatar img,
.site-logo {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    image-rendering: -webkit-optimize-contrast;
}

/* ==========================================================================
   4. GLASSMORPHISM & BLUR PERFORMANCE BUDGET
   Caps expensive GPU blur convolution to keep frame times under 8.33ms (120fps)
   ========================================================================== */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .top-navbar,
    body.ai-future-theme .top-navbar,
    .nav-pill,
    .modal-content,
    .app-popup-card {
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }
}

/* ==========================================================================
   5. ZERO-JANK CSS TRANSITIONS (GPU-friendly properties only)
   ========================================================================== */
.btn-buy-now,
.btn-buy-primary,
.acc-btn-buy,
.vs-btn-buy,
.px-btn-submit,
.btn-apply-voucher,
.auth-btn,
.cta-btn,
.action-btn,
.nav-profile-btn {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

/* ==========================================================================
   6. PREFERS-REDUCED-MOTION SUPPORT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}