/* Render a colorized copy of the scene instead of blending a solid rectangle. */
body[data-page="ai-voice-agent"]{--scene-hover-image:url('../img/voice-hero-animated-base-vector-base.png')}
body[data-page="ai-chat-agent"]{--scene-hover-image:url('../img/chat-hero-refined-panels.png')}
body[data-page="aicc"]{--scene-hover-image:url('../img/contact-center-hero-scene-vector-base.png')}
body[data-page="botlab"]{--scene-hover-image:url('../img/paas-hero-animated-base-vector-base.png')}
#voiceHero .product-scene-hover{position:absolute;z-index:3;left:calc(50% + 110px);top:140px;width:620px;height:460px;pointer-events:auto;background:none;opacity:1}
#voiceHero .product-scene-hover:before{content:"";position:absolute;inset:0;background-image:var(--scene-hover-image);background-size:1920px auto;background-position:-1070px -140px;background-repeat:no-repeat;opacity:0;transition:opacity .3s ease;filter:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='blue' color-interpolation-filters='sRGB'%3E%3CfeColorMatrix type='matrix' values='.28 .55 .103 0 .067 .16 .314 .059 0 .467 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3C/svg%3E%23blue")}
#voiceHero .product-scene-hover:hover:before{opacity:1}
html body #voiceHero:has(.product-scene-hover:hover) .voice-scene-wave i{background:#1177ff}
@media(max-width:1100px){#voiceHero .product-scene-hover{left:50%;top:auto;bottom:32px;transform:translateX(-50%);width:min(100%,560px);height:340px}#voiceHero .product-scene-hover:before{background-size:auto 440px;background-position:85% bottom}}
@media(prefers-reduced-motion:reduce){#voiceHero .product-scene-hover:before{transition:none}}