/* The original background stays isolated on old-background.html. */
.hero-services-scene>.hero-stage{background-image:url('assets/hero-new-poster.jpg')}
@media(max-width:760px){
 .hero-services-scene>.hero-stage{background-image:linear-gradient(#03060b 30%,transparent 50%,transparent 83%,#03060b),url('assets/hero-new-poster.jpg');background-size:100% 100%,auto 60%;background-position:center,79% 92%;background-repeat:no-repeat}
}

/* One rendering surface for both the still frame and scroll animation. */
.js .hero-services-scene>.hero-stage{background-image:none}
.js .hero-services-scene .hero-frames{visibility:visible}
.hero-services-scene .hero-frames{transform:translate3d(calc(var(--depth-x)*.35),calc(var(--depth-y)*.35),0) scale(calc(1 + var(--hero-progress,0)*.025))}
@media(max-width:760px){.hero-services-scene .hero-frames{transform:scale(calc(1 + var(--hero-progress,0)*.018))}}
.motion-off .hero-services-scene .hero-frames{transform:none}

/* Lift the complete introduction as the services reveal fades it away. */
.hero-services-scene .hero-accessible{transform:translateY(calc(-50% - (1 - var(--intro-opacity,1))*90px))}
.motion-off .hero-services-scene .hero-accessible{transform:translateY(-50%)}
@media(max-width:760px){
 .hero-services-scene .hero-accessible{transform:translateY(calc((1 - var(--intro-opacity,1))*-50px))}
 .motion-off .hero-services-scene .hero-accessible{transform:none}
}
@media(prefers-reduced-motion:reduce){.hero-services-scene .hero-accessible{transform:translateY(-50%)}}
@media(prefers-reduced-motion:reduce) and (max-width:760px){.hero-services-scene .hero-accessible{transform:none}}

/* Mobile: a wider scene, native-resolution frames and a calmer scroll runway. */
@media(max-width:760px){
 .hero-services-scene .hero-scroll{height:220svh}
 .hero-services-scene .hero-frames{transform:none}
 .hero-services-scene>.hero-stage{background-size:143% auto;background-position:right 65%;background-repeat:no-repeat}
 .hero-services-scene .hero-accessible{top:14%}
 .hero-services-scene .hero-vignette{background:linear-gradient(180deg,#03060b33,transparent 43%);pointer-events:none}
}