/* Platform Field: scrolling logo bar (Logo Layout = Scrolling bar). Added Oct 31, 2026.
   Standalone because Grunt isn't installed locally; fold into block.scss (scoped under
   .tif-platform-field, breakpoints via media-breakpoint mixins) before it goes to the real site.
   The list is printed twice (second copy aria-hidden), so moving the track by -50% loops seamlessly.
   Spacing between logos is padding on each item, not flex gap, so both halves are exactly equal. */

.tif-platform-field__filters { position: absolute; width: 0; height: 0; overflow: hidden; }

.tif-platform-field__bar { --tif-logo-height: 26px; --tif-logo-space: 32px; }
.tif-platform-field__bar-row { position: relative; }
.tif-platform-field .tif-platform-field__bar-caption { color: var(--tif-text-muted); }

.tif-platform-field__bar-viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.tif-platform-field__bar-track {
    align-items: center;
    animation: tif-logo-bar-scroll var(--tif-logo-loop, 50s) linear infinite;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    width: max-content;
    will-change: transform;
}
.tif-platform-field__bar-viewport:hover .tif-platform-field__bar-track { animation-play-state: paused; }

.tif-platform-field__bar-item {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    height: calc(var(--tif-logo-height) * 1.5);
    margin: 0;
    padding: 0 var(--tif-logo-space);
}

/* One flat tone: the SVG filter makes each logo a solid silhouette in white, then opacity sets the tone. */
.tif-platform-field__bar-logo {
    display: block;
    filter: url(#tif-logo-mono);
    height: calc(var(--tif-logo-height) * var(--tif-logo-scale, 1));
    max-width: none;
    opacity: 0.72;
    width: auto;
}
.tif-platform-field__bar-logo.is-light { filter: brightness(0) invert(1); }

/* White and Light backgrounds: same silhouette, in the dark text tone. */
.tif-platform-field:not(.tif-section-dark) .tif-platform-field__bar-logo { filter: url(#tif-logo-mono) brightness(0); opacity: 0.6; }
.tif-platform-field:not(.tif-section-dark) .tif-platform-field__bar-logo.is-light { filter: brightness(0); }

@keyframes tif-logo-bar-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (max-width: 767.98px) {
    .tif-platform-field__bar { --tif-logo-height: 21px; --tif-logo-space: 22px; }
}

/* Reduced motion: no scrolling. One static, centred row that wraps. */
@media (prefers-reduced-motion: reduce) {
    .tif-platform-field__bar-viewport { -webkit-mask-image: none; mask-image: none; overflow: visible; }
    .tif-platform-field__bar-track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 12px; width: auto; will-change: auto; }
    .tif-platform-field__bar-item.is-clone { display: none; }
}

/* Note under the logo bar: keep it to ~two lines on desktop, centred; wraps naturally on phones. */
.tif-platform-field__bar ~ .row .tif-platform-field__clarification,
.tif-platform-field .tif-platform-field__clarification { max-width: 80ch; margin-left: auto; margin-right: auto; text-wrap: balance; }

/* Nov 2, 2026: one or two cleared logos sit still in a centred row (same layout as reduced motion). */
.tif-platform-field__bar.is-static .tif-platform-field__bar-viewport { -webkit-mask-image: none; mask-image: none; overflow: visible; }
.tif-platform-field__bar.is-static .tif-platform-field__bar-track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 12px; width: auto; will-change: auto; }
.tif-platform-field__bar.is-static .tif-platform-field__bar-item.is-clone { display: none; }

/* Pause / Play (WCAG 2.2.2, Nov 6, 2026). Sits over the right-hand fade of the viewport, centred on the logo row.
   app.js toggles .is-paused on the bar. Hidden where the bar doesn't move (reduced motion, static). */
.tif-platform-field__bar.is-paused .tif-platform-field__bar-track { animation-play-state: paused; }
.tif-platform-field__bar-pause {
    align-items: center; background: var(--tif-surface, #fff); border: 1px solid var(--tif-border-strong, rgba(60, 60, 60, .35)); border-radius: 50%;
    top: 50%; transform: translateY(-50%); color: var(--tif-text, #191919); cursor: pointer; display: inline-flex;
    height: 32px; justify-content: center; padding: 0; position: absolute; right: 0; width: 32px; z-index: 1;
}
.tif-platform-field__bar-pause:hover { border-color: currentColor; }
.tif-platform-field__bar-pause svg { fill: currentColor; }
.tif-platform-field__bar-pause .is-play, .tif-platform-field__bar-pause[data-paused="true"] .is-pause { display: none; }
.tif-platform-field__bar-pause[data-paused="true"] .is-play { display: inline; }
.tif-platform-field__bar.is-static .tif-platform-field__bar-pause { display: none; }
@media (prefers-reduced-motion: reduce) { .tif-platform-field__bar-pause { display: none; } }