/**
 * KSM Wave — globale, wiederverwendbare animierte Welle
 *
 * Markup wird vom PHP-Helper ksm_wave() erzeugt (echtes Inline-SVG).
 * Alles per CSS-Variable anpassbar:
 *   --ksm-wave-color   → Farbe (Triplet, currentColor → stroke)
 *   --ksm-wave-height  → Höhe (skaliert die Wellen-Amplitude)
 *   --ksm-wave-stroke  → Linienbreite (px, dank non-scaling-stroke gleichmäßig)
 *   --ksm-wave-speed   → Tempo eines Durchlaufs
 *
 * Endlosschleife: das SVG ist viele Zyklen breit; die Zeile wird per CSS um
 * EINE Wellenlänge (80px) verschoben → nahtloser Loop, viewport-unabhängig.
 */

.ksm-wave {
    --ksm-wave-color:  var(--ksm-color-accent);
    --ksm-wave-height: calc(var(--ksm-spacing-base) * 2.5);
    --ksm-wave-stroke: 6px;
    --ksm-wave-speed:  5s;

    position: relative;
    width: 100%;
    height: var(--ksm-wave-height);
    overflow: hidden;
    pointer-events: none;
    color: rgba(var(--ksm-wave-color), 1);   /* Quelle für currentColor */
    line-height: 0;
}

.ksm-wave__svg {
    display: block;
    height: 100%;          /* Breite kommt aus dem width-Attribut (viele Zyklen) */
}

.ksm-wave__path {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--ksm-wave-stroke);
    stroke-linecap: round;
}

.ksm-wave__row {
    animation: ksm-wave-scroll var(--ksm-wave-speed) linear infinite;
}

/* genau eine Wellenlänge (80px) → nahtlos */
@keyframes ksm-wave-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-80px); }
}

@media (prefers-reduced-motion: reduce) {
    .ksm-wave__row {
        animation: none;
    }
}