/* SiloV · Trust band: the client logos directly under the hero.
   Motion: Infinite Slider by Motion Primitives, ported to vanilla JS in
   assets/trust-band.js (attribution and every changed value: assets/TRUST-BAND-SOURCE.md).
   Look: the 7Ovr Logo Cloud edge mask, Harmonic style hairlines above and below
   the band, quiet monochrome logos that light up in colour on hover.
   The section sits on the hero floor colour, so the hero dissolves into it and
   no hairline is drawn between the two; the next section keeps its own hairline. */

#trust.trust-band{
  --trust-ground:#f7f4ff;                       /* the hero floor colour, see hero-layers.css */
  --trust-gap:clamp(64px, 8vw, 168px);          /* wide gaps: about four logos share the strip at a time */
  --trust-logo:clamp(40px, 2.5vw, 48px);       /* larger optical base, retaining the per-logo balance */
  --trust-duration:65s;                         /* CSS fallback only; JS reads data-duration */
  --trust-hairline:var(--line-strong, #DDD2FB);
  background:var(--trust-ground);
  border-top:0;
  padding-block:clamp(6px, 1.4vw, 18px) clamp(48px, 5.2vw, 76px);
  isolation:isolate;
}

/* Atmosphere: one far halo plane, moved by hero-layers.js through data-parallax.
   The bed fades at its top and bottom so the moving halo never shows a clipped edge. */
.trust-bed{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
.trust-halo{
  position:absolute; inset-inline:0; margin-inline:auto;
  top:50%; margin-top:-170px; width:min(1280px, 88%); height:340px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(167,139,250,.18), rgba(167,139,250,.06) 55%, transparent 100%);
  filter:blur(28px);
  will-change:transform;                        /* transform is written per scroll frame, never transitioned */
}

/* Caption: the existing label, centred and quiet, inside the container. */
.trust-band .sec-head.trust-head{
  align-items:center; text-align:center; max-width:none;
  margin:0 auto clamp(18px, 2.2vw, 28px);
}
.trust-band .trust-head .label{
  color:var(--dim); font-size:.86rem; font-weight:500;
  letter-spacing:.06em; text-transform:none;
}

/* Reveal without JS: visible by default; browsers with scroll driven animations fade the
   caption and the band in as they enter the viewport (the same rise as the site's .reveal). */
.trust-reveal{opacity:1}
@supports (animation-timeline: view()){
  .trust-reveal{
    animation:trust-in linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 70%;
  }
  .trust-reveal.trust-reveal-late{animation-range:entry 10% entry 85%}
}
@keyframes trust-in{from{opacity:0; transform:translate3d(0,26px,0)} to{opacity:1; transform:none}}

/* The strip spans the content width, and the wide gap between logos keeps it to about four
   logos at a time. The loop keeps turning, so every client still gets its turn. */
.trust-strip{
  position:relative; z-index:1;
  width:min(100% - 2 * var(--pad-x), 1180px); margin-inline:auto;
  padding-block:clamp(18px, 2vw, 26px);
}
.trust-strip::before,
.trust-strip::after{
  content:""; position:absolute; inset-inline:0; height:1px; pointer-events:none;
  background:linear-gradient(to right, transparent, var(--trust-hairline) 12%, var(--trust-hairline) 88%, transparent);
}
.trust-strip::before{top:0}
.trust-strip::after{bottom:0}

/* Infinite Slider: overflow hidden viewport, a max content flex track, translated by JS. */
.trust-slider{
  width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.trust-slider-track{
  display:flex; width:max-content;
  will-change:transform;
  /* No JS fallback only: the markup holds three sets, one third of the track is one set.
     trust-band.js removes this the moment it takes over with requestAnimationFrame. */
  animation:trust-fallback var(--trust-duration) linear infinite;
}
.trust-slider.is-live .trust-slider-track{animation:none}
.trust-slider[data-reverse] .trust-slider-track{animation-direction:reverse}
@keyframes trust-fallback{from{transform:translateX(0)} to{transform:translateX(calc(100% / 3))}}

/* One set: the gap between logos, and the same gap once more as trailing padding,
   so a set's box is exactly one loop distance (the source's size plus gap). */
.trust-set{
  display:flex; align-items:center; flex:0 0 auto;
  gap:var(--trust-gap); padding:0; padding-inline-end:var(--trust-gap);
  margin:0; list-style:none;
}
.trust-set li{display:flex; align-items:center; flex:0 0 auto}
/* Optical height: the base height, nudged by the per logo balance already encoded in --logo-h
   (a square mark a little taller than a wide word mark). Monochrome at rest, colour on hover. */
.trust-set img{
  display:block; width:auto;
  height:calc(var(--trust-logo) + (var(--logo-h, 60px) - 60px) * .35);
  filter:grayscale(1); opacity:.6;
  transition:opacity .25s ease-out, filter .25s ease-out;
}
.trust-set li:hover img{filter:none; opacity:1}

@media (max-width:1024px){
  #trust.trust-band{--trust-gap:clamp(44px, 5vw, 64px)}
}
@media (max-width:640px){
  #trust.trust-band{--trust-logo:36px}
  .trust-band .trust-head .label{font-size:.8rem}
  .trust-strip{padding-block:16px}
}

/* Reduced motion and the site's motion toggle: no loop, no mask, no clones;
   the visible set wraps into centred rows inside the container. */
@media (prefers-reduced-motion:reduce){
  .trust-halo{transform:none !important}
  .trust-reveal{animation:none; opacity:1; transform:none}
  .trust-slider{
    -webkit-mask-image:none; mask-image:none;
    max-width:var(--container); margin-inline:auto; padding-inline:var(--pad-x);
  }
  .trust-slider-track{animation:none; transform:none !important; display:block; width:auto}
  .trust-set{flex-wrap:wrap; justify-content:center; row-gap:22px; padding-inline-end:0}
  .trust-set[aria-hidden="true"]{display:none}
}
html.a11y-nomotion .trust-halo{transform:none !important}
html.a11y-nomotion .trust-reveal{animation:none !important; opacity:1 !important; transform:none !important}
html.a11y-nomotion .trust-slider{
  -webkit-mask-image:none; mask-image:none;
  max-width:var(--container); margin-inline:auto; padding-inline:var(--pad-x);
}
html.a11y-nomotion .trust-slider-track{animation:none; transform:none !important; display:block; width:auto}
html.a11y-nomotion .trust-set{flex-wrap:wrap; justify-content:center; row-gap:22px; padding-inline-end:0}
html.a11y-nomotion .trust-set[aria-hidden="true"]{display:none}