.page-storefront .site-backdrop {
  contain: layout paint style;
  isolation: isolate;
}

.page-storefront .site-grid-bg,
.page-storefront .site-backdrop__mesh {
  contain: layout paint;
  pointer-events: none;
}

.page-storefront .site-backdrop__photo,
.page-storefront .site-backdrop__video {
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0) scale(1.04);
}

.page-storefront .glass-orb {
  backface-visibility: hidden;
  will-change: transform;
}

.page-storefront .site-header {
  transform: translate3d(0, 0, 0);
}

.page-storefront .resizable-nav__body {
  contain: layout style;
}

/* No scroll reveals — full page visible on first paint (no fade/slide when scrolling) */
.page-storefront .reveal,
.page-storefront .reveal.is-visible,
.page-storefront [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  transition-delay: 0s !important;
}

/* Tab in background — pause decorative CSS company-wide */
html.is-tab-hidden .page-storefront *,
html.is-tab-hidden .page-storefront *::before,
html.is-tab-hidden .page-storefront *::after {
  animation-play-state: paused !important;
}

/* Off-screen blocks — pause CSS animations only (not JS-driven product/review marquees) */
.page-storefront .is-viewport-paused:not([data-hero-dock-marquee]):not([data-home-marquee-collections]):not([data-home-marquee-products]):not([data-home-reviews-marquee]),
.page-storefront .is-viewport-paused:not([data-hero-dock-marquee]):not([data-home-marquee-collections]):not([data-home-marquee-products]):not([data-home-reviews-marquee]) * {
  animation-play-state: paused !important;
}

.page-storefront [data-feedback-3d].is-viewport-paused {
  animation-play-state: paused !important;
}

/* After first paint — pause backdrop decor only (not page content) */
html:not(.is-page-ready) .page-storefront .glass-orb,
html:not(.is-page-ready) .page-storefront .grid-drip::before,
html:not(.is-page-ready) .page-storefront .home-effects,
html:not(.is-page-ready) .page-storefront .home-effects * {
  animation-play-state: paused;
}

.page-storefront .home-effects {
  contain: layout paint;
}

/* Hero/review marquees use JS transforms — no contain:paint (breaks motion + intersection) */

/* Scrolled past hero — pause backdrop zoom (static frame) */
html.is-backdrop-idle .page-storefront .site-backdrop__photo,
html.is-backdrop-idle .page-storefront .site-backdrop__video {
  animation-play-state: paused !important;
}

/* Instant load — static home nav (no entrance motion or scroll tilt) */
.page-storefront .site-header--home .resizable-nav__body,
.page-storefront .site-header--home.is-nav-entered .resizable-nav__body,
.page-storefront .site-header--home.is-scrolled .resizable-nav__body {
  opacity: 1 !important;
  transform: none !important;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important;
}

.page-storefront .site-header--home.is-nav-entered .resizable-nav__logo,
.page-storefront .site-header--home.is-nav-entered .floating-dock--home,
.page-storefront .site-header--home.is-nav-entered .resizable-nav__actions--home {
  opacity: 1 !important;
  animation: none !important;
}

.page-storefront .site-header--home.is-nav-entered .resizable-nav__viewport {
  animation: none !important;
}

.page-storefront .site-header--home [data-home-nav],
.page-storefront .site-header--home .resizable-nav__viewport {
  transform: none !important;
  perspective: none !important;
}

/* Weak devices — lighter marquee paint, no hover scale churn */
html.is-low-perf .page-home .home-marquee__track,
html.is-low-perf .page-home .hero-dock__track,
html.is-low-perf .page-home .home-reviews-marquee__track {
  contain: layout style;
  backface-visibility: hidden;
}

