/*
 * Bilderband — der Stil des Bandes im Frontend.
 *
 * WARUM EINE DATEI UND KEIN <style>-BAUSTEIN IM TEMPLATE
 *
 * Der erste Wurf schrieb den Stil als <style> aus dem Template, nach dem
 * Muster von VersandschwelleSettings::stilbaustein(). Gemessen an einem
 * laufenden Shop 5.8.0 kommt er dort aber nicht an:
 *
 *     getFinalHtml()    12142 Zeichen, <style> vorhanden: ja
 *     getPreviewHtml()  11788 Zeichen, <style> vorhanden: NEIN
 *
 * PortletInstance::getPreviewHtml() schickt die Ausgabe durch DOMDocument
 * und wirft das <style>-Element weg. Im OPC-Editor stand das Band damit
 * ohne jedes Layout da — Logos in Originalgrösse, keine Überlaufbegrenzung.
 *
 * Der Shop hat für genau das einen eingebauten Weg (OPC\PortletStyles):
 * Er lädt `<Klasse>.css` fürs Frontend und `preview.css` für den Editor,
 * wenn die Dateien im Portlet-Verzeichnis liegen. Deshalb tun sie das —
 * so machen es ImageSlider und ManufacturerSlider auch.
 *
 * Hier stehen nur die STATISCHEN Regeln. Was von der einzelnen Instanz
 * abhängt — Dauer und Höhe als CSS-Variablen, die drei Zustandsklassen —
 * setzt die Portlet-Klasse ans äussere Element; in einer Datei, die sich
 * alle Bänder einer Seite teilen, hätte es nichts zu suchen.
 */

.em-band {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/*
 * Die Spur besteht aus zwei zeichengleichen Hälften und wandert um -50 %.
 * Am Ende steht die zweite Hälfte genau dort, wo die erste begann — der
 * Sprung zurück ist unsichtbar.
 */
.em-band-lauf {
    display: flex;
    width: max-content;
    animation: em-band-zug var(--em-band-dauer, 30s) linear infinite;
}

.em-band-satz {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Der Abstand hängt am Element, nicht als `gap` am Behälter: Ein `gap`
 * zwischen den beiden Hälften würde die -50 % verschieben. So trägt auch
 * das letzte Logo einer Hälfte seinen Abstand, und die Naht sieht aus wie
 * jede andere Lücke.
 */
.em-band-satz > li {
    flex: 0 0 auto;
    margin-right: 3rem;
}

.em-band-satz img {
    display: block;
    width: auto;
    max-width: none;
    height: var(--em-band-hoehe, 48px);
}

@keyframes em-band-zug {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.em-band--rueckwaerts .em-band-lauf {
    animation-direction: reverse;
}

.em-band--pause:hover .em-band-lauf {
    animation-play-state: paused;
}

/*
 * Die Farbe kehrt fürs GANZE Band zurück, nicht je Logo: Bei einem
 * laufenden Band träfe der Mauszeiger sonst mal das eine, mal das nächste
 * Bild, und die Farbe flackerte.
 */
.em-band--grau .em-band-satz img {
    filter: grayscale(1);
    transition: filter .3s ease;
}

.em-band--grau:hover .em-band-satz img {
    filter: none;
}

/*
 * Stillstand auf Ansage. Im OPC-Editor setzt das Portlet diese Klasse —
 * dort greift allerdings die preview.css, die ohnehin alles anhält. Die
 * Regel bleibt trotzdem hier und nicht doppelt: preview.css holt sich
 * diese Datei per @import.
 */
.em-band--still .em-band-lauf {
    animation: none;
}

/*
 * Für einen Teil der Besucher ist das der Unterschied zwischen benutzbar
 * und unbenutzbar.
 */
@media (prefers-reduced-motion: reduce) {
    .em-band .em-band-lauf {
        animation: none;
    }
}