/**
 * Frontend scroll & paint performance — no layout/copy changes.
 *
 * @package store-theme
 */

/* ── Off-screen sections: skip layout/paint until near viewport ───────────── */
.home-page > section:not(#hero-section),
.store-section,
.content-auto,
#product-page-root > section,
.ty-page section,
.page-template-page-about section,
.page-template-page-contact section,
.page-template-page-policy section,
.page-template-page-categories section,
.woocommerce-page .store-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
  contain: layout style;
}

#hero-section,
#site-header,
#cart-drawer,
#checkout-modal,
.home-sticky-react-mobile,
.home-sticky-react-desktop,
.product-sticky-bar-anchor {
  content-visibility: visible;
  contain: none;
}

/* ── While scrolling only: drop backdrop-filter (restores after scroll ends) */
html.is-scrolling .glass-card,
html.is-scrolling .glass-chip,
html.is-scrolling #site-header,
html.is-scrolling .home-sticky-react-desktop > div,
html.is-scrolling #sticky-product-bar,
html.is-scrolling #sticky-product-bar-desktop,
html.is-scrolling #live-order-popup,
html.is-scrolling .ty-page .backdrop-blur-xl,
html.is-scrolling .ty-page .backdrop-blur-sm,
html.is-scrolling #promotions .glass-card,
html.is-scrolling #cod-confirmation [class*="backdrop-blur"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.is-scrolling .cta-pulse {
  animation-play-state: paused;
}

html.is-scrolling .float-anim,
html.is-scrolling .float-slow,
html.is-scrolling .float-delay {
  animation-play-state: paused;
}

/* ── Reveal: no permanent GPU layers ──────────────────────────────────────── */
.lp-reveal--visible {
  will-change: auto !important;
}

/* ── Images: async decode hint via CSS containment ────────────────────────── */
.product-card-premium img,
.co-item-img img,
#cart-drawer-items img {
  content-visibility: auto;
}

/* ── Sticky bars: promote layer once, not on every child ──────────────────── */
#sticky-product-bar,
#sticky-product-bar-desktop {
  transform: translateZ(0);
}

/* ── Reduce shimmer work during scroll ────────────────────────────────────── */
html.is-scrolling .shimmer-over::after {
  animation: none !important;
}

/* ── Touch: shorter transitions = less main-thread work ───────────────────── */
@media (pointer: coarse) {
  .glass-card-hover,
  .product-card-premium,
  #site-header {
    transition-duration: 0.2s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .float-anim,
  .float-slow,
  .float-delay,
  .cta-pulse,
  .spin-slow,
  .ty-success-icon {
    animation: none !important;
  }
}