.rggb-banner {
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  line-height: 0;
}

.rggb-banner .rggb-svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 550;
}

.rggb-banner .rggb-connection {
  stroke-opacity: 0.52;
  stroke-dasharray: var(--rggb-len, 120);
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
}

/* v0.4.2 — organic construction.
   Les points restent fixes. Les liens dynamiques se tracent, restent visibles,
   puis se retirent avec des durées et décalages propres à chaque lien. Cela évite
   l'effet mécanique "une ligne après l'autre" et l'effet fade in / fade out. */
.rggb-banner.rggb-breathing .rggb-dynamic {
  stroke-dasharray: var(--rggb-len, 120);
  stroke-dashoffset: var(--rggb-len, 120);
  animation-name: rggb-live-link;
  animation-duration: var(--rggb-dur, 18s);
  animation-delay: var(--rggb-delay, -3s);
  animation-timing-function: cubic-bezier(.45, 0, .18, 1);
  animation-iteration-count: infinite;
}

.rggb-banner.rggb-breathing .rggb-anchor {
  stroke-dasharray: var(--rggb-len, 120);
  stroke-dashoffset: 0;
  stroke-opacity: 0.34;
}

@keyframes rggb-live-link {
  0% {
    stroke-dashoffset: var(--rggb-len, 120);
    stroke-opacity: 0;
  }
  12% {
    stroke-opacity: 0.78;
  }
  24% {
    stroke-dashoffset: 0;
    stroke-opacity: 0.82;
  }
  58% {
    stroke-dashoffset: 0;
    stroke-opacity: 0.68;
  }
  76% {
    stroke-dashoffset: calc(-1 * var(--rggb-len, 120));
    stroke-opacity: 0.48;
  }
  86%, 100% {
    stroke-dashoffset: calc(-1 * var(--rggb-len, 120));
    stroke-opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rggb-banner.rggb-breathing .rggb-connection {
    animation: none;
    stroke-dashoffset: 0;
    stroke-opacity: 0.42;
  }
}