.cpu-architecture-svg {
  color: #a1a1aa;
}

.cpu-architecture {
  offset-anchor: center;
  animation-name: animation-path;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.75, -0.01, 0, 0.99);
}

.cpu-line-1 {
  offset-path: path("M 10 20 h 79.5 q 5 0 5 5 v 30");
  animation-duration: 5s;
  animation-delay: 1s;
}

.cpu-line-2 {
  offset-path: path("M 180 10 h -69.7 q -5 0 -5 5 v 40");
  animation-delay: 6s;
  animation-duration: 2s;
}

.cpu-line-3 {
  offset-path: path("M 130 20 v 21.8 q 0 5 -5 5 h -25");
  animation-delay: 4s;
  animation-duration: 6s;
}

.cpu-line-4 {
  offset-path: path("M 170 80 v -21.8 q 0 -5 -5 -5 h -65");
  animation-delay: 3s;
  animation-duration: 3s;
}

.cpu-line-5 {
  offset-path: path("M 135 65 h 15 q 5 0 5 5 v 10 q 0 5 -5 5 h -39.8 q -5 0 -5 -5 v -35");
  animation-delay: 9s;
  animation-duration: 4s;
}

.cpu-line-6 {
  offset-path: path("M 94.8 95 v -46");
  animation-delay: 3s;
  animation-duration: 7s;
}

.cpu-line-7 {
  offset-path: path("M 88 88 v -15 q 0 -5 -5 -5 h -10 q -5 0 -5 -5 v -5 q 0 -5 5 -5 h 28");
  animation-delay: 4s;
  animation-duration: 4s;
}

.cpu-line-8 {
  offset-path: path("M 30 30 h 25 q 5 0 5 5 v 6.5 q 0 5 5 5 h 35");
  animation-delay: 3s;
  animation-duration: 3s;
}

@keyframes animation-path {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}
/* Light streaks with tapered comet tails along the traces (amber, on-palette).
   3 stacked dashes per trace share a leading edge (the head) and trail back with
   decreasing width + opacity -> a pointed (lancip) fading tail. pathLength=100, so
   each layer's dashoffset = dashLen - distance, keeping the heads aligned. */
.cpu-streak {
  stroke: #ffd36b;
  stroke-linecap: round;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.cpu-streak-head { stroke-width: 1.6; stroke-dasharray: 2 98;  animation-name: cpu-streak-head; }
.cpu-streak-mid  { stroke-width: 1.0; stroke-dasharray: 9 91;  opacity: 0.5;  animation-name: cpu-streak-mid; }
.cpu-streak-tail { stroke-width: 0.5; stroke-dasharray: 22 78; opacity: 0.22; animation-name: cpu-streak-tail; }

/* per-trace timing (matches the red-liquid flow) */
.cpu-streak-1 { animation-duration: 5s; animation-delay: 1s; }
.cpu-streak-2 { animation-duration: 2s; animation-delay: 6s; }
.cpu-streak-3 { animation-duration: 6s; animation-delay: 4s; }
.cpu-streak-4 { animation-duration: 3s; animation-delay: 3s; }
.cpu-streak-5 { animation-duration: 4s; animation-delay: 9s; }
.cpu-streak-6 { animation-duration: 7s; animation-delay: 3s; }
.cpu-streak-7 { animation-duration: 4s; animation-delay: 4s; }
.cpu-streak-8 { animation-duration: 3s; animation-delay: 3s; }

/* leading edge stays aligned across layers: offset = dashLen - distance(0..100) */
@keyframes cpu-streak-head { from { stroke-dashoffset: 2; }  to { stroke-dashoffset: -98; } }
@keyframes cpu-streak-mid  { from { stroke-dashoffset: 9; }  to { stroke-dashoffset: -91; } }
@keyframes cpu-streak-tail { from { stroke-dashoffset: 22; } to { stroke-dashoffset: -78; } }