@property --head-alpha{syntax:'<number>';inherits:true;initial-value:0}
.head-idle{isolation:isolate}
.colleague-head{position:absolute;z-index:2;pointer-events:none;background-size:100% 100%;background-repeat:no-repeat;opacity:var(--head-alpha,0);mask-image:var(--head-mask);mask-size:100% 100%;mask-repeat:no-repeat}
.head-glancing{animation:colleague-glance 1.6s ease-in-out both}
.head-glancing>.colleague-head{mix-blend-mode:plus-lighter}
.head-glancing>.workstation{mask-image:linear-gradient(#000 0 0),linear-gradient(rgb(0 0 0 / var(--head-alpha)) 0 0),var(--head-mask);mask-size:100% 100%;mask-repeat:no-repeat;mask-composite:exclude,intersect}
.head-glancing>.colleague-idle-eyes{opacity:0!important}
@keyframes colleague-glance{0%,100%{--head-alpha:0}4%,96%{--head-alpha:1}}
@media(prefers-reduced-motion:reduce){.head-glancing{animation:none}.colleague-head{display:none}.head-glancing>.workstation{mask-image:none}}

.head-glancing.head-idle-paused{animation-play-state:paused}
/* Move the original face as one sprite on touch devices; resume its subtle
   replacement only once the camera stops. Remove both sides of the mask. */
@media(any-pointer:coarse){
 .scene.is-travelling .head-glancing{animation-play-state:paused!important}
 .scene.is-travelling .head-glancing>.workstation{mask-image:none!important}
 .scene.is-travelling .colleague-head,.scene.is-travelling .colleague-idle-eyes{display:none!important}
 .colleague-idle-eyes{will-change:auto}
}