Logo Cloud Hover Blur

<section class="ws-logo-cloud bg-[var(--ws-logo-cloud-bg)] py-14">
  <div class="mx-auto max-w-7xl px-6">
    <p class="text-center text-sm font-medium text-[var(--ws-logo-cloud-text-muted)]">Deployed in production at</p>

    <div class="group relative mt-8 overflow-hidden">
      <!-- Fade edges -->
      <div class="pointer-events-none absolute inset-y-0 left-0 z-10 w-20 bg-gradient-to-r from-[var(--ws-logo-cloud-bg)]"></div>
      <div class="pointer-events-none absolute inset-y-0 right-0 z-10 w-20 bg-gradient-to-l from-[var(--ws-logo-cloud-bg)]"></div>

      <!-- Hover tooltip -->
      <a href="#customers" class="pointer-events-none absolute inset-0 z-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:pointer-events-auto group-hover:opacity-100">
        <span class="flex items-center gap-2 rounded-full bg-[var(--ws-logo-cloud-text-muted)] px-4 py-2 text-xs font-semibold text-[var(--ws-logo-cloud-bg)] shadow-lg">
          Meet our customers
          <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/></svg>
        </span>
      </a>

      <!-- Ticker track -->
      <div class="flex w-max animate-[scroll_30s_linear_infinite] items-center gap-16 [&>*]:transition-[filter,opacity] [&>*]:duration-300 group-hover:[&>*]:blur-[3px] group-hover:[&>*]:opacity-40 group-hover:[&>*]:hover:blur-0 group-hover:[&>*]:hover:opacity-100">
        <span class="shrink-0 text-lg font-bold tracking-tight text-[var(--ws-logo-cloud-text-muted)]">Airbus</span>
        <span class="shrink-0 text-lg font-bold tracking-tight text-[var(--ws-logo-cloud-text-muted)]">HSBC</span>
        <span class="shrink-0 text-lg font-bold tracking-tight text-[var(--ws-logo-cloud-text-muted)]">IBM</span>
        <span class="shrink-0 text-lg font-bold tracking-tight text-[var(--ws-logo-cloud-text-muted)]">Orange</span>
        <span class="shrink-0 text-lg font-bold tracking-tight text-[var(--ws-logo-cloud-text-muted)]">ASML</span>
        <span class="shrink-0 text-lg font-bold tracking-tight text-[var(--ws-logo-cloud-text-muted)]">AXA</span>
        <span class="shrink-0 text-lg font-bold tracking-tight text-[var(--ws-logo-cloud-text-muted)]">Stellantis</span>
        <span class="shrink-0 text-lg font-bold tracking-tight text-[var(--ws-logo-cloud-text-muted)]">BNP Paribas</span>
        <!-- Duplicate for seamless loop -->
        <span class="shrink-0 text-lg font-bold tracking-tight text-[var(--ws-logo-cloud-text-muted)]">Airbus</span>
        <span class="shrink-0 text-lg font-bold tracking-tight text-[var(--ws-logo-cloud-text-muted)]">HSBC</span>
        <span class="shrink-0 text-lg font-bold tracking-tight text-[var(--ws-logo-cloud-text-muted)]">IBM</span>
        <span class="shrink-0 text-lg font-bold tracking-tight text-[var(--ws-logo-cloud-text-muted)]">Orange</span>
        <span class="shrink-0 text-lg font-bold tracking-tight text-[var(--ws-logo-cloud-text-muted)]">ASML</span>
        <span class="shrink-0 text-lg font-bold tracking-tight text-[var(--ws-logo-cloud-text-muted)]">AXA</span>
        <span class="shrink-0 text-lg font-bold tracking-tight text-[var(--ws-logo-cloud-text-muted)]">Stellantis</span>
        <span class="shrink-0 text-lg font-bold tracking-tight text-[var(--ws-logo-cloud-text-muted)]">BNP Paribas</span>
      </div>
    </div>
  </div>
</section>

<style>
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .animate-\[scroll_30s_linear_infinite\] {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
  }
}
</style>