/* ==========================================================================
   kyb-anim — Sequenzlauf über gleichartige Aufzählungen
   Eine feine Neon-Linie wächst über dem aktiven Eintrag von links auf dessen
   Breite, wandert dann zum nächsten. Endlosschleife, rein CSS.

   Aufbau im Template:
     Behälter : class="kyb-seq kyb-seq--{{ items | length }}"
     Eintrag  : class="kyb-seq__item" style="--i:{{ index }}"   (0-basiert)
     Linie    : <span class="kyb-seq__line" aria-hidden="true"></span>
     Text     : class="kyb-seq__text"  (wird gedimmt, nie der Eintrag selbst —
                sonst scheint der Behälter-Hintergrund durch)

   Die Taktlänge je Eintrag steckt in --kyb-seq-step, die Zahl der Einträge in
   der Klasse kyb-seq--N (2 bis 8). Fällt N heraus, greift keine Animation:
   alles bleibt voll sichtbar. Kein JavaScript.
   ========================================================================== */

.kyb-seq {
  --kyb-seq-step: 3.2s;                                   /* Takt je Eintrag */
  --kyb-seq-dim: .85;                                     /* Deckkraft ruhend */
  --kyb-seq-glow: .55;                                    /* Deckkraft der Linie */
  --kyb-seq-top: -1px;
  --kyb-seq-h: 1px;
}

.kyb-seq__item { position: relative; }

.kyb-seq__line {
  position: absolute;
  left: 0; right: 0;
  top: var(--kyb-seq-top);
  height: var(--kyb-seq-h);
  background: var(--kyb-neon);
  box-shadow: 0 0 5px rgba(15, 255, 155, .25);           /* trägt die Haarlinie */
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
}
/* Linie insgesamt zurücknehmen, ohne die Keyframes anzufassen */
.kyb-seq__line { filter: opacity(var(--kyb-seq-glow)); }

/* Laufzeit und Versatz gelten für Linie und Text gleich. Der Versatz ist
   negativ, damit schon das erste Bild den eingeschwungenen Zustand zeigt:
   Eintrag 0 aktiv, alle übrigen gedimmt. */
