/**
 * Sunrose AI Pipeline Architecture - animated flow diagram
 * Matches landing font (Inter) and color symmetry with hero + How It Works block.
 */

.sunrose-pipeline-section {
  color: var(--landing-heading, #f4f6ff);
  font-family: var(--landing-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

.sunrose-pipeline-section .pipeline-diagram-container {
  max-width: 680px;
  margin: 0 auto;
  background: linear-gradient(180deg, #141a33 0%, #0b0f1f 100%);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.sunrose-pipeline-section .flow-diagram {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.sunrose-pipeline-section .flow-diagram .box {
  fill: rgba(255, 255, 255, 0.06);
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 0.574;
  transition: all 0.3s ease;
}

.sunrose-pipeline-section .flow-diagram .box:hover {
  fill: rgba(255, 255, 255, 0.1);
  stroke: rgba(255, 255, 255, 0.25);
}

.sunrose-pipeline-section .flow-diagram .box-center {
  fill: rgba(122, 91, 255, 0.15);
  stroke: rgba(122, 91, 255, 0.4);
}

.sunrose-pipeline-section .flow-diagram .box-center:hover {
  fill: rgba(122, 91, 255, 0.2);
  stroke: rgba(122, 91, 255, 0.5);
}

.sunrose-pipeline-section .flow-diagram .t1 {
  fill: #f4f6ff;
  font-size: 1.9px;
  font-weight: 600;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.sunrose-pipeline-section .flow-diagram .t2 {
  fill: #c9cffb;
  font-size: 1.45px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.sunrose-pipeline-section .flow-diagram .wire {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 0.717;
  fill: none;
}

.sunrose-pipeline-section .flow-diagram .flow {
  stroke: #6df6ff;
  stroke-width: 1.195;
  fill: none;
  stroke-dasharray: 7.172 3.825;
  stroke-linecap: round;
  filter: drop-shadow(0 0 1.434px #6df6ff);
  animation: pipelineFlowAnimation 2s linear infinite;
}

.sunrose-pipeline-section .flow-diagram .flow.slow {
  stroke: #7a5bff;
  filter: drop-shadow(0 0 1.434px #7a5bff);
  animation: pipelineFlowAnimation 3s linear infinite;
}

.sunrose-pipeline-section .flow-diagram .flow.feedback {
  stroke: #ff5fe8;
  filter: drop-shadow(0 0 1.434px #ff5fe8);
  animation: pipelineFlowAnimation 2.5s linear infinite;
}

@keyframes pipelineFlowAnimation {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -10.997; }
}

.sunrose-pipeline-section .flow-diagram .particle {
  fill: #6df6ff;
  filter: drop-shadow(0 0 2.869px currentColor);
  opacity: 0.9;
}

.sunrose-pipeline-section .flow-diagram .particle-primary {
  fill: #6df6ff;
  filter: drop-shadow(0 0 2.869px #6df6ff);
}

.sunrose-pipeline-section .flow-diagram .particle-secondary {
  fill: #7a5bff;
  filter: drop-shadow(0 0 2.869px #7a5bff);
}

.sunrose-pipeline-section .flow-diagram .particle-feedback {
  fill: #ff5fe8;
  filter: drop-shadow(0 0 2.869px #ff5fe8);
}

/* Keep text inside boxes at all viewports */
@media (min-width: 576px) {
  .sunrose-pipeline-section .flow-diagram .t1 {
    font-size: 2.1px;
  }
  .sunrose-pipeline-section .flow-diagram .t2 {
    font-size: 1.6px;
  }
}