/* Soft right-to-left reveal; the intro remains underneath until covered. */
.hero-visual .hero-image{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}
.hero-visual .hero-image:not(.hero-image-piano){filter:grayscale(.7) brightness(.8)!important}
.hero-visual .hero-image-piano{
 inset:0 auto 0 -12%!important;width:112%!important;height:100%!important;
 object-fit:cover!important;object-position:right 50%!important;
 -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 66%,#000 100%);
 mask-image:linear-gradient(to right,transparent 0%,#000 66%,#000 100%);
 -webkit-mask-size:300% 100%;mask-size:300% 100%;
 -webkit-mask-position:0% 0;mask-position:0% 0;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
 opacity:0!important;transform:scale(1.006)!important;
 transition:mask-position 3200ms cubic-bezier(.4,0,.4,1),-webkit-mask-position 3200ms cubic-bezier(.4,0,.4,1),opacity 3200ms cubic-bezier(.4,0,.4,1)!important;
 will-change:mask-position,opacity
}
.hero-visual .hero-image-piano.is-active{-webkit-mask-position:100% 0;mask-position:100% 0;opacity:1!important;transform:scale(1.006)!important}
@media(max-width:760px){.hero-visual .hero-image-piano{inset:0!important;width:100%!important;object-position:79% 50%!important}}
@media(prefers-reduced-motion:reduce){
 .hero-visual .hero-image{transition:none!important;transform:none!important}
 .hero-visual .hero-image-piano{-webkit-mask-image:none;mask-image:none}
 .hero-visual .hero-image:not(.is-active){display:none!important}
}