.kyb-seq__line,
.kyb-seq__text {
  animation-duration: calc(var(--kyb-seq-n) * var(--kyb-seq-step));
  animation-delay: calc((var(--i, 0) - var(--kyb-seq-n)) * var(--kyb-seq-step));
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.kyb-seq__line { animation-timing-function: cubic-bezier(.45, .05, .35, 1); }
.kyb-seq__text { animation-timing-function: ease; }

/* --- Taktbindung je Anzahl ------------------------------------------------ */
.kyb-seq--2 { --kyb-seq-n: 2 }
.kyb-seq--3 { --kyb-seq-n: 3 }
.kyb-seq--4 { --kyb-seq-n: 4 }
.kyb-seq--5 { --kyb-seq-n: 5 }
.kyb-seq--6 { --kyb-seq-n: 6 }
.kyb-seq--7 { --kyb-seq-n: 7 }
.kyb-seq--8 { --kyb-seq-n: 8 }

.kyb-seq--2 .kyb-seq__line { animation-name: kyb-seq-line-2 }
.kyb-seq--3 .kyb-seq__line { animation-name: kyb-seq-line-3 }
.kyb-seq--4 .kyb-seq__line { animation-name: kyb-seq-line-4 }
.kyb-seq--5 .kyb-seq__line { animation-name: kyb-seq-line-5 }
.kyb-seq--6 .kyb-seq__line { animation-name: kyb-seq-line-6 }
.kyb-seq--7 .kyb-seq__line { animation-name: kyb-seq-line-7 }
.kyb-seq--8 .kyb-seq__line { animation-name: kyb-seq-line-8 }

.kyb-seq--2 .kyb-seq__text { animation-name: kyb-seq-dim-2 }
.kyb-seq--3 .kyb-seq__text { animation-name: kyb-seq-dim-3 }
.kyb-seq--4 .kyb-seq__text { animation-name: kyb-seq-dim-4 }
.kyb-seq--5 .kyb-seq__text { animation-name: kyb-seq-dim-5 }
.kyb-seq--6 .kyb-seq__text { animation-name: kyb-seq-dim-6 }
.kyb-seq--7 .kyb-seq__text { animation-name: kyb-seq-dim-7 }
.kyb-seq--8 .kyb-seq__text { animation-name: kyb-seq-dim-8 }

/* --- Linie: wächst auf, hält kurz, blendet aus ---------------------------- */
/* Prozentwerte = Anteil eines Takts (100/N) am Gesamtdurchlauf. */
@keyframes kyb-seq-line-2 {
  0% { transform: scaleX(0); opacity: 0 } 1.5% { opacity: .85 }
  36% { transform: scaleX(1); opacity: 1 } 44% { opacity: 1 }
  50%, 100% { transform: scaleX(1); opacity: 0 }
}
@keyframes kyb-seq-line-3 {
  0% { transform: scaleX(0); opacity: 0 } 1% { opacity: .85 }
  24% { transform: scaleX(1); opacity: 1 } 29.3% { opacity: 1 }
  33.33%, 100% { transform: scaleX(1); opacity: 0 }
}
@keyframes kyb-seq-line-4 {
  0% { transform: scaleX(0); opacity: 0 } .75% { opacity: .85 }
  18% { transform: scaleX(1); opacity: 1 } 22% { opacity: 1 }
  25%, 100% { transform: scaleX(1); opacity: 0 }
}
@keyframes kyb-seq-line-5 {
  0% { transform: scaleX(0); opacity: 0 } .6% { opacity: .85 }
  14.4% { transform: scaleX(1); opacity: 1 } 17.6% { opacity: 1 }
  20%, 100% { transform: scaleX(1); opacity: 0 }
}
@keyframes kyb-seq-line-6 {
  0% { transform: scaleX(0); opacity: 0 } .5% { opacity: .85 }
  12% { transform: scaleX(1); opacity: 1 } 14.7% { opacity: 1 }
  16.67%, 100% { transform: scaleX(1); opacity: 0 }
}
@keyframes kyb-seq-line-7 {
  0% { transform: scaleX(0); opacity: 0 } .43% { opacity: .85 }
  10.3% { transform: scaleX(1); opacity: 1 } 12.6% { opacity: 1 }
  14.29%, 100% { transform: scaleX(1); opacity: 0 }
}
@keyframes kyb-seq-line-8 {
  0% { transform: scaleX(0); opacity: 0 } .38% { opacity: .85 }
  9% { transform: scaleX(1); opacity: 1 } 11% { opacity: 1 }
  12.5%, 100% { transform: scaleX(1); opacity: 0 }
}

/* --- Text: aktiv voll, sonst leicht gedimmt ------------------------------- */
/* Am Ende des Durchlaufs hellt der Eintrag wieder auf, bevor er dran ist. */
@keyframes kyb-seq-dim-2 {
  0%, 40% { opacity: 1 } 50%, 92% { opacity: var(--kyb-seq-dim) } 100% { opacity: 1 }
}
@keyframes kyb-seq-dim-3 {
  0%, 26.7% { opacity: 1 } 33.33%, 92% { opacity: var(--kyb-seq-dim) } 100% { opacity: 1 }
}
@keyframes kyb-seq-dim-4 {
  0%, 20% { opacity: 1 } 25%, 92% { opacity: var(--kyb-seq-dim) } 100% { opacity: 1 }
}
@keyframes kyb-seq-dim-5 {
  0%, 16% { opacity: 1 } 20%, 92% { opacity: var(--kyb-seq-dim) } 100% { opacity: 1 }
}
@keyframes kyb-seq-dim-6 {
  0%, 13.3% { opacity: 1 } 16.67%, 92% { opacity: var(--kyb-seq-dim) } 100% { opacity: 1 }
}
@keyframes kyb-seq-dim-7 {
  0%, 11.4% { opacity: 1 } 14.29%, 92% { opacity: var(--kyb-seq-dim) } 100% { opacity: 1 }
}
@keyframes kyb-seq-dim-8 {
  0%, 10% { opacity: 1 } 12.5%, 92% { opacity: var(--kyb-seq-dim) } 100% { opacity: 1 }
}

/* --- Anpassung Beweisleiste ---------------------------------------------- */
/* Die große Variante trägt schon eine 2px-Neonkante. Sie wird zurückgenommen,
   damit die laufende Linie darauf überhaupt sichtbar wird. */
.k-proof--gross.kyb-seq:is(.kyb-seq--2, .kyb-seq--3, .kyb-seq--4, .kyb-seq--5,
                           .kyb-seq--6, .kyb-seq--7, .kyb-seq--8) {
  --kyb-seq-top: -2px;
  --kyb-seq-h: 2px;
}
.k-proof--gross.kyb-seq:is(.kyb-seq--2, .kyb-seq--3, .kyb-seq--4, .kyb-seq--5,
                           .kyb-seq--6, .kyb-seq--7, .kyb-seq--8) .k-proof__item {
  border-top-color: var(--kyb-line-strong);
}

/* --- Anpassung Vertrauensleiste ------------------------------------------ */
/* Einträge stehen nebeneinander; die Linie sitzt mittig im Zeilenabstand. */
.k-trust.kyb-seq { --kyb-seq-top: -10px; }

/* --- Bewegung abbestellt -------------------------------------------------- */
/* !important, weil die Taktbindung oben zweistufig selektiert und sonst
   gewinnt — eine Media Query erhöht die Spezifität nicht. */
@media (prefers-reduced-motion: reduce) {
  .kyb-seq .kyb-seq__line { display: none !important }
  .kyb-seq .kyb-seq__text { animation-name: none !important; opacity: 1 !important }
  .k-proof--gross.kyb-seq .k-proof__item { border-top-color: var(--kyb-neon) }
}