/* ==========================================================================
   Social proof — trust bar under the hero: a centered header and a 2-row
   infinite-scroll marquee of partner logos in full color. Composes
   .section / .section--centered / .section__header from section.css for
   the title+subtext; everything below is specific to this section.
   Blocks: .social-proof, .social-proof__marquee, .social-proof__logo
   ========================================================================== */

.social-proof__label-highlight {
  color: var(--color-apple-green);
}

.social-proof__subtext-highlight {
  color: var(--color-red);
  font-weight: 700;
}

/* --- Logo marquee: 2 rows of partner logos, each scrolling on an infinite
   loop in opposite directions. Full-bleed to the viewport edge
   regardless of the section's own max-width, so the strips read as an
   endless wall rather than a boxed-in carousel.
   The HTML for each track only holds one copy of its logos — too few to
   ever fill a wide screen on their own, which would leave a visible gap
   before the loop repeats. js/social-proof-marquee.js pads each track with
   hidden repeats of the same set until it's at least viewport-wide, then
   duplicates that whole padded "half" once more and sets the animation
   duration from its measured width: translateX(0 -> -50%) then always
   lands on an identical copy, so the loop has no seam and never gaps. */
.social-proof__marquee {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-8) * 1);
  padding-block: var(--space-2);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

/* Giant "30+ ans" watermark sitting behind the scrolling logos. Anchored
   to .social-proof (the section) rather than .social-proof__marquee: the
   marquee is a width:100vw full-bleed box whose edges land asymmetrically
   once nested inside the padded, max-width section, so centering against
   it drifts off the visible middle. The section itself centers via the
   ordinary max-width + margin:auto pattern, so top/left 50% here lines up
   with what's actually on screen.
   Negative z-index keeps it under the (non-positioned, so normally
   painted first anyway) marquee rows; stated explicitly since relying on
   paint order would break the moment either side gains a stacking
   context. */
.social-proof {
  position: relative;
}

.social-proof::before {
  content: "30+ ans";
  position: absolute;
  top: 68%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  font-size: clamp(3rem, 14vw, 11rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--color-red);
  opacity: 0.06;
  pointer-events: none;
}

.social-proof__marquee-row {
  overflow: hidden;
}

.social-proof__marquee-track {
  display: flex;
  align-items: center;
  gap: calc(var(--space-8) * 1.5);
  width: max-content;
  animation: social-proof-marquee-left 60s linear infinite;
  will-change: transform;
  /* GPU-composited 3D transform instead of a 2D one — smoother, less
     prone to sub-pixel jitter over a long-running linear scroll. */
  backface-visibility: hidden;
}

.social-proof__marquee-row--reverse .social-proof__marquee-track {
  animation-name: social-proof-marquee-right;
}

.social-proof__marquee-row:hover .social-proof__marquee-track {
  animation-play-state: paused;
}

@keyframes social-proof-marquee-left {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes social-proof-marquee-right {
  from {
    transform: translate3d(-50%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

.social-proof__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  cursor: pointer;
}

.social-proof__logo img {
  height: 4.25rem;
  width: auto;
  max-width: 13rem;
  object-fit: contain;
  display: block;
}

/* Pulsalys and Conectus' current marks are plain white on a transparent
   background (built for a dark surface) — inverting to black is a stopgap
   so they read on this light strip until proper light-bg assets arrive. */
.social-proof__logo--invert img {
  filter: invert(1);
  opacity: 0.85;
}

/* Hemavision and Kimi Biodesign mix white text with a colored mark, so a
   plain invert would also flip the color (green circle -> pink, teal "kimi"
   -> red). invert + hue-rotate(180deg) is the standard "smart invert" pair:
   it flips white/black the same way but roughly restores the original hue
   on the colored parts instead of complementing it. */
.social-proof__logo--invert-hue img {
  filter: invert(1) hue-rotate(180deg);
}

@media (max-width: 640px) {
  .social-proof__logo img {
    height: 2.75rem;
    max-width: 8.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .social-proof__marquee-track {
    animation: none;
  }
}