/* Decorative layers stay separate from content and the existing frame player. */
.hero-stage{--depth-x:0px;--depth-y:0px}
.hero-services-scene .hero-frames{transform:translate3d(calc(var(--depth-x)*.35),calc(var(--depth-y)*.35),0) scale(calc(1.012 + var(--hero-progress,0)*.025));transform-origin:65% 50%}
.hero-depth{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:var(--intro-opacity,1)}
.depth-grid{position:absolute;inset:-5%;background-image:linear-gradient(#91d9ff09 1px,transparent 1px),linear-gradient(90deg,#91d9ff09 1px,transparent 1px);background-size:76px 76px;mask-image:radial-gradient(ellipse at 75% 45%,#000,transparent 65%);transform:translate3d(calc(var(--depth-x)*-.4),calc(var(--hero-progress,0)*-20px + var(--depth-y)*-.4),0)}
.depth-drawing{position:absolute;width:100%;height:100%;color:#a8dcfa;opacity:.13;transform:translate3d(calc(var(--depth-x)*-.8),calc(var(--hero-progress,0)*-35px + var(--depth-y)*-.8),0) scale(1.03)}
.depth-light{position:absolute;inset:-5%;background:radial-gradient(ellipse at 72% 43%,#5ce3ff0d,transparent 33%),radial-gradient(ellipse at 87% 61%,#b675ff14,transparent 32%);transform:translate3d(var(--depth-x),var(--depth-y),0)}
.depth-glass{position:absolute;width:30vw;height:65vh;right:-21vw;top:15%;border:1px solid #b4dfff24;border-radius:45%;background:linear-gradient(130deg,transparent 35%,#abbbff08 49%,#b5eaff19 50%,transparent 52%);box-shadow:inset 1px 0 18px #93dfff09;transform:translate3d(calc(var(--depth-x)*1.5),calc(var(--hero-progress,0)*-55px + var(--depth-y)*1.5),0) rotate(-24deg)}
.hero-services-scene .hero-vignette{background:linear-gradient(90deg,#03060bdb, #03060b70 29%,transparent 58%),linear-gradient(0deg,#090c16,transparent 20%)}
@media(max-width:760px){
 .hero-services-scene .hero-frames{transform:scale(calc(1 + var(--hero-progress,0)*.018));transform-origin:54% 65%}
 .depth-drawing{width:170%;left:-60%;opacity:.085}
 .depth-grid{background-size:56px 56px;opacity:.65}
 .depth-glass{display:none}
 .depth-light{background:radial-gradient(ellipse at 65% 65%,#65dfff12,transparent 45%)}
 .hero-services-scene .hero-vignette{background:linear-gradient(0deg,#090c16 0%,transparent 16%,transparent 51%,#03060be6 72%)}
}
.motion-off .hero-depth{opacity:.5}
.motion-off .hero-depth>*,.motion-off .hero-services-scene .hero-frames{transform:none}
@media(prefers-reduced-motion:reduce){.hero-depth>*,.hero-services-scene .hero-frames{transform:none!important}}