.scroll-scene{position:relative;isolation:isolate;background:var(--brand);min-height:var(--scroll-scene-height,0px)}
.hero-pin{position:sticky;top:0;z-index:0}
.hero-pin .page{overflow:visible;background:transparent;transform:scale(var(--hero-scale,1));transform-origin:center center;will-change:transform}
/* Keep the backdrop edge-to-edge while the hero content scales down. */
.hero-pin .page::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--brand);transform:scale(calc(1 / var(--hero-scale,1)));pointer-events:none}

.scroll-scene>.product-section{position:relative;z-index:1}
/* Paint above the pinned hero, beneath the blue corner mask. */
.scroll-scene>.product-section.smooth-corners::after{inset:auto 0 0;height:48px;z-index:-2;background:var(--cream);mask:none}
@media(prefers-reduced-motion:reduce){
  .scroll-scene{min-height:0}
  .hero-pin{position:relative}
  .hero-pin .page{transform:none;will-change:auto}
}