/* ============================================
   Doorlopende logobalk (component logo-balk, eigen HTML-widget "fx-reel"): grijs en halfdoorzichtig,
   in kleur bij hover. Duur per ronde via --duur (inline, uit de data).
   ============================================ */
.logo-balk { position: relative; overflow: hidden; padding: 16px 0; }
.logo-balk--schermbreed { width: 100vw; margin-left: calc(50% - 50vw); }
.logo-balk__spoor {
  display: flex; align-items: center; gap: 72px; width: max-content;
  animation: logo-balk var(--duur, 60s) linear infinite;
  will-change: transform;
}
.logo-balk__logo,
.logo-balk__uitsnede img {
  display: block; flex-shrink: 0; width: auto; height: 40px; max-width: 150px;
  object-fit: contain; filter: grayscale(100%); opacity: 0.45;
  transition: filter 0.3s, opacity 0.3s;
}
.logo-balk__logo:hover,
.logo-balk__uitsnede img:hover { filter: grayscale(0%); opacity: 1; }
.logo-balk__logo--invert { filter: invert(1) grayscale(100%); }
.logo-balk__logo--invert:hover { filter: invert(1) grayscale(0%); opacity: 1; }
/* Logo met veel witruimte: 120px hoog in een venster van 50px */
.logo-balk__uitsnede { display: flex; align-items: center; flex-shrink: 0; height: 50px; overflow: hidden; }
.logo-balk__uitsnede img { height: 120px; max-width: none; }
@keyframes logo-balk { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logo-balk__spoor { animation: none; }
}