Logos Strip

const css = `.lgs { width: 100%; padding-block: var(--ds-section-y, var(--ds-6, 36px));
  background: var(--ds-bg, oklch(0.14 0.02 275));
  font-family: var(--ds-font, system-ui, sans-serif); }
.lgs-cap { margin: 0 0 var(--ds-4, 16px); text-align: center;
  font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: var(--ds-text-xs, 0.75rem); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ds-muted, oklch(0.72 0.02 265)); opacity: 0.75; }

/* contain: inline-size — чтобы ширина ленты не «протекала» наружу: у трека
   width: max-content, и без изоляции родитель в гриде/флексе раздувается
   до суммарной длины всех копий вместо доступной ширины */
.lgs-wrap { overflow: hidden; contain: inline-size;
  border-block: 1px solid var(--ds-border, oklch(0.3 0.02 275));
  padding-block: var(--ds-3, 12px);
  /* края гасим маской: работает на любом фоне, в отличие от градиентной плашки */
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.lgs-track { display: flex; width: max-content; gap: var(--ds-7, 54px);
  padding-left: var(--ds-7, 54px);
  animation: lgs-run var(--dur, 26s) linear infinite; }
.lgs-wrap:hover .lgs-track { animation-play-state: paused; }
.lgs-track span { white-space: nowrap;
  font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: var(--ds-text-sm, 0.86rem); letter-spacing: 0.16em;
  color: var(--ds-muted, oklch(0.72 0.02 265));
  transition: color var(--ds-fast, 0.18s); }
.lgs-track span:hover { color: var(--ds-accent, oklch(0.72 0.16 300)); }
/* трек — ровно две копии, поэтому -50% возвращает его в пиксель-в-пиксель */
@keyframes lgs-run { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) { .lgs-track { animation: none; } }
html[data-shot] .lgs-track { animation: none; }

/* СОКЕТ ФОНА. Слой лежит на z-index -1 внутри своего stacking context: он рисуется
   поверх заливки секции, но под всем содержимым — поэтому контенту не нужно ни
   position, ни z-index, и вёрстка секции не меняется вовсе.
   Тон переопределяет ТОКЕНЫ, а не перечисляет классы: все дети и так читают
   --ds-fg/--ds-muted, значит пара фон+текст чинится в одном месте.
   Скрим обязателен: у живого фона яркость гуляет по кадру, и цвет текста, читаемый
   и на провале, и на вспышке, подобрать нельзя — контраст надо создавать. */
.lgs { position: relative; isolation: isolate; }
.lgs-bg { position: absolute; inset: 0; z-index: -1; }
.lgs[data-slot-bg] { background: transparent; }
.lgs-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.lgs[data-tone="dark"] { --ds-fg: oklch(0.96 0.01 265); --ds-muted: oklch(0.84 0.02 265);
  --ds-border: oklch(0.98 0.01 265 / 0.16); color: var(--ds-fg); }
.lgs[data-tone="dark"] .lgs-bg::after {
  background: oklch(0.09 0.02 265 / calc(var(--lgs-scrim, 0.5) * 0.9)); }
.lgs[data-tone="light"] { --ds-fg: oklch(0.2 0.02 265); --ds-muted: oklch(0.42 0.02 265);
  --ds-border: oklch(0.2 0.02 265 / 0.14); color: var(--ds-fg); }
.lgs[data-tone="light"] .lgs-bg::after {
  background: oklch(0.99 0 0 / calc(var(--lgs-scrim, 0.5) * 0.9)); }
`;
import type { ReactNode } from "react";
export interface LogosStripProps {
  /** Подпись над полосой. */
  caption?: string;
  /** Названия клиентов. */
  items?: string[];
  /** Полный проход ленты, сек. */
  duration?: number;
  /**
   * Сокет фона: любой эффект с `mount.role: "background"`, например `<AuroraField />`.
   * Занят — секция снимает собственную заливку, чтобы не спорить за слой.
   */
  background?: ReactNode;
  /** Какой текст читается поверх фона; приходит из `mount.tone` подставленной записи. */
  tone?: "dark" | "light";
  /** Плотность скрима между фоном и текстом; 0 — выключить. */
  scrim?: number;
}

/**
 * Полоса клиентов бесконечной лентой.
 *
 * Бесшовность держится на одном правиле: контент дублируется ровно дважды, а трек едет
 * на `-50%` своей ширины. В точке возврата вторая копия оказывается пиксель-в-пиксель на
 * месте первой — стыка не существует. Никаких замеров и никакого JS.
 *
 * Края растворяются маской, а не градиентной плашкой поверх: маска работает на любом фоне,
 * плашку пришлось бы перекрашивать под каждую тему.
 */
export function LogosStrip({
  caption = "нам доверяют",
  items = ["NORDWIND", "AXIOM", "KERNEL", "LUMA", "VERTEX", "OKAPI", "SOLARIS"],
  duration = 26,
  background,
  tone,
  scrim = 0.5,
}: LogosStripProps) {
  return (
    <section
      className="lgs"
      data-slot-bg={background ? "" : undefined}
      data-tone={tone} style={{ textAlign: "start", ["--lgs-scrim" as string]: scrim, ["--dur" as string]: `${duration}s` }}
    >
      <style href="motiva-logos-strip" precedence="medium">{css}</style>

      {background && <div className="lgs-bg">{background}</div>}

      {/* data-slot: адрес слота для inline-правки в конструкторе (/build);
          у бегущей строки размечается только ПЕРВАЯ копия — вторая дубль для лупа */}
      {caption && <p className="lgs-cap" data-slot="caption">{caption}</p>}
      <div className="lgs-wrap">
        <div className="lgs-track" aria-hidden>
          {[...items, ...items].map((it, i) => (
            <span key={`${it}-${i}`} data-slot={i < items.length ? "items" : undefined} data-idx={i < items.length ? i : undefined}>
              {it}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}