/*
 * dots-anim.css — dezente Bewegung für die gepunkteten Linien links/rechts.
 *
 * Die Punkte kommen als Inline-SVG aus show_dots() (_func.php), nachgebaut aus
 * dots4-1.png (das Bild, das /settings tatsächlich ausliefert): 306 Punkte,
 * zwei Stränge, die sich an den Knoten kreuzen. Jeder
 * Punkt kennt über --t seine Position entlang der Linie (0 = oben, 1 = unten),
 * darum kann ein Impuls der Linienführung folgen statt einfach zu blinken.
 *
 * Fällt auf das PNG zurück, wenn kein SVG vorhanden ist (.dots img bleibt).
 */

.dots-wrapper .dots .yd-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Farben der beiden Varianten: primaer das warme Grau aus dots4-1.png,
   sekundaer (ueber-yolenn) das Blau aus dots3.png. Als Variablen, damit
   die Keyframes fuer beide gelten. */
.dots-wrapper .dots {
  --yd-dot: rgb(145, 139, 134);
  --yd-dot-pulse: rgb(112, 105, 99);
}

.dots-wrapper .dots--secondary {
  --yd-dot: rgb(41, 75, 255);
  --yd-dot-pulse: rgb(24, 52, 206);
}

.dots-wrapper .dots .yd-dot {
  /* Ruhezustand wie bisher; die Gesamtdeckung von 0.8 kommt vom Wrapper. */
  fill: var(--yd-dot);
}

/* ---------- 1. Wandernder Impuls entlang der Linie ----------
   Ein heller Abschnitt läuft von oben nach unten durch. Über die
   negative Verzögerung (--t) startet jeder Punkt an der richtigen
   Stelle im Zyklus, wodurch die Welle der Linienführung folgt. */

@keyframes yd-travel {
  0%,
  74.5% {
    r: 8;
    fill: var(--yd-dot);
  }
  87.3% {
    /* Der Impuls laesst den Punkt kurz wachsen und etwas kraeftiger
       werden - zusammen liest sich das als Wandern der Linie.
       Die Prozente sind auf 11s gerechnet: ein Punkt pulsiert 2.8s,
       der Scheitel liegt nach 1.4s. */
    r: 11;
    fill: var(--yd-dot-pulse);
  }
  100% {
    r: 8;
    fill: var(--yd-dot);
  }
}

.dots-wrapper .dots .yd-dot {
  animation: yd-travel 11s linear infinite;
  animation-delay: calc((1 - var(--t)) * -3.2s - 3.2s);
}

/* Der zweite Strang läuft minimal versetzt, damit sich an den
   Kreuzungen ein leichtes Flirren ergibt statt Gleichschritt. */
.dots-wrapper .dots .yd-strand--b .yd-dot {
  animation-delay: calc((1 - var(--t)) * -3.2s - 4.9s);
}

/* Die rechte Seite läuft von unten nach oben, gespiegelt zur linken. */
.dots-wrapper .dots.right .yd-dot {
  animation-delay: calc(var(--t) * -3.2s - 3.2s);
}

.dots-wrapper .dots.right .yd-strand--b .yd-dot {
  animation-delay: calc(var(--t) * -3.2s - 4.9s);
}

/* ---------- 2. Kein Hover-Effekt ----------
   Eine Hover-Reaktion ueber animation-duration wurde verworfen: sie
   aendert die Dauer eines bereits laufenden Zyklus, wodurch der
   Fortschritt springt (gemessen: 3px Radiussprung binnen 60ms, in
   jeder Phase). Das flackert sichtbar. Stattdessen laeuft der
   Durchlauf dauerhaft in einem mittleren Takt.

   Die Punkte nehmen keinen Zeiger an, damit sie in den Randspalten
   keine Klicks abfangen - .dots-wrapper ist nur 1px hoch, das SVG
   ragt per overflow weit darueber hinaus. */

.dots-wrapper,
.dots-wrapper .dots .yd-svg,
.dots-wrapper .dots .yd-dot {
  pointer-events: none;
}

/* ---------- 3. Reduzierte Bewegung respektieren ---------- */

@media (prefers-reduced-motion: reduce) {
  .dots-wrapper .dots .yd-dot {
    animation: none;
  }
}