/* 3D animated hero visuals (inner pages). The SVG illustration stays as the fallback and keeps the layout size. */
.phi[data-scene]{isolation:isolate}
.phi[data-scene] .h3d-canvas{position:absolute;left:-12%;top:-10%;width:124%!important;height:120%!important;z-index:2;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 58%,transparent 100%);
  opacity:0;animation:h3dIn 1.1s .1s ease forwards}
.phi[data-scene].webgl img{opacity:0;box-shadow:none}
.phi[data-scene].webgl{transform:none!important}
.phi[data-scene].webgl::after{inset:-4% 0;background:radial-gradient(closest-side,rgba(91,124,255,.28),rgba(34,211,238,.08) 60%,transparent)}
@keyframes h3dIn{to{opacity:1}}
@media (max-width:760px){.phi[data-scene] .h3d-canvas{left:-6%;width:112%!important}}
@media (prefers-reduced-motion:reduce){.phi[data-scene] .h3d-canvas{animation:none;opacity:1}}

/* the still illustration is only a fallback: hidden while the 3D scene loads, shown if WebGL is unavailable (.nogl) or the scene has not started after 10s */
.phi[data-scene]:not(.webgl) img{opacity:0}
.phi[data-scene]:not(.webgl):not(.run) img{animation:fbShow .4s 10s forwards}
.phi[data-scene].nogl img{opacity:1;animation:none}
@keyframes fbShow{to{opacity:1}}