/* Keep the purifier clear while giving the artwork a restrained 3D float. */
.hero{background:radial-gradient(ellipse at 82% 55%,#9de5ee 0%,#c8f0f7 32%,#e3f9ff 76%)}
.hero .hero-art{z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.86) 15%,#000 27%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.86) 15%,#000 27%);transform-origin:75% 52%;animation:product-depth 6s ease-in-out infinite;will-change:transform}
.hero .hero-wash{z-index:0;background:linear-gradient(90deg,rgba(227,249,255,.98) 0%,rgba(227,249,255,.94) 23%,rgba(227,249,255,.55) 38%,rgba(227,249,255,.08) 55%,transparent 63%)}
.hero::before,.hero::after{z-index:0;opacity:.25}
@keyframes product-depth{0%,100%{transform:perspective(1200px) rotateY(calc(var(--pointer-x,0deg) - 1.2deg)) rotateX(var(--pointer-y,0deg)) translateY(4px) scale(1.005)}50%{transform:perspective(1200px) rotateY(calc(var(--pointer-x,0deg) + 1.2deg)) rotateX(var(--pointer-y,0deg)) translateY(-5px) scale(1.018)}}
@media(max-width:639px){.hero .hero-art{-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.9) 13%,#000 24%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.9) 13%,#000 24%)}.hero .hero-wash{background:linear-gradient(180deg,#e8faff 0%,#e8faff 36%,rgba(232,250,255,.75) 48%,transparent 62%)}}
@media(prefers-reduced-motion:reduce){.hero .hero-art{animation:none;transform:none}}