/* Homepage-only Color4Bg layer. The CSS gradients remain as a dependable fallback. */
body[data-page="home"] #page-home .product-reveal {
  position: relative;
  isolation: isolate;
  /* Clip the visual without turning this wrapper into a sticky scroll container. */
  overflow: clip;
  background:
    radial-gradient(ellipse 68% 62% at 17% 11%, rgba(255, 169, 20, .58) 0%, rgba(255, 225, 184, .38) 38%, rgba(255, 255, 255, 0) 76%),
    radial-gradient(ellipse 58% 66% at 82% 68%, rgba(255, 226, 187, .7) 0%, rgba(255, 249, 229, .52) 43%, rgba(255, 255, 255, 0) 78%),
    #fff9e5;
}

body[data-page="home"] #page-home .product-reveal__fluid {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

body[data-page="home"] #page-home .product-reveal__fluid::after {
  position: absolute;
  inset: 0;
  content: "";
  background: rgba(255, 255, 255, .16);
  pointer-events: none;
}

body[data-page="home"] #page-home .product-reveal__fluid canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  opacity: .76;
}

body[data-page="home"] #page-home .product-reveal__sticky {
  /* Preserve the reveal stage while the section consumes its scroll distance. */
  position: sticky;
  top: 0;
  z-index: 1;
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] #page-home .product-reveal__fluid canvas {
    display: none !important;
  }
}