/* ==========================================================================
   Mechanica — vertical client-name TextReel (motion layer only)
   Scope: #trust-band.spotlight-trust .spotlight-trust__reel
   Pairs with: /scripts/client-logo-text-reel.js
   Docs: dev/client-logo-text-reel.md

   The 'Trusted by' kicker sits above a tall clipped stream of client names.
   Every name is a live link to that client's site. The permanent Ulysse Nardin
   spotlight is styled separately in client-spotlight.css.

   Rules:
   - No boxes, borders, rules, gradients or decoration: type, crop, spacing.
   - Overflow is clipped to this viewport. Nothing here may grow the page.
   - Duplicate copies are visual wrap only (data-reel-clone).
   - The first copy is the real accessible list; clones are inert for AT.
   - prefers-reduced-motion / no JS: the clipped list stays static and every
     name link still works.
   ========================================================================== */

#trust-band.spotlight-trust .spotlight-trust__reel {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  padding: 0;
}

#trust-band.spotlight-trust .spotlight-trust__reel-viewport {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  height: clamp(64px, 11vw, 112px);
  overflow: hidden;
  overflow-x: clip;
  contain: layout paint;
}

#trust-band.spotlight-trust .spotlight-trust__reel-track {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  will-change: transform;
}

#trust-band.spotlight-trust .spotlight-trust__reel-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#trust-band.spotlight-trust .spotlight-trust__reel-name {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  font-size: clamp(22px, 3.2vw, 40px) !important;
  font-weight: 300;
  line-height: 1.28;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

#trust-band.spotlight-trust .spotlight-trust__reel-link,
#trust-band.spotlight-trust .spotlight-trust__reel-link:visited {
  color: #f4ebe1;
  text-decoration: none;
  /* 44px minimum touch target on every client name */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-right: 0.25em;
}

#trust-band.spotlight-trust .spotlight-trust__reel-link:hover {
  color: var(--accent, #d9743f);
}

#trust-band.spotlight-trust .spotlight-trust__reel-link:focus-visible {
  outline: 2px solid #f4ebe1;
  outline-offset: 4px;
  border-radius: 2px;
}

/* cloned wrap copies are visual only — inert for pointer and AT */
#trust-band.spotlight-trust .spotlight-trust__reel-copy[data-reel-clone] .spotlight-trust__reel-link {
  pointer-events: none;
}

#trust-band.spotlight-trust[data-reel-state="streaming"] .spotlight-trust__reel-track {
  backface-visibility: hidden;
}

@media (max-width: 640px) {
  #trust-band.spotlight-trust .spotlight-trust__reel-viewport {
    height: 64px;
  }

  #trust-band.spotlight-trust .spotlight-trust__reel-name {
    font-size: 22px !important;
  }
}

@media (max-width: 360px) {
  #trust-band.spotlight-trust .spotlight-trust__reel-viewport {
    height: 56px;
  }

  #trust-band.spotlight-trust .spotlight-trust__reel-name {
    font-size: 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #trust-band.spotlight-trust .spotlight-trust__reel-track {
    transform: none !important;
    will-change: auto;
  }
}