/* 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}}
@media(max-width:639px){.hero .hero-art{width:min(100%,390px);background-position:right top -57px}}
.hero h1 em{font-size:.78em;line-height:1.05}
@media(max-width:639px){.hero h1 em{font-size:.72em}}
@media(max-width:420px){.hero{min-height:850px}}
@media(max-width:360px){.hero{min-height:900px}}
@media(max-width:420px){
  .hero .hero-art{left:0;right:0;width:100%;background-color:#003e4b;background-position:right top -57px;transform-origin:center bottom;animation:mobile-product-float 6s ease-in-out infinite}
}
@keyframes mobile-product-float{0%,100%{transform:translateY(3px) scale(1.03)}50%{transform:translateY(-4px) scale(1.035)}}
@media(max-width:420px) and (prefers-reduced-motion:reduce){.hero .hero-art{animation:none;transform:none}}