/* V31 smoothness pass: same look, far less work for the phone on every frame. Loaded last. */

/* Full-screen sparkle texture: blending it over the whole page on every scroll frame is expensive.
   A plain faint overlay looks the same on the dark background. */
body:before{mix-blend-mode:normal!important;opacity:.05!important}
.cd3d-grain{mix-blend-mode:normal!important;opacity:.045!important}

/* Top bar: it is already 95% solid, so the live blur behind it was invisible but re-drawn every frame. */
.chrome{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(6,12,41,.96)!important}
.page-bar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* Old hero pieces sit hidden behind the immersive hero; stop their animations. */
.cd-v11-hero:before,.cd-v11-hero>.hero-art:before,.cd-v11-hero>.hero-art *,.cd-v11-hero>.hero-text *{animation:none!important}

/* The slow rotating light behind the hero: keep it, but on its own GPU layer. */
.cd3d-hero-world:before{will-change:transform;contain:strict}
.cd3d-orb,.cd3d-ring{will-change:transform;contain:layout paint}

/* When the hero is scrolled out of view, pause everything inside it. */
.cd-offscreen,.cd-offscreen *,.cd-offscreen:before,.cd-offscreen *:before,.cd-offscreen *:after{animation-play-state:paused!important}

/* Sections further down are only drawn when they come near the screen. */
#house,#circle,#insta,#story-v11,#returns,#policies,#support,footer{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* Product cards: each card is its own paint area, so one card changing doesn't repaint the grid. */
.card{contain:layout paint}
.card .pic img{transform:translateZ(0)}