/* The platform, side walls, glass and halo are shared with the security pipeline. */
.module-depth{pointer-events:none}.module-node,.volume-pill{transform-box:fill-box;transform-origin:center}
.module-depth .slab-face{fill:url(#motion-glass)}
.module-node .motion-label{font-size:9px}.module-node .module-depth ellipse{opacity:.8}
.mobility-p2c{offset-path:path('M88 29C130 29 145 83 188 83');animation:mobility-first var(--diagram-cycle,7.2s) ease-in infinite}
.mobility-v2c{offset-path:path('M88 80C128 71 148 92 188 83');animation:mobility-second var(--diagram-cycle,7.2s) ease-in infinite}
.mobility-c2c{offset-path:path('M88 131C130 131 145 83 188 83');animation:mobility-third var(--diagram-cycle,7.2s) ease-in infinite}
.mobility-cloud{offset-path:path('M256 83C299 83 307 54 348 54')}.mobility-target{offset-path:path('M256 83C299 83 307 122 348 122')}
.mobility-cloud,.mobility-target{animation:mobility-egress var(--diagram-cycle,7.2s) ease-in infinite}
.mobility-core{animation:mobility-process var(--diagram-cycle,7.2s) var(--diagram-spring) infinite}
.mobility-core .motion-impact,.mobility-core .motion-status{animation:mobility-process-light var(--diagram-cycle,7.2s) ease-out infinite}
.mobility-core .motion-bar{animation:hub-process-fill var(--diagram-cycle,7.2s) ease-out infinite}
.mobility-destination{animation:mobility-target-impact var(--diagram-cycle,7.2s) var(--diagram-spring) infinite}
.mobility-destination .motion-impact,.mobility-destination .motion-status{animation:mobility-target-light var(--diagram-cycle,7.2s) ease-out infinite}
.mobility-destination .motion-bar{animation:plane-target-fill var(--diagram-cycle,7.2s) ease-out infinite}
@keyframes mobility-first{0%,8%{offset-distance:0%;opacity:0}10%,23.8%{opacity:1}24%,100%{offset-distance:100%;opacity:0}}
@keyframes mobility-second{0%,25%{offset-distance:0%;opacity:0}27%,38.8%{opacity:1}39%,100%{offset-distance:100%;opacity:0}}
@keyframes mobility-third{0%,40%{offset-distance:0%;opacity:0}42%,53.8%{opacity:1}54%,100%{offset-distance:100%;opacity:0}}
@keyframes mobility-egress{0%,58%{offset-distance:0%;opacity:0}60%,77.8%{opacity:1}78%,100%{offset-distance:100%;opacity:0}}
@keyframes mobility-process{0%,23.8%,34%,38.8%,49%,53.8%,66%,100%{transform:scale(1)}27%,42%,57%{transform:translate3d(1.5px,-1px,0) scale(1.03)}}
@keyframes mobility-process-light{0%,23.8%,38.8%,53.8%,100%{opacity:.15}24%,39%,54%{opacity:1}34%,49%,75%{opacity:.3}}
@keyframes mobility-target-impact{0%,77.8%,92%,100%{transform:translate3d(0,0,0)}82%{transform:translate3d(2.5px,-2px,0)}}
@keyframes mobility-target-light{0%,77.8%,100%{opacity:.15}78%,84%{opacity:1}94%{opacity:.4}}

/* Three adaptation inputs arrive at 28%, 49% and 70%. */
.driver-storage{offset-path:path('M110 28C169 28 188 63 254 63');animation:driver-storage var(--diagram-cycle,7.2s) cubic-bezier(.4,0,.2,1) infinite}
.driver-network{offset-path:path('M110 79C167 64 192 97 254 82');animation:driver-network var(--diagram-cycle,7.2s) cubic-bezier(.4,0,.2,1) infinite}
.driver-boot{offset-path:path('M110 130C169 130 188 101 254 101');animation:driver-boot var(--diagram-cycle,7.2s) cubic-bezier(.4,0,.2,1) infinite}
.volume-body{animation:volume-impact var(--diagram-cycle,7.2s) var(--diagram-spring) infinite}
.volume-body>.motion-impact,.volume-body>.motion-status{animation:volume-light var(--diagram-cycle,7.2s) ease-out infinite}
.volume-body>.motion-bar{animation:upgrade-fill var(--diagram-cycle,7.2s) ease-out infinite}
.volume-initramfs{animation:volume-initramfs var(--diagram-cycle,7.2s) var(--diagram-spring) infinite}
.volume-boot{animation:volume-boot var(--diagram-cycle,7.2s) var(--diagram-spring) infinite}
@keyframes driver-storage{0%,8%{offset-distance:0%;opacity:0}10%,27.8%{opacity:1}28%,100%{offset-distance:100%;opacity:0}}
@keyframes driver-network{0%,29%{offset-distance:0%;opacity:0}31%,48.8%{opacity:1}49%,100%{offset-distance:100%;opacity:0}}
@keyframes driver-boot{0%,50%{offset-distance:0%;opacity:0}52%,69.8%{opacity:1}70%,100%{offset-distance:100%;opacity:0}}
@keyframes volume-impact{0%,27.8%,39%,48.8%,60%,69.8%,84%,100%{transform:translate3d(0,0,0)}31%,52%,73%{transform:translate3d(2px,-1.5px,0)}}
@keyframes volume-light{0%,27.8%,48.8%,69.8%,100%{opacity:.15}28%,49%,70%{opacity:1}41%,62%,90%{opacity:.3}}
@keyframes volume-initramfs{0%,27.8%,41%,48.8%,62%,100%{transform:scale(1);opacity:.7}31%,52%{transform:scale(1.03);opacity:1}}
@keyframes volume-boot{0%,48.8%,62%,69.8%,85%,100%{transform:scale(1);opacity:.7}52%,73%{transform:scale(1.03);opacity:1}}

.comparison-discover{offset-path:path('M128 92C157 70 171 114 200 92');animation:driver-storage var(--diagram-cycle,7.2s) ease-in infinite}
.comparison-sync{offset-path:path('M290 92C319 70 333 114 362 92');animation:driver-network var(--diagram-cycle,7.2s) ease-in infinite}
.comparison-verify{offset-path:path('M452 92C481 70 495 114 524 92');animation:driver-boot var(--diagram-cycle,7.2s) ease-in infinite}
.comparison-node-1{animation:comparison-first-impact var(--diagram-cycle,7.2s) var(--diagram-spring) infinite}
.comparison-node-2{animation:comparison-second-impact var(--diagram-cycle,7.2s) var(--diagram-spring) infinite}
.comparison-node-3{animation:comparison-third-impact var(--diagram-cycle,7.2s) var(--diagram-spring) infinite}
.comparison-node-1 .motion-impact,.comparison-node-2 .motion-impact,.comparison-node-3 .motion-impact{animation:volume-light var(--diagram-cycle,7.2s) ease-out infinite}
.comparison-node-1 .motion-bar{animation:validate-fill var(--diagram-cycle,7.2s) ease-out infinite}.comparison-node-2 .motion-bar{animation:plane-replica-fill var(--diagram-cycle,7.2s) ease-out infinite}.comparison-node-3 .motion-bar{animation:upgrade-fill var(--diagram-cycle,7.2s) ease-out infinite}
.comparison-blueprint.manual>svg{--diagram-cycle:11s}
@keyframes comparison-first-impact{0%,27.8%,42%,100%{transform:translate3d(0,0,0)}31%{transform:translate3d(2.5px,-2px,0)}}
@keyframes comparison-second-impact{0%,48.8%,63%,100%{transform:translate3d(0,0,0)}52%{transform:translate3d(2.5px,-2px,0)}}
@keyframes comparison-third-impact{0%,69.8%,84%,100%{transform:translate3d(0,0,0)}73%{transform:translate3d(2.5px,-2px,0)}}

/* Compact expressive signatures: active migration and calm blueprint/prism. */
.transformation-strip{height:92px;display:flex;justify-content:center;align-items:center;border-bottom:1px solid var(--line)}
.transformation-cubes{display:block;flex:none;overflow:visible;pointer-events:none}
.transformation-active{width:260px;height:90px;max-width:100%}
.transformation-footer{width:230px;height:76px;max-width:100%}
.cube-top{fill:url(#motion-slab);stroke:#28516c;stroke-width:.8}
.cube-left{fill:url(#motion-glass);stroke:#28516c;stroke-width:.8}
.cube-right{fill:url(#motion-side);stroke:#28516c;stroke-width:.8}
.cube-rim{fill:none;stroke:var(--cyan);stroke-width:1;stroke-linejoin:round;opacity:.45}
.cube-facets{fill:none;stroke:var(--cyan);stroke-width:.7;opacity:.3}
.cube-face{fill:none;stroke:var(--cyan);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cube-body{transform-box:fill-box;transform-origin:center}
.cube-source{opacity:.7}.cube-source .cube-rim{opacity:.18}.cube-source .cube-face{stroke:var(--muted)}
.cube-halo-dim{opacity:.3}.cube-base-dim{opacity:.4}
.cube-target .cube-rim,.cube-prism .cube-rim{stroke-width:1.5;opacity:1;filter:url(#motion-bloom)}
.cube-target .cube-rim{animation:var(--cube-rim-name,cube-rim-flash) var(--cube-arrival-duration,6.4s) ease-out infinite}
.cube-target .cube-facets{opacity:.65}.cube-status{fill:none;stroke:var(--cyan);stroke-width:2;stroke-linecap:round}
.cube-check,.cube-spark{fill:none;stroke:var(--cyan);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;filter:url(#motion-bloom);animation:var(--cube-signal-name,cube-signal) var(--cube-arrival-duration,6.4s) ease-out infinite}
.cube-flow,.cube-burst-comet{offset-path:path('M66 38C102 12 154 65 190 38')}
.cube-flow-1{animation:cube-flow-first 6.4s cubic-bezier(.4,0,.15,1) infinite}.cube-flow-2{animation:cube-flow-second 6.4s cubic-bezier(.4,0,.15,1) infinite}
.cube-effort{animation:var(--cube-effort-name,cube-effort) var(--cube-effort-duration,6.4s) ease-in-out infinite}
.cube-arrival{animation:var(--cube-arrival-name,cube-arrival) var(--cube-arrival-duration,6.4s) var(--diagram-spring) infinite}
.cube-eyes{transform-box:fill-box;transform-origin:center;animation:cube-blink 6.2s ease-in-out infinite}
.cube-burst-comet{animation:var(--cube-burst-name,none) .32s ease-in infinite}
.transformation-active[data-burst=true]{--cube-burst-name:cube-burst-transit;--cube-arrival-name:cube-burst-impact;--cube-arrival-duration:.32s;--cube-effort-name:cube-burst-effort;--cube-effort-duration:.32s;--cube-signal-name:cube-burst-signal;--cube-rim-name:cube-burst-rim}
@keyframes cube-flow-first{0%,8%{offset-distance:0%;opacity:0}10%,44.8%{opacity:1}45%,100%{offset-distance:100%;opacity:0}}
@keyframes cube-flow-second{0%,50%{offset-distance:0%;opacity:0}52%,84.8%{opacity:1}85%,100%{offset-distance:100%;opacity:0}}
@keyframes cube-effort{0%,7%,20%,49%,62%,100%{transform:translate3d(0,0,0) scale(1)}10%,54%{transform:translate3d(1px,1px,0) scale(1.02,.96)}13%,57%{transform:translate3d(-.7px,0,0) scale(.98,1.02)}16%{transform:translate3d(.5px,0,0)}}
@keyframes cube-arrival{0%,44.8%,61%,84.8%,100%{transform:translate3d(0,0,0) scale(1)}49%,89%{transform:translate3d(0,-3px,0) scale(1.04)}56%,96%{transform:translate3d(0,.5px,0) scale(1)}}
@keyframes cube-signal{0%,44.8%,62%,84.8%,100%{opacity:0;transform:translate3d(0,2px,0)}45%,85%{opacity:1;transform:translate3d(0,0,0)}59%,98%{opacity:0;transform:translate3d(0,-5px,0)}}
@keyframes cube-rim-flash{0%,44.8%,64%,84.8%,100%{opacity:.65}45%,51%,85%,91%{opacity:1}}
@keyframes cube-blink{0%,36%,39%,77%,80%,100%{transform:scaleY(1)}37%,78%{transform:scaleY(.12)}}
@keyframes cube-burst-transit{0%{offset-distance:0%;opacity:0}8%,69.8%{opacity:1}70%,100%{offset-distance:100%;opacity:0}}
@keyframes cube-burst-impact{0%,69.8%,100%{transform:translate3d(0,0,0) scale(1)}80%{transform:translate3d(0,-3px,0) scale(1.04)}}
@keyframes cube-burst-effort{0%,100%{transform:translate3d(0,0,0)}20%{transform:translate3d(1px,.5px,0) scale(1.02,.96)}45%{transform:translate3d(-1px,0,0)}}
@keyframes cube-burst-signal{0%,69.8%,100%{opacity:0}70%,85%{opacity:1}}
@keyframes cube-burst-rim{0%,69.8%,100%{opacity:.65}70%,85%{opacity:1}}

.cube-blueprint .cube-top,.cube-blueprint .cube-left,.cube-blueprint .cube-right{fill:url(#motion-slab);fill-opacity:.16;stroke:var(--cyan);stroke-opacity:.55}
.cube-blueprint .cube-facets{stroke-dasharray:1 3;opacity:.65}.cube-blueprint .cube-face{stroke-width:1.5}
.cube-prism .cube-left{fill:var(--bg)}.cube-prism .cube-right{fill:url(#motion-glass)}
.cube-core{fill:var(--cyan);fill-opacity:.28;stroke:var(--cyan);stroke-width:.8;filter:url(#motion-bloom);animation:cube-core 5.8s ease-in-out infinite}
.cube-brackets{fill:none;stroke:var(--cyan);stroke-width:1;stroke-linecap:square;opacity:.8}
.cube-hover-source{animation:cube-hover 5.8s ease-in-out infinite}.cube-hover-target{animation:cube-hover 5.8s ease-in-out -1.4s infinite}
.cube-heartbeat.secondary{opacity:.13}.cube-heartbeat-comet{offset-path:path('M52 34C84 10 139 58 177 34');animation:cube-heartbeat 5.8s linear infinite}
.cube-heartbeat-return{offset-path:path('M52 40C84 64 139 16 177 40');animation:cube-heartbeat 5.8s linear -2.9s infinite}
.cube-prism .cube-eye-right{transform-box:fill-box;transform-origin:center;animation:cube-wink 8.4s ease-in-out infinite}
@keyframes cube-hover{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-2px,0)}}
@keyframes cube-heartbeat{0%{offset-distance:0%;opacity:0}7%,85%{opacity:.85}100%{offset-distance:100%;opacity:0}}
@keyframes cube-core{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes cube-wink{0%,81%,86%,100%{transform:scaleY(1)}83%{transform:scaleY(.1)}}

.module-node,.volume-pill,.cube-body,.cube-rim,.cube-check,.cube-spark,.cube-eyes,.cube-eye-right,.cube-core,.stack-top,.stack-middle,.stack-scan,.stack-spotlight,.motion-comet,.motion-badge,.motion-impact,.motion-status,.motion-bar,.slab-completion,.hub-core,.hub-spotlight,.hub-radar,.hub-logs,.hub-dr,.replica-stripe,.replica-halo,.plane-target .rack-icon,.target-guardrail,.target-halo,.plane-meter i{animation-play-state:var(--diagram-play-state,paused)!important}
@media(max-width:900px){.footer-top{flex-wrap:wrap}.transformation-footer{order:3}.footer-top>p{max-width:340px}}
@media(max-width:600px){.transformation-footer{order:initial}.transformation-strip{height:86px}}
@media(prefers-reduced-motion:reduce){
 .module-node,.volume-pill,.cube-body,.cube-check,.cube-spark,.cube-eyes,.cube-eye-right,.cube-core{animation:none!important;transform:none}
 .cube-check{opacity:1}.cube-spark{opacity:.4}.cube-core{opacity:1}.volume-pill{opacity:1}
 .cube-target .cube-rim{animation:none!important;opacity:1}
}