/* ============================================================
   Influeri — Logo Marquee (components/logo-marquee.css)
   Seamless, constant-LINEAR horizontal scroll of brand logos.
   Additive layer over styles.css tokens. White-mode; pink→gold accent only.
   The track is duplicated once by logo-marquee.js, so a translateX(0 → -50%)
   keyframe loops gap-free. Pause on hover. Edge fade via CSS mask-image.
   prefers-reduced-motion: freeze + let the row scroll statically.
   ============================================================ */

.logo-marquee {
  --lm-gap: 56px;              /* gap between logos */
  --lm-height: 28px;          /* logo glyph height */
  --lm-duration: 48s;         /* fallback loop time (overridden by JS) */
  position: relative;
  width: 100%;
  overflow: hidden;
  /* edge fade mask on BOTH sides so logos enter/exit softly */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.logo-marquee__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  gap: var(--lm-gap);
  padding-block: 6px;
  padding-inline: 0;
  will-change: transform;
  animation: lm-scroll var(--lm-duration) linear infinite;
}

/* the clone set sits flush after the originals; the gap rule covers the seam */
.logo-marquee__track > img {
  display: block;
  height: var(--lm-height);
  width: auto;
  flex: none;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .62;
  transition: filter var(--dur-base, 300ms), opacity var(--dur-base, 300ms);
}
.logo-marquee__track > img:hover { filter: grayscale(0); opacity: 1; }

/* pause the whole loop while the pointer is over the rail */
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }

/* Move exactly half the duplicated track width so the clone lands where the
   originals started — a seamless, jump-free wrap. */
@keyframes lm-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - var(--lm-gap) / 2), 0, 0); }
}

/* ---- reduced motion: freeze + static scrollable row ---- */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .logo-marquee__track {
    animation: none !important;
    transform: none !important;
  }
}
/* JS-set flag (covers reduce passed in opts even if media query lags) */
.logo-marquee[data-lm-reduce] { overflow-x: auto; }
.logo-marquee[data-lm-reduce] .logo-marquee__track {
  animation: none !important;
  transform: none !important;
}

/* ============================================================
   Minimal tcm chrome for the standalone showcase page only.
   (The full chrome lives in trending-creators.css; this page does NOT load
   that file, so the essentials are re-declared here, scoped under .lm-show.)
   ============================================================ */
.lm-show {
  position: relative;
  min-height: 100vh;
  padding: 0 0 110px;
  background:
    radial-gradient(1100px 520px at 50% -160px, rgba(11, 11, 11, .10), transparent 70%),
    radial-gradient(900px 460px at 92% 4%, rgba(130, 130, 130, .12), transparent 70%),
    #fbfbfc;
}
.lm-show .tcm__wrap { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.lm-show .tcm__head { text-align: center; padding: 84px 0 18px; }
.lm-show .tcm__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(34px, 5vw, 58px); line-height: 1.04; letter-spacing: -.025em; margin: 20px 0 0;
}
.lm-show .tcm__title em {
  font-style: normal; background: #0b0b0b;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lm-show .tcm__sub { max-width: 620px; margin: 16px auto 0; color: var(--text); font-size: 17px; line-height: 1.6; }
.lm-show .tcm__rule { width: 64px; height: 3px; margin: 30px auto 0; border-radius: 3px; background: #0b0b0b; }

.lm-show .tcm-sec { padding: 56px 0 0; }
.lm-show .tcm-eyebrow {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin: 0 0 22px; flex-wrap: wrap;
}
.lm-show .tcm-eyebrow__main { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.lm-show .tcm-eyebrow__no {
  font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: .04em;
  background: #0b0b0b; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lm-show .tcm-eyebrow__txt h2 {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.5vw, 26px);
  letter-spacing: -.015em; margin: 0; line-height: 1.2;
}
.lm-show .tcm-eyebrow__txt p { margin: 4px 0 0; font-size: 13.5px; color: var(--text); }
.lm-show .tcm-tag {
  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, monospace;
  font-size: 11.5px; letter-spacing: .02em; color: var(--primary); white-space: nowrap;
}
.lm-show .tcm-tag b { font-weight: 600; color: var(--text); }

/* surface card behind each marquee demo so the rail reads as a section */
.lm-show .lm-demo {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card, 12px);
  box-shadow: 0 1px 2px rgba(11, 11, 11, .05), 0 12px 28px -16px rgba(11, 11, 11, .18);
  padding: 30px 0;
}
.lm-show .tcm-hint { display: block; margin-top: 12px; font-size: 12.5px; color: var(--text); text-align: center; }
.lm-show .tcm-foot {
  display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 80px; flex-wrap: wrap;
}

/* demo-only size variants used in the showcase eyebrows */
.lm-show .lm--lg .logo-marquee { --lm-height: 40px; --lm-gap: 72px; }
.lm-show .lm--fast .logo-marquee { --lm-duration: 22s; }

@media (max-width: 860px) {
  .lm-show .tcm__wrap { padding: 0 22px; }
}