html.is-low-perf .page-home .catalog-card--marquee,
html.is-low-perf .page-home .product-card--marquee {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

html.is-low-perf .page-home .catalog-card--marquee:hover,
html.is-low-perf .page-home .product-card--marquee:hover,
html.is-medium-perf .page-home .catalog-card--marquee:hover,
html.is-medium-perf .page-home .product-card--marquee:hover {
  transform: none;
}

html.is-low-perf .page-home .home-marquee__nav,
html.is-medium-perf .page-home .home-marquee__nav {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Faster aura rim while hovering — override global animation pause */
.page-storefront [data-home-nav].is-nav-hover .resizable-nav__aura::before {
  animation-play-state: running !important;
}

.page-storefront .hero-scroll__dot {
  animation: none !important;
}

/* Weak devices only — swap expensive backdrop blur for plain surfaces on
   scrolling marquee cards and toasts (capable devices keep the full glass). */
html.is-low-perf .page-storefront .catalog-card--marquee,
html.is-low-perf .page-storefront .product-card--marquee,
html.is-low-perf .page-storefront .review-marquee-card,
html.is-low-perf .page-storefront .purchase-toast {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Footer renders lazily — end of document, no sticky/overlay content inside */
.page-storefront .site-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}

@media (prefers-reduced-motion: reduce) {
  .page-storefront .site-backdrop__photo,
  .page-storefront .site-backdrop__video,
  .page-storefront .glass-orb,
  .page-storefront .grid-drip::before {
    animation: none !important;
  }

  /* Continuous decorative loops stop; interactions and content stay intact */
  .page-storefront .home-marquee__track,
  .page-storefront .hero-dock__track,
  .page-storefront .home-reviews-marquee__track {
    animation-play-state: paused !important;
  }
}

/* ————————————————————————————————————————————————————————————————
   backdrop-filter budget

   Measured on the live home page: 110 elements carried a backdrop-filter,
   totalling 1.89 megapixels of blurred area — five times the viewport. That
   cost is paid in *device* pixels, so it scales with the square of the
   display's pixel ratio: what is tolerable on a 1x panel is roughly four
   times heavier on a 2x one. This is why the site felt smooth on one machine
   and framey on another.

   The worst offenders were not the big glass panels — they were small
   elements repeated inside the marquees:

       .product-card            16 x blur(20px)  = 1.06 MPx  (56% of the total)
       .hero-dock-chip          32 x blur(14px)
       .product-card__metric-pill 16 x blur(8px)

   Those tracks scroll continuously, so their backdrops are invalidated on
   every frame and every blur is recomputed — 64 re-blurs per frame, forever.

   Blur is dropped on repeated and moving elements, where it is imperceptible
   anyway, and kept on the large static chrome (nav, footer, hero search,
   modals) where the frosted effect actually reads and is computed once.
   Backgrounds are made correspondingly more opaque so the surfaces look the
   same without the blur behind them.
   ———————————————————————————————————————————————————————————————— */

/* `!important` is deliberate here. This file is an override layer that loads
   *before* the component sheets it corrects (it sits at index 5, while
   home-hero-dock.css is at 10), and several of those rules are also more
   specific — `.page-home .hero-dock-chip` beats a bare `.hero-dock-chip`.
   Without it these declarations silently lose, which is exactly what happened
   on the first attempt. */
.product-card,
.product-card__metric-pill,
.product-card__hover-panel,
.hero-dock-chip,
.hero-dock-popup__stock {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Without a blurred backdrop these need a denser base, or the mesh background
   shows through sharply and the text loses contrast. `--bg` keeps them
   theme-aware. */
.product-card {
  background-color: color-mix(in srgb, var(--bg) 82%, transparent) !important;
}

.hero-dock-chip {
  background-color: color-mix(in srgb, var(--bg) 76%, transparent) !important;
}

.hero-dock-popup__stock {
  background-color: color-mix(in srgb, var(--bg) 85%, transparent) !important;
}

.product-card__metric-pill {
  background-color: color-mix(in srgb, var(--bg) 88%, transparent) !important;
}

/* The marquee tracks animate transform forever. Promoting them once keeps the
   compositor from re-rasterising their contents on every frame. */
.home-marquee__track,
.hero-dock__track,
.home-reviews-marquee__track {
  will-change: transform;
  transform: translateZ(0);
}