.hero-source-products { clip-path: none; mask-image: url("assets/hero-product-mask.svg"); mask-size: cover; mask-position: center; mask-repeat: no-repeat; }
.hero-motion-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.reference-landing .hero::after { z-index: 2; background: linear-gradient(180deg, rgba(13,14,24,.28), rgba(13,14,24,.12) 32%, transparent 55%, transparent 86%, rgba(13,9,8,.4)); }
.reference-landing .hero-content { z-index: 3; }
.hero-motion-toggle { position: absolute; z-index: 4; left: calc(4.5% + 140px); bottom: 5%; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: #f4dbab; background: #181511b8; border: 1px solid #edd39975; border-radius: 50%; cursor: pointer; backdrop-filter: blur(8px); }
.hero-motion-toggle svg { width: 13px; height: 13px; }
.hero-motion-toggle:disabled { display: none; }
@media (max-width: 680px) {
  .hero-source-products { mask-position: 64% center; }
  .hero-motion-toggle { left: auto; right: 20px; bottom: 156px; }
  .reference-landing .hero::after { background: linear-gradient(180deg, rgba(15,15,23,.6), rgba(15,15,23,.3) 43%, transparent 65%, rgba(13,9,8,.8)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-motion-canvas, .hero-motion-toggle { display: none; }
}