/* Gasyco – Logo-Laufband (Aufgabe 1.26, anforderungen/startseite.md § kunden)
   Bewegungsteil des Moduls logo-laufband (inc/logo-laufband.php): Reihen und Spur erzeugt assets/js/logo-laufband.js.
   Maße, Farben, Takt und die statischen Fassungen stehen in den globalen Klassen logo-laufband* (tools/komponenten-1.26.py). */

/* Laufband-Modus: Reihen untereinander statt Raster */
.logo-laufband.logo-laufband--bewegt {
  display: flex;
  flex-direction: column;
  gap: var(--laufband-reihen-abstand);
  justify-content: flex-start;
  overflow: visible;
}

/* Reihe: Ränder 8 % ausgeblendet (Maske) */
.logo-laufband__reihe {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

/* Spur: Basis + Kopie, Verschiebung 0 ↔ −50 %; Dauer = Takt je Zelle × Zellen der Basis × Tempo-Faktor */
.logo-laufband__spur {
  display: flex;
  width: max-content;
  animation: logo-laufband-links calc(var(--laufband-takt, 5s) * var(--laufband-anzahl, 10) * var(--laufband-takt-faktor, 1)) linear infinite;
  will-change: transform;
}
.logo-laufband__reihe--rueckwaerts .logo-laufband__spur {
  animation-name: logo-laufband-rechts;
}
/* Abstand als Außenabstand je Zelle (nicht gap), damit −50 % genau eine Basislänge ist */
.logo-laufband__spur > .logo-laufband__zelle {
  margin-right: var(--laufband-abstand);
}

/* Pause: Zeiger über der Reihe (nur echte Hover-Geräte), außerhalb des Bildschirms (JS) */
@media (hover: hover) {
  .logo-laufband__reihe:hover .logo-laufband__spur {
    animation-play-state: paused;
  }
}
.logo-laufband--pausiert .logo-laufband__spur {
  animation-play-state: paused;
}

@keyframes logo-laufband-links {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@keyframes logo-laufband-rechts {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

/* Reduzierte Bewegung: das Skript baut die Reihen zurück; falls es noch läuft, steht die Spur still */
@media (prefers-reduced-motion: reduce) {
  .logo-laufband__spur {
    animation: none;
  }
}