/* The Visible Line */
.conn-line {
  fill: none;
  stroke-width: 3;
  transition: stroke-width 0.2s, opacity 0.3s, filter 0.2s;
  pointer-events: none;
}

.conn-line marker-end {
  markerWidth: 4;
  markerHeight: 4;
  transition: marker-width 0.2s ease, marker-height 0.2s ease;
}

.conn-line.hover-highlight {
  stroke-width: 3.5;
}

.conn-line.hover-highlight marker-end {
  markerWidth: 7;
  markerHeight: 7;
}

/* The Interaction Hitbox (Invisible but thick) */
.conn-hitbox {
  fill: none;
  stroke: transparent;
  stroke-width: 25px;
  cursor: pointer;
  pointer-events: auto;
}

/* Hover States */
.conn-line.hovered {
  stroke-width: 6 !important;
  filter: drop-shadow(0 0 8px currentColor);
  opacity: 1 !important;
}

.conn-line.hidden,
.conn-hitbox.hidden {
  opacity: 0;
  pointer-events: none;
}

.conn-line.dimmed {
  opacity: 0.1;
}

.conn-line.active-flow {
  stroke-width: 4;
  stroke-dasharray: 10, 5;
  animation: dashFlow 0.5s linear infinite;
  opacity: 1 !important;
}

/* Packet Animation */
#packet {
  position: absolute;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 30% 30%, #fff, #60a5fa);
  border-radius: 50%;
  box-shadow: 0 0 15px 5px var(--c-radius);
  z-index: 5000;
  pointer-events: none;
  display: none;
}

@keyframes dashFlow {
  to {
    stroke-dashoffset: -30;
  }
}