/* Cross-Asset Intelligence Engine: one static-first premium market map. */
.cross-asset-engine {
  margin-top: 18px;
}

.cross-asset-engine-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(360px, 0.78fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
  padding: clamp(20px, 3vw, 30px);
  overflow: hidden;
}

.cross-asset-engine-copy {
  max-width: 620px;
}

.cross-asset-engine-copy h2 {
  margin: 12px 0 10px;
  max-width: 720px;
  color: #f4f7f1;
  font-size: clamp(28px, 3.15vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.cross-asset-engine-copy p {
  margin: 0;
  color: rgba(214, 222, 232, 0.78);
  font-size: 15px;
  line-height: 1.72;
}

.cross-asset-engine-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.cross-asset-engine-visual {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 560px;
  min-height: 250px;
  border: 1px solid rgba(165, 230, 255, 0.46);
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 48%, rgba(96, 232, 255, 0.42), transparent 31%),
    radial-gradient(circle at 24% 28%, rgba(248, 217, 122, 0.32), transparent 37%),
    radial-gradient(circle at 82% 28%, rgba(45, 212, 191, 0.34), transparent 38%),
    radial-gradient(circle at 76% 82%, rgba(166, 126, 255, 0.28), transparent 37%),
    linear-gradient(135deg, #183a54 0%, #174d6b 46%, #223864 100%);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.045) inset,
    0 22px 72px rgba(53, 199, 224, 0.1);
}

/* Aurora sweep + soft sheen pseudo-elements are now ENABLED so the
 * card actually feels alive. Position absolute is required for the
 * 'inset' values below to apply. */
.cross-asset-engine-visual::before,
.cross-asset-engine-visual::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.cross-asset-engine-visual::before {
  inset: -22%;
  background:
    conic-gradient(from 220deg at 50% 48%,
      rgba(248, 217, 122, 0.22),
      rgba(67, 224, 198, 0.24),
      rgba(105, 166, 255, 0.22),
      rgba(218, 121, 255, 0.18),
      rgba(248, 217, 122, 0.22));
  filter: blur(30px);
  opacity: 0.75;
  mix-blend-mode: screen;
  animation: engine-aurora-sweep 32s ease-in-out infinite;
  z-index: 0;
}

.cross-asset-engine-visual::after {
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 28%, transparent 70%, rgba(94, 234, 212, 0.06));
  opacity: 0.6;
  z-index: 0;
}

.engine-network-svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 250px;
  max-height: 250px;
  overflow: visible;
}

/* Frame fill removed: the rect was covering the colorful card
 * gradient with a flat muted navy, which is what made the panel
 * read as "black empty card". Now only a soft border remains so
 * the multi-color background shines through. */
.engine-frame {
  fill: none;
  stroke: rgba(216, 244, 255, 0.22);
  stroke-width: 1.2;
}

.engine-link,
.engine-flow-dot,
.cross-asset-engine-chips {
  display: none !important;
}

/* Whole network breathes very gently — barely-perceptible scale. */
.engine-network-orbit {
  transform-origin: 310px 150px;
  transform-box: view-box;
  animation: engine-network-breathe 14s ease-in-out infinite;
}

/* The orbit-field is now STATIC — rotating it dragged the ticker
 * labels around with it, leaving SPY/QQQ/GLD half-readable at any
 * given moment. Professional institutional visualizations (Bloomberg,
 * Koyfin) keep the layout still and let the motion come from the
 * hub pulse, sweeping radar, line flow and sequenced node glow.
 * That's what we do here. */
.engine-orbit-field {
  transform-origin: 310px 150px;
  transform-box: view-box;
  animation: none;
}

/* Radar sweep beam — replaces the orbit rotation as the source of
 * "live" motion. A gradient wedge slowly rotates around the hub,
 * passing over each satellite, without touching the labels. */
.engine-radar-sweep {
  transform-origin: 310px 150px;
  transform-box: view-box;
  animation: engine-field-orbit 18s linear infinite;
  opacity: 0.55;
  mix-blend-mode: screen;
}

