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

.sunrose-pipeline-section {
  color: #201F1E;
  font-family: var(--font, 'Segoe UI', 'Segoe UI Variable', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif);
}

.sunrose-pipeline-section .pipeline-diagram-container {
  max-width: 100%;
  margin: 0 auto;
  background: var(--bg-white, #FFFFFF);
  border-radius: 8px;
  padding: 10px;
  border: 1px solid var(--border, #EDEBE9);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* SVG Diagram Styles */
.sunrose-pipeline-section .flow-diagram {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Box Styles - Windows Light Theme */
.sunrose-pipeline-section .flow-diagram .box {
  fill: #FFFFFF;
  stroke: #EDEBE9;
  stroke-width: 0.574;
  transition: all 0.3s ease;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.06));
}

.sunrose-pipeline-section .flow-diagram .box:hover {
  fill: #FAF9F8;
  stroke: #C8C6C4;
}

/* Middle column boxes - Primary tint */
.sunrose-pipeline-section .flow-diagram .box-center {
  fill: rgba(0, 120, 212, 0.05);
  stroke: rgba(0, 120, 212, 0.3);
}

.sunrose-pipeline-section .flow-diagram .box-center:hover {
  fill: rgba(0, 120, 212, 0.1);
  stroke: rgba(0, 120, 212, 0.5);
}

/* Text Styles - bold and clear (matches duplicated animation from animated-flow-diagram-example) */
.sunrose-pipeline-section .flow-diagram .t1 {
  fill: #201F1E;
  font-size: 4px;
  font-weight: 700;
  font-family: var(--font, 'Segoe UI', 'Segoe UI Variable', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif);
}

.sunrose-pipeline-section .flow-diagram .t2 {
  fill: #605E5C;
  font-size: 3px;
  font-weight: 600;
  font-family: var(--font, 'Segoe UI', 'Segoe UI Variable', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif);
}

/* Wire (static connector line) */
.sunrose-pipeline-section .flow-diagram .wire {
  stroke: #C8C6C4;
  stroke-width: 0.717;
  fill: none;
}

/* Animated Flow Lines - KEY ANIMATION */
.sunrose-pipeline-section .flow-diagram .flow {
  stroke: #0078D4; /* Windows Primary Blue */
  stroke-width: 1.195;
  fill: none;
  stroke-dasharray: 3 2;  /* Smaller dashes for finer flow */
  stroke-linecap: round;
  filter: drop-shadow(0 0 1px rgba(0, 120, 212, 0.5));
  animation: flowAnimation 2s linear infinite;
}

.sunrose-pipeline-section .flow-diagram .flow.slow {
  stroke: #106EBE; /* Primary Dark */
  filter: drop-shadow(0 0 1px rgba(16, 110, 190, 0.5));
  animation: flowAnimation 3s linear infinite;
}

.sunrose-pipeline-section .flow-diagram .flow.feedback {
  stroke: #005A9E; /* Even darker blue for feedback */
  filter: drop-shadow(0 0 1px rgba(0, 90, 158, 0.5));
  animation: flowAnimation 2.5s linear infinite;
}

/* Flow Animation - stroke-dashoffset creates the moving effect */
@keyframes flowAnimation {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -5; }
}

/* Moving Particles */
.sunrose-pipeline-section .flow-diagram .particle {
  fill: #0078D4;
  filter: drop-shadow(0 0 1.5px currentColor);
  opacity: 0.9;
}

.sunrose-pipeline-section .flow-diagram .particle-primary {
  fill: #0078D4;
  filter: drop-shadow(0 0 1.5px #0078D4);
}

.sunrose-pipeline-section .flow-diagram .particle-secondary {
  fill: #106EBE;
  filter: drop-shadow(0 0 1.5px #106EBE);
}

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