.hero-diagram {
  position: absolute;
  top: 50%;
  right: 5%;
  width: 50%;
  height: 100%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: var(--sp-z-zero);
}

.hero-diagram .arch-hero {
  width: 100%;
  height: 100%;
}

.hero-diagram .connection {
  fill: none;
  stroke: var(--sp-color-primary);
  stroke-width: 1.5;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: draw-line 1.5s var(--sp-ease-out) forwards;
  opacity: 0.4;
}

.hero-diagram .conn-outgoing {
  animation-delay: 0.8s;
}

@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

.hero-diagram .connections path:nth-child(1) { animation-delay: 0s; }
.hero-diagram .connections path:nth-child(2) { animation-delay: 0.15s; }
.hero-diagram .connections path:nth-child(3) { animation-delay: 0.3s; }
.hero-diagram .connections path:nth-child(4) { animation-delay: 0.45s; }
.hero-diagram .connections path:nth-child(5) { animation-delay: 0.7s; }
.hero-diagram .connections path:nth-child(6) { animation-delay: 0.85s; }
.hero-diagram .connections path:nth-child(7) { animation-delay: 1s; }

.hero-diagram .particle { opacity: 0.9; }

.hero-diagram .hub-glow {
  opacity: 0.08;
  animation: hub-pulse 6s var(--sp-ease-in-out) infinite;
}

@keyframes hub-pulse {
  0%, 100% { opacity: 0.08; transform: scale(1); }
  50% { opacity: 0.12; transform: scale(1.015); }
}

.hero-diagram .hub-ring-outer,
.hero-diagram .hub-ring-mid {
  animation: ring-fade 6s var(--sp-ease-in-out) infinite;
}

@keyframes ring-fade {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.4; }
}

.hero-diagram .hub-ring,
.hero-diagram .hub-core { opacity: 1; }
.hero-diagram .hub-label { opacity: 0.9; }

.hero-diagram .client-node { opacity: 0.85; }
.hero-diagram .client-node .node-bg { opacity: 0.6; }
.hero-diagram .client-logo { opacity: 1; }

.hero-diagram .deploy-node { opacity: 0.7; }
.hero-diagram .deploy-node .node-bg { opacity: 0.6; }

.hero-diagram .flow-label {
  font-family: var(--sp-font-brand);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hero-diagram .deploy-label {
  opacity: 1;
  fill: var(--sp-color-text-secondary);
}

.hero-diagram .hub-capabilities .capability-icon {
  opacity: 0.8;
  cursor: pointer;
  transition: opacity var(--sp-duration-moderate) var(--sp-ease-out);
}

.hero-diagram .hub-capabilities .capability-icon:hover {
  opacity: 1;
}

.hero-diagram .hub-capabilities .capability-icon:hover circle {
  stroke: var(--sp-color-primary-hover);
  stroke-width: 2;
}

.hero-diagram .hub-capabilities .capability-label {
  opacity: 0.7;
  transition: opacity var(--sp-duration-moderate) var(--sp-ease-out);
}

.hero-diagram .hub-capabilities .capability-icon:hover .capability-label {
  opacity: 1;
}

.hero-diagram .timeline { opacity: 0.8; }
.hero-diagram .timeline text { font-weight: var(--sp-font-medium); }

@media (prefers-reduced-motion: reduce) {
  .hero-diagram .connection {
    animation: none;
    stroke-dashoffset: 0;
  }

  .hero-diagram .hub-glow {
    animation: none;
  }

  .hero-diagram .hub-ring-outer,
  .hero-diagram .hub-ring-mid {
    animation: none;
  }

  .hero-diagram .hub-capabilities .capability-icon,
  .hero-diagram .hub-capabilities .capability-label {
    transition: none;
  }
}