/* Connection spokes pulse along their length — gentle flow only. */
.engine-spoke {
  stroke-width: 1.95;
  stroke-linecap: round;
  stroke-dasharray: 6 9;
  opacity: 0.78;
  animation: engine-spoke-flow 7s ease-in-out infinite;
}
.engine-spoke:nth-of-type(2) { animation-delay: 0.8s; }
.engine-spoke:nth-of-type(3) { animation-delay: 1.6s; }
.engine-spoke:nth-of-type(4) { animation-delay: 2.4s; }
.engine-spoke:nth-of-type(5) { animation-delay: 3.2s; }
.engine-spoke:nth-of-type(6) { animation-delay: 4.0s; }
.engine-spoke:nth-of-type(7) { animation-delay: 4.8s; }
.engine-spoke:nth-of-type(8) { animation-delay: 5.6s; }

.engine-spoke-spy { stroke: rgba(52, 211, 153, 0.78); }
.engine-spoke-gld { stroke: rgba(248, 217, 122, 0.84); }
.engine-spoke-qqq { stroke: rgba(103, 232, 249, 0.84); }
.engine-spoke-tlt { stroke: rgba(125, 174, 255, 0.82); }
.engine-spoke-uup { stroke: rgba(251, 146, 60, 0.76); }
.engine-spoke-vix { stroke: rgba(192, 132, 252, 0.78); }
.engine-spoke-sector { stroke: rgba(45, 212, 191, 0.76); }
.engine-spoke-equity { stroke: rgba(244, 114, 182, 0.76); }

/* Hub halo breathes slowly. */
.engine-halo {
  fill: rgba(92, 225, 255, 0.32);
  stroke: rgba(255, 230, 150, 0.85);
  stroke-width: 2.2;
  transform-origin: 310px 150px;
  transform-box: view-box;
  animation: engine-halo-breathe 6s ease-in-out infinite;
}

/* Central hub — gentle pulse and a soft glow filter. */
.engine-hub {
  fill: url(#engine-hub-grad);
  stroke: rgba(255, 244, 195, 1);
  stroke-width: 3;
  filter: drop-shadow(0 0 18px rgba(255, 230, 150, 0.55));
  animation: engine-hub-breathe 5s ease-in-out infinite;
  transform-origin: 310px 150px;
  transform-box: view-box;
}

.engine-hub-ar {
  fill: url(#engine-hub-grad-ar);
}

.engine-hub-badge {
  fill: rgba(13, 29, 47, 0.78);
  stroke: rgba(255, 232, 160, 0.42);
  stroke-width: 0.8;
}

/* Sequential per-node glow — each node briefly brightens in turn.
 * The `engine-node-1..8` delays already exist below, so the 12s
 * cycle hits each of 8 nodes ~1.4s apart. */
.engine-node {
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.18));
  animation: engine-node-glow 12s ease-in-out infinite;
}

.engine-node-spy {
  fill: #34d399;
  stroke: #bbf7d0;
}

.engine-node-qqq {
  fill: #67e8f9;
  stroke: #cffafe;
}

.engine-node-gld {
  fill: #f8d97a;
  stroke: #fff2bf;
}

.engine-node-tlt {
  fill: #7daeff;
  stroke: #dbeafe;
}

.engine-node-uup {
  fill: #fb923c;
  stroke: #fed7aa;
}

.engine-node-vix {
  fill: #c084fc;
  stroke: #ead6ff;
}

.engine-node-sector {
  fill: #2dd4bf;
  stroke: #ccfbf1;
}

.engine-node-equity {
  fill: #f472b6;
  stroke: #fbcfe8;
}

.engine-node-1 { animation-delay: 0s; }
.engine-node-2 { animation-delay: 1.4s; }
.engine-node-3 { animation-delay: 2.8s; }
.engine-node-4 { animation-delay: 4.2s; }
.engine-node-5 { animation-delay: 5.6s; }
.engine-node-6 { animation-delay: 7s; }
.engine-node-7 { animation-delay: 8.4s; }
.engine-node-8 { animation-delay: 9.8s; }

