/* A living signal map sits behind the multi-system story. Canvas draws the moving routes; CSS supplies the HUD frame. */
.systems { position: relative; isolation: isolate; overflow: hidden; }
.storm-network { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .78; mix-blend-mode: screen; mask-image: linear-gradient(180deg, transparent 3%, black 24%, black 78%, transparent 98%); }
.systems-head, .systems-grid { position: relative; z-index: 1; }
.systems::before, .systems::after { content: ""; position: absolute; z-index: 0; pointer-events: none; }.systems::before { width: 520px; height: 520px; left: -270px; top: 26%; border: 1px solid rgba(83, 228, 245, .16); border-radius: 50%; box-shadow: 0 0 0 62px rgba(83, 228, 245, .022), 0 0 0 126px rgba(83, 228, 245, .012); animation: systems-orbit 24s linear infinite; }.systems::after { right: 3%; top: 18%; width: 2px; height: 65%; opacity: .34; background: linear-gradient(transparent, #55ecf7 18%, transparent 34%, #55ecf7 55%, transparent 75%); box-shadow: 0 0 20px rgba(45, 230, 244, .6); animation: systems-scan 7.5s ease-in-out infinite; }
.system-card { transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease; }.system-card::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, rgba(92, 242, 249, .12), transparent); transform: translateX(-120%); transition: opacity .25s; }.system-card:hover::before { opacity: 1; animation: card-signal-pass 1.2s ease both; }
.system-card-large::after { content: ""; position: absolute; z-index: 1; right: -6%; bottom: -47%; width: 270px; height: 270px; border: 1px solid rgba(101, 244, 252, .22); border-radius: 50%; box-shadow: 0 0 0 34px rgba(101, 244, 252, .024), 0 0 0 68px rgba(101, 244, 252, .016); animation: systems-orbit 17s linear infinite reverse; pointer-events: none; }
.system-card-command::after { content: ""; position: absolute; z-index: 1; right: 8%; top: 12%; width: 5px; height: 5px; border-radius: 50%; background: #9fffff; box-shadow: 0 0 0 8px rgba(79, 236, 248, .1), 0 0 24px rgba(79, 236, 248, .9); animation: command-node 3.3s ease-in-out infinite; }
@keyframes systems-orbit { to { transform: rotate(360deg); } }
@keyframes systems-scan { 50% { transform: translateY(78px); opacity: .72; } }
@keyframes card-signal-pass { to { transform: translateX(120%); } }
@keyframes command-node { 50% { transform: scale(1.7); opacity: .4; } }
@media (max-width: 620px) { .storm-network { opacity: .55; }.systems::before { width: 330px; height: 330px; left: -205px; }.systems::after { right: 1%; }.system-card-command::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .systems::before, .systems::after, .system-card-large::after, .system-card-command::after { animation: none; }.storm-network { display: none; }.system-card:hover::before { animation: none; } }