.hero-cgi{position:absolute;left:33%;top:7%;width:62%;height:82%;border-radius:190px 0 0 0;overflow:clip;background:#b4a284;filter:brightness(.82)}
.cgi-shot{position:absolute;inset:0;background:url('assets/bathroom-brass-v4.webp') center/cover;opacity:0;animation-duration:30s;animation-iteration-count:infinite;animation-timing-function:linear;will-change:transform,opacity}
.cgi-wide{animation-name:cgiWide}.cgi-detail{animation-name:cgiDetail;background-position:left center}.cgi-bath{animation-name:cgiBath;background-position:right center}.hero-cgi.paused .cgi-shot{animation-play-state:paused}
@keyframes cgiWide{0%{opacity:1;transform:scale(1)}27%{opacity:1;transform:scale(1.075) translate(-1%,0)}35%{opacity:0;transform:scale(1.09)}90%{opacity:0;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes cgiDetail{0%,25%{opacity:0;transform:scale(1.7) translate(17%,5%)}35%{opacity:1}58%{opacity:1;transform:scale(1.82) translate(15%,3%)}67%,100%{opacity:0;transform:scale(1.86) translate(14%,2%)}}
@keyframes cgiBath{0%,58%{opacity:0;transform:scale(1.5) translate(-15%,0)}68%{opacity:1}90%{opacity:1;transform:scale(1.62) translate(-17%,1%)}100%{opacity:0;transform:scale(1.66) translate(-18%,1%)}}
@media(max-width:700px){.hero-cgi{left:12%;top:20%;width:88%;height:66%;border-radius:160px 0 0 0}}

/* Tighten space above the hero film. */
.hero-cgi{top:2%;height:87%}
@media(max-width:700px){.hero-cgi{top:13%;height:73%}}

@media(max-width:700px){.cgi-shot{background-image:url('assets/hero-mobile.webp')} }