/* Общие стили для всех линий */
line {
  fill: none;
  stroke-width: 6;
  stroke-miterlimit: 10;
  opacity: 0.15;
  animation: colorShift 6s infinite alternate;
}

/* Красные линии */
#red line {
  stroke-width: 12;
  stroke: #CE1B5F;
  animation: show 4s ease-in-out infinite, colorShift 6s infinite alternate;
}

/* Синие линии */
#blue line {
  stroke-width: 12;
  stroke: #06A1C4;
  animation: show 4s ease-in-out infinite, colorShift 6s infinite alternate;
}

/* Светло-синие линии с эффектом draw */
#light-blue line {
  stroke-width: 6;
  stroke: #06A1C4;
  stroke-dasharray: 200;
  stroke-dashoffset: 800;
  animation: draw 4s ease-in-out infinite, colorShift 6s infinite alternate;
}

/* Анимация рисования линий */
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

/* Анимация появления/исчезновения */
@keyframes show {
  0%   { opacity: 0.15; }
  50%  { opacity: 0.2; }
  100% { opacity: 0.15; }
}

/* Плавная смена цвета (эффект "рандома") */
@keyframes colorShift {
  0%   { stroke: #06A1C4; }
  20%  { stroke: #CE1B5F; }
  40%  { stroke: #FFD700; }
  60%  { stroke: #00FF00; }
  80%  { stroke: #FF4500; }
  100% { stroke: #06A1C4; }
}

/* Разные задержки для "рандомного" эффекта */
#red line:nth-child(odd) { animation-delay: 0s, 0s; }
#red line:nth-child(even) { animation-delay: 0.5s, 0.5s; }

#blue line:nth-child(odd) { animation-delay: 1s, 1s; }
#blue line:nth-child(even) { animation-delay: 1.5s, 1.5s; }

#light-blue line:nth-child(odd) { animation-delay: 2s, 2s; }
#light-blue line:nth-child(even) { animation-delay: 2.5s, 2.5s; }