/* Approved Studios artwork. All styling is isolated from the page animations. */
.eco-row--studios{grid-template-columns:minmax(0,1fr);gap:16px;padding-bottom:16px}
.eco-row--studios .studios-visual{width:100%;max-width:1320px;min-width:0;margin:0 auto}
#orian-studios-motion{position:relative;width:100%;aspect-ratio:5/2;overflow:hidden;container-type:inline-size;background:#fff;color:#173b2a;font-family:'DM Sans',sans-serif;scroll-margin-top:120px}
#orian-studios-motion *,#orian-studios-motion *::before,#orian-studios-motion *::after{box-sizing:border-box}
#orian-studios-motion .scene,#orian-studios-motion .scene-surface{position:absolute;inset:0;width:100%;height:100%}
#orian-studios-motion .scene-surface{background:#fff}
#orian-studios-motion .copy-region{position:absolute;top:50%;left:5%;width:29%;height:clamp(150px,18cqw,238px);transform:translateY(-50%)}
#orian-studios-motion .phase{position:absolute;inset:0;opacity:0;visibility:hidden}
#orian-studios-motion.is-studios-static .phase-prototype{opacity:1;visibility:visible}
#orian-studios-motion.is-studios-ready .phase{opacity:0;visibility:visible}
#orian-studios-motion .phase-heading{font-family:Gambarino,serif;font-weight:400;font-size:clamp(36px,5.8cqw,76px);line-height:1.03;letter-spacing:-.035em;margin:0 0 1.8cqw;padding:0;color:#173b2a}
#orian-studios-motion .phase-description{font-size:clamp(16px,1.8cqw,25px);line-height:1.5;margin:0;max-width:27cqw;color:#173b2a}
#orian-studios-motion .model-region{position:absolute;right:-1.5%;top:50%;width:70%;height:auto;aspect-ratio:840/550;transform:translateY(-50%)}
#orian-studios-motion #orian-studios-canvas,#orian-studios-motion .model-fallback{position:absolute;inset:0;width:100%;height:100%;display:block}
#orian-studios-motion #orian-studios-canvas{opacity:0}
#orian-studios-motion.has-webgl #orian-studios-canvas{opacity:1}
#orian-studios-motion.has-webgl .model-fallback{opacity:0}
#orian-studios-motion .fallback-node,#orian-studios-motion .fallback-workflow,#orian-studios-motion .fallback-bridge,#orian-studios-motion .fallback-product-plan{opacity:0}
#orian-studios-motion .fallback-product-build,#orian-studios-motion .fallback-build-component{opacity:1}
#orian-studios-motion.is-studios-ready .fallback-product-build,#orian-studios-motion.is-studios-ready .fallback-build-component{opacity:0}
@media(max-width:650px){
 .eco-row--studios{gap:12px}
 #orian-studios-motion{height:clamp(300px,78vw,420px);aspect-ratio:auto}
 #orian-studios-motion .copy-region{left:18px;right:18px;top:10px;width:auto;height:100px;transform:none}
 #orian-studios-motion .phase-heading{font-size:clamp(28px,8.2cqw,36px);margin-bottom:10px}
 #orian-studios-motion .phase-description{max-width:100%;font-size:15px;line-height:1.45}
 #orian-studios-motion .model-region{width:min(107%,540px);height:auto;aspect-ratio:840/550;right:50%;transform:translateX(50%);top:80px;bottom:auto}
}

.eco-row--studios+.ecosystem-cta{padding-top:12px}

/* Never display the static app while the animated scene is loading. */
#orian-studios-motion .model-fallback{visibility:hidden}
#orian-studios-motion .studios-static-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;visibility:hidden}
#orian-studios-motion.is-studios-static .studios-static-image{opacity:1;visibility:visible}