.engine-hub-group,
.engine-market-node {
  pointer-events: none;
}

.engine-hub-label,
.engine-hub-sub,
.engine-node-label {
  font-family: Inter, "IBM Plex Sans Arabic", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: rgba(7, 15, 27, 0.92);
  stroke-width: 4px;
  stroke-linejoin: round;
  fill: rgba(247, 251, 255, 0.96);
}

.engine-hub-label {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.09em;
  fill: rgba(255, 246, 204, 1);
}

.engine-hub-sub {
  font-size: 8.6px;
  font-weight: 850;
  letter-spacing: 0.045em;
  fill: rgba(211, 250, 246, 0.96);
}

.engine-hub-sub-ar {
  font-size: 8.4px;
  letter-spacing: 0;
}

.engine-node-label {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.055em;
}

@keyframes engine-aurora-sweep {
  0%, 100% { transform: translate3d(-1%, 1%, 0) rotate(0deg) scale(1); opacity: 0.62; }
  44% { transform: translate3d(2%, -2%, 0) rotate(6deg) scale(1.04); opacity: 0.82; }
  72% { transform: translate3d(-2%, 2%, 0) rotate(-4deg) scale(0.99); opacity: 0.68; }
}

@keyframes engine-network-breathe {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(2px, -1px) scale(1.01); }
}

@keyframes engine-field-orbit {
  to { transform: rotate(360deg); }
}

@keyframes engine-spoke-flow {
  0%, 100% { opacity: 0.46; stroke-dashoffset: 0; }
  50% { opacity: 0.88; stroke-dashoffset: -26; }
}

@keyframes engine-halo-breathe {
  0%, 100% { opacity: 0.58; transform: scale(0.94); }
  50% { opacity: 0.95; transform: scale(1.16); }
}

@keyframes engine-hub-breathe {
  0%, 100% { transform: scale(0.98); opacity: 0.96; }
  50% { transform: scale(1.06); opacity: 1; }
}

@keyframes engine-node-glow {
  0%, 82%, 100% {
    opacity: 0.92;
    filter: drop-shadow(0 0 8px rgba(144, 232, 255, 0.32));
  }
  90% {
    opacity: 1;
    filter: drop-shadow(0 0 18px rgba(255, 232, 160, 0.62));
  }
}

@media (min-width: 901px) {
  .engine-hub {
    r: 36px;
  }

  .engine-halo {
    r: 66px;
  }
}

@media (max-width: 900px) {
  .cross-asset-engine-panel {
    grid-template-columns: 1fr;
  }

  .cross-asset-engine-visual {
    justify-self: stretch;
    max-width: none;
    min-height: 210px;
  }

  .engine-network-svg {
    height: 210px;
    max-height: 210px;
  }
}

@media (max-width: 520px) {
  .cross-asset-engine {
    margin-top: 14px;
  }

  .cross-asset-engine-panel {
    padding: 16px;
    gap: 14px;
  }

  .cross-asset-engine-copy p {
    font-size: 14px;
    line-height: 1.65;
  }

  .cross-asset-engine-actions {
    display: none;
  }

  .cross-asset-engine-visual {
    min-height: 198px;
    border-radius: 22px;
  }

  .engine-network-svg {
    height: 198px;
    max-height: 198px;
  }

  .engine-hub {
    r: 33px;
  }

  .engine-halo {
    r: 58px;
  }

  .engine-node-label {
    font-size: 11px;
    stroke-width: 3.2px;
  }

  .engine-hub-label {
    font-size: 14px;
  }

  .engine-hub-sub {
    display: none;
  }

  .engine-mobile-extra .engine-node-label {
    font-size: 9.5px;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cross-asset-engine-visual::before,
  .engine-network-orbit,
  .engine-orbit-field,
  .engine-spoke,
  .engine-halo,
  .engine-hub,
  .engine-node {
    animation: none !important;
  }

  .engine-network-orbit,
  .engine-orbit-field {
    transform: none !important;
  }
}