/* opsPhlo animated hero: 9 commodity/cost/process cubes (all faces) + live risk-analytics screen */
.opx-hero{container-type:inline-size;width:100%;max-width:700px;margin:0 auto}
.opx-fit{position:relative;width:100%;aspect-ratio:700/540}
.opx-scene{position:absolute;top:0;left:0;width:700px;height:540px;transform-origin:top left;transform:scale(calc(100cqw / 700))}
.opx-dash{position:absolute;right:0;top:0;width:344px;height:auto;filter:drop-shadow(0 20px 34px rgba(44,50,96,.18))}
.opx-stage{position:absolute;left:0;top:206px;width:680px;height:340px;perspective:1500px}
.opx-iso{position:absolute;left:25%;top:7%;transform-style:preserve-3d;transform:rotateX(56deg) rotateZ(-45deg)}
.opx-c3{position:absolute;width:76px;height:76px;margin-left:-38px;margin-top:-38px;transform-style:preserve-3d;transform:translate3d(var(--tx),var(--ty),0)}
.opx-c3i{position:absolute;width:76px;height:76px;transform-style:preserve-3d;animation:opx-tumble 11s cubic-bezier(.66,0,.34,1) infinite}
.opx-cf{position:absolute;width:76px;height:76px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.2px;line-height:1.05;border:1px solid rgba(255,255,255,.5);box-sizing:border-box;padding:3px;font-family:'Poppins',system-ui,Arial,sans-serif}
.opx-top{transform:rotateX(90deg) translateZ(38px)}
.opx-bottom{transform:rotateX(-90deg) translateZ(38px)}
.opx-front{transform:translateZ(38px)}
.opx-back{transform:rotateY(180deg) translateZ(38px) rotate(180deg)}
.opx-right{transform:rotateY(90deg) translateZ(38px)}
.opx-left{transform:rotateY(-90deg) translateZ(38px)}
.opx-com{background:#dbe6fb;color:#1d2447}
.opx-cost{background:#fde3cf;color:#7a3608}
.opx-proc{background:#2c3260;color:#fff}
@keyframes opx-tumble{0%,20%{transform:rotateX(0)}25%,45%{transform:rotateX(-90deg)}50%,70%{transform:rotateX(-180deg)}75%,95%{transform:rotateX(-270deg)}100%{transform:rotateX(-360deg)}}
.opx-rbar{transform-box:fill-box;transform-origin:50% 100%;animation:opx-bar 2.6s ease-in-out infinite}
@keyframes opx-bar{0%,100%{transform:scaleY(var(--s))}50%{transform:scaleY(1)}}
.opx-rline{stroke-dasharray:230;animation:opx-draw 4.5s ease-in-out infinite}
.opx-rarea{animation:opx-fade 4.5s ease-in-out infinite}
@keyframes opx-draw{0%{stroke-dashoffset:230}38%,100%{stroke-dashoffset:0}}
@keyframes opx-fade{0%{opacity:0}38%,100%{opacity:.55}}
.opx-live{animation:opx-pulse 1.5s ease-in-out infinite}
.opx-rdot{transform-box:fill-box;transform-origin:center;animation:opx-ping 1.5s ease-in-out infinite}
@keyframes opx-pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes opx-ping{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}
@media (prefers-reduced-motion: reduce){.opx-c3i,.opx-rbar,.opx-rline,.opx-rarea,.opx-live,.opx-rdot{animation:none}.opx-rline{stroke-dasharray:none}.opx-rarea{opacity:.55}}