cross-repo-intelligence {
  display: block;
  width: 100%;
  max-width: calc(52vh * 16 / 9);
  min-width: 0;
  margin-inline: auto;
  container: repo-demo / inline-size;
}
cross-repo-intelligence,
cross-repo-intelligence * {
  box-sizing: border-box;
}

/* Scoped styles for repo-graph visual used in first slide */
cross-repo-intelligence .visual-container {
  width: 100%;
  aspect-ratio: var(--repo-aspect, 16 / 9);
  max-width: 100%;
  max-height: 480px;
  min-height: var(--repo-min-height, 340px);
  margin: 0 auto;
  min-width: 0;
  background: radial-gradient(circle at 20% 60%, #e0f2fe 0%, #fff 28%), #ffffff;
  border: 1px solid #cbdce2;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
  position: relative;
}

cross-repo-intelligence .bg-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  opacity: 0.85;
}

cross-repo-intelligence .repo-cluster {
  position: absolute;
  color: #94a3b8;
  will-change: transform;
  display: flex;
  justify-content: center;
  align-items: center;
}

cross-repo-intelligence .ani-A {
  animation: float-A 18s ease-in-out infinite;
}

cross-repo-intelligence .ani-B {
  animation: float-B 25s ease-in-out infinite;
}

cross-repo-intelligence .deep {
  opacity: 0.45;
  transform: scale(0.8);
}

cross-repo-intelligence .dot {
  fill: currentColor;
}

cross-repo-intelligence .bg-conn {
  stroke: currentColor;
  stroke-width: 1px;
  fill: none;
}

cross-repo-intelligence .dot-pulse {
  animation: p-swish 2s infinite alternate;
}

@keyframes float-A {
  0% {
    transform: translate(0, 0) rotate(0);
  }
  50% {
    transform: translate(30px, -20px) rotate(3deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);
  }
}

@keyframes float-B {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes p-swish {
  to {
    fill: #38bdf8;
    filter: drop-shadow(0 0 6px #38bdf8);
  }
}

cross-repo-intelligence .bg-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono, monospace);
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  pointer-events: none;
}

/* Sonar origin sits at the PR node, pulses outward across the graph */

cross-repo-intelligence .sonar-origin {
  position: absolute;
  top: 60%;
  left: 15%;
  z-index: 5;
  width: 0;
  height: 0;
}

cross-repo-intelligence .ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 2px solid var(--blue, #0e8da7);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: cr1-ripple-out 4s infinite cubic-bezier(0, 0.2, 0.8, 1);
}

cross-repo-intelligence .ripple:nth-child(2) {
  animation-delay: 1.2s;
}

cross-repo-intelligence .ripple:nth-child(3) {
  animation-delay: 2.4s;
}

/* The original expanded to 120vw, which on a wide monitor is mostly wasted
   offscreen work; the frame is at most ~853x480, so 1000px covers it. */
@keyframes cr1-ripple-out {
  0% {
    width: 0;
    height: 0;
    border-width: 3px;
    opacity: 0.5;
  }
  100% {
    width: 1000px;
    height: 1000px;
    border-width: 0;
    opacity: 0;
  }
}

/* Connector lines: viewBox is 0 0 100 100 with preserveAspectRatio="none",
   so the stroke must not scale with it. */

cross-repo-intelligence svg.fg-lines {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

cross-repo-intelligence .fg-path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

cross-repo-intelligence .line-base {
  stroke: #a4c1cb;
  stroke-width: 2px;
  stroke-dasharray: 5 5;
  opacity: 0.6;
}

cross-repo-intelligence .line-active {
  stroke: var(--blue, #0e8da7);
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 10 100;
  stroke-dashoffset: 100;
  animation: cr1-flow-line 3s linear infinite;
}

@keyframes cr1-flow-line {
  to {
    stroke-dashoffset: -110;
  }
}

/* Node boxes are positioned by inline left/top percentages in the markup */

cross-repo-intelligence .node-box {
  position: absolute;
  z-index: 20;
  display: flex;
  min-width: 140px;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  background: #fff;
  border: 1px solid #a4c1cb;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(9, 21, 34, 0.08);
  color: #38505f;
  font-family: var(--sans, sans-serif);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

cross-repo-intelligence .node-icon {
  display: flex;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  background: #f5f9fa;
  border-radius: 6px;
  font-size: 14px;
}

cross-repo-intelligence .n-pr {
  border-color: var(--blue, #0e8da7);
}

cross-repo-intelligence .n-pr .node-icon {
  background: var(--blue-soft, #dff5f8);
  color: var(--blue-dark, #086b80);
}

cross-repo-intelligence .n-target {
  border-color: var(--coral, #d35b47);
  color: var(--coral-dark, #8f2e20);
  animation: cr1-shake 3s infinite 2s;
}

cross-repo-intelligence .n-target .node-icon {
  background: var(--coral-soft, #fff0ec);
  color: var(--coral, #d35b47);
}

@keyframes cr1-shake {
  0%,
  15%,
  100% {
    transform: translate(-50%, -50%) rotate(0);
  }
  5% {
    transform: translate(-52%, -50%) rotate(-2deg);
  }
  10% {
    transform: translate(-48%, -50%) rotate(2deg);
  }
}

@container repo-demo (max-width: 700px) {
  cross-repo-intelligence .node-box {
    min-width: 0;
    gap: 6px;
    padding: 6px 8px;
    font-size: 10px;
  }
  cross-repo-intelligence .node-icon {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }
}
@container repo-demo (max-width: 440px) {
  cross-repo-intelligence .node-box {
    gap: 3px;
    padding: 4px;
    font-size: 8px;
  }
  cross-repo-intelligence .node-box [style*="font-size"] {
    font-size: 7px !important;
  }
  cross-repo-intelligence .node-icon {
    width: 14px;
    height: 16px;
    font-size: 9px;
  }
  cross-repo-intelligence .node-icon svg {
    width: 12px;
    height: 12px;
  }
}
cross-repo-intelligence[data-paused] * {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  cross-repo-intelligence * {
    animation: none !important;
  }
}