/* Additive 3D animation for the ZestRecon marketing homepage hero - a
   scroll-driven tilt/float on the Security Operations Center preview card,
   plus small 3D icons (shield/network/lock/cloud) that tumble near it and
   stay pinned to the viewport corner as you scroll. Purely additive: no
   existing rules, colors, or layout touched. Scales down (not off) on
   phones. */
.hero3d-stage{perspective:1100px}
.hero3d-widget{
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .12s linear;
  animation:hero3dFloat 1.9s ease-in-out infinite;
}
@keyframes hero3dFloat{
  0%,100%{transform:translateY(var(--h3d-y,0px)) rotateX(var(--h3d-rx,0deg)) rotateY(var(--h3d-ry,0deg)) scale(var(--h3d-s,1))}
  50%{transform:translateY(calc(var(--h3d-y,0px) - 20px)) rotateX(var(--h3d-rx,0deg)) rotateY(var(--h3d-ry,0deg)) scale(var(--h3d-s,1))}
}

/* Decorative 3D icons - fixed to the viewport so they keep tumbling near the
   widget corner no matter how far down the page you scroll. */
.hero3d-orbs{position:fixed;top:12vh;right:1vw;width:min(32vw,400px);height:min(40vh,360px);z-index:5;pointer-events:none;perspective:700px}
.hero3d-orb{position:absolute;stroke:#0b1220;stroke-width:1;paint-order:stroke fill;filter:drop-shadow(0 10px 16px rgba(0,0,0,.55));transform-style:preserve-3d;object-fit:contain}
.hero3d-orb-node{fill:#0b1220;stroke:#fff;stroke-width:.6}
.hero3d-orb-shackle{fill:none;stroke:#94a3b8;stroke-width:2.4;stroke-linecap:round}
.hero3d-orb-shine{fill:#fff;opacity:.55}
.hero3d-orb-a{width:68px;height:68px;top:2%;right:36%}
.hero3d-orb-b{width:50px;height:50px;top:34%;right:0%}
.hero3d-orb-c{width:38px;height:38px;top:6%;right:6%}
.hero3d-orb-d{width:56px;height:56px;top:20%;right:24%}

@media(max-width:600px){.hero3d-orbs{transform:scale(.68);transform-origin:top right}}
@media(prefers-reduced-motion:reduce){
  .hero3d-widget{animation:none!important;transition:none!important;transform:none!important}
  .hero3d-orb{animation:none!important}
}