/* =====================================================================
   ZULI PERF — smooth-scroll & animation performance layer.
   Loaded LAST on every page. Pure overrides: same look, far less GPU/CPU.
   ===================================================================== */

/* 0) Every card & button was forced onto its own GPU layer (translateZ(0)):
      1,500+ layers on the homepage = memory pressure & scroll jank on phones.
      Hover/press transforms below still work exactly as before. */
.fade-in, .card, .btn{ transform:none; backface-visibility:visible; }

/* 1) Glass blur on OPAQUE surfaces is invisible but extremely expensive
      (it ran on 500+ cards & 400+ badges). Remove it there only. */
.card, .under-99-card, .related-card, .badge, .trust-box, .feature,
.stock-badge, .premium-out-box, .pdp-flag{
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}

/* 2) Render only the product cards that are on/near the screen.
      Off-screen cards are skipped by the browser until you scroll to them. */
#productGrid > .card, .under99-grid > .card, .under99-grid > .under-99-card{
  content-visibility:auto;
  contain-intrinsic-size:auto 150px auto 620px;
}

/* 3) The always-on image shimmer repainted every product image forever.
      Now it only shimmers while an image is actually loading. */
.product-img, .product-image-box, .suggestion-image, .summary-image,
.msearch-cards img, .related-products img, .under99-grid img,
.under-99-scroll img, .trending img, img.product-img{ animation:none !important; }
img.z-sk:not(.z-sk-done){ animation:zShimmer 1.15s linear infinite !important; }

/* 4) Looping highlights moved from layout props (left/top) to the GPU (transform). */
@keyframes shine{ 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(200%,0,0)} }
.under-99-banner::after{ will-change:transform; }
@keyframes btnSweep{
  0%,55%{ transform:translate3d(0,0,0) skewX(-20deg); }
  100%  { transform:translate3d(491%,0,0) skewX(-20deg); }
}
.hero-btn::after{ left:-130% !important; will-change:transform; }
@keyframes scrollDrop{ 0%{transform:translate3d(0,0,0)} 60%,100%{transform:translate3d(0,200%,0)} }
.hero-scroll-line::after{ will-change:transform; }

/* 4b) Pause decorative loops during scroll (class set by zuli-perf.js). */
html.z-scrolling .nav-logo .logo-main-text,
html.z-scrolling .offer-bar,
html.z-scrolling .hero-content h1 span,
html.z-scrolling .hero-btn,
html.z-scrolling .hero-btn::after,
html.z-scrolling .under-99-banner::after,
html.z-scrolling .hero-scroll-line::after{ animation-play-state:paused !important; }

/* 5) Faster, softer reveal (no "late" feeling). */
.z-reveal{ transform:translate3d(0,14px,0); transition:opacity .5s var(--z-ease,cubic-bezier(.22,.61,.36,1)), transform .5s var(--z-ease,cubic-bezier(.22,.61,.36,1)); }
.z-reveal.z-in{ transform:none; }
.card.z-reveal{
  transition:opacity .45s cubic-bezier(.22,.61,.36,1), transform .3s cubic-bezier(.22,.61,.36,1),
             box-shadow .3s ease, border-color .3s ease !important;
}

/* 6) Instant taps, no grey flash, no double-tap zoom delay. */
a, button, .btn, .hero-btn, .filter-btn, .card, input, select, label, [onclick]{
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}

/* 7) Touch screens: no "stuck" hover lift after a tap; soft press feedback instead. */
@media (hover:none){
  .card:hover, .under-99-card:hover, .trust-box:hover, .related-card:hover{ transform:none !important; }
  .card:hover img, .under-99-card:hover img{ transform:none !important; }
  .card:active{ transform:scale(.985) !important; }
  .btn:active, .hero-btn:active, .filter-btn:active, .mini-add:active{ transform:scale(.96) !important; }
}

/* 8) Smooth native momentum on horizontal rails. */
.trending-container, .under-99-scroll, #subcategoryContainer, #categoryContainer, .msearch-cards{
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
}

/* 9) Respect reduced-motion. */
@media (prefers-reduced-motion:reduce){
  img.z-sk:not(.z-sk-done){ animation:none !important; }
}