/* ── Logo wall (Figma: node 3596-197628) ── */

/* As tall as its logos: the space below belongs to the greetings' centering spacers
   (header.css), so the greetings center against the logos the eye actually sees. */
.logo-wall {
  width: 100%;
  padding: 0 48px;
  overflow: hidden;
  flex-shrink: 0;
}

.logo-wall__track {
  display: inline-flex;
  align-items: center;
  gap: 88px;
  width: max-content;
  animation: logo-marquee 120s linear infinite;
  /* Runs by default (no paused) — unlike title which requires hover */
}

@keyframes logo-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-33.333%, 0, 0);
  }
}

.logo-wall__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: var(--logo-filter);
  opacity: 0.4;
  transition: opacity 0.2s ease, filter 0.2s ease;
  text-decoration: none;
}

.logo-wall__item:hover {
  opacity: 1;
}

.logo-wall__icon {
  position: relative;
  display: block;
  height: 44px;
  width: auto;
  max-width: 180px;
  overflow: hidden;
}

.logo-wall__icon-image {
  position: absolute;
  max-width: none;
  object-fit: none;
}

/* Responsive ── */

@media (max-width: 900px) {
  .logo-wall {
    padding: 0 24px;
  }

  .logo-wall__track {
    gap: 68px;
  }

  .logo-wall__icon {
    height: 36px;
    max-width: 150px;
  }
}

@media (max-width: 600px) {
  .logo-wall {
    padding: 0 20px 0;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }

  /* Mobile: ensure at least 2 logos visible — size so 2 fit in viewport */
  .logo-wall__track {
    gap: 56px;
  }

  .logo-wall__icon {
    height: 28px;
    max-width: min(120px, calc((100vw - 40px - 44px) / 2));
  }
}

/* ── Per-logo crop (each SVG is a 293x162 Figma frame; show only the logo) ── */

.logo--microsoft { aspect-ratio: 100 / 21.87; }
.logo--microsoft .logo-wall__icon-image { width: 293%; height: 740.741%; left: -97.0001%; top: -320.37%; }
.logo--perplexity { aspect-ratio: 111 / 22.6493; }
.logo--perplexity .logo-wall__icon-image { width: 263.964%; height: 719.669%; left: -81.9822%; top: -309.458%; }
.logo--google-ventures { aspect-ratio: 40 / 22.8039; }
.logo--google-ventures .logo-wall__icon-image { width: 732.5%; height: 710.405%; left: -317.5%; top: -304.314%; }
.logo--roblox { aspect-ratio: 90 / 16.52; }
.logo--roblox .logo-wall__icon-image { width: 325.556%; height: 980.63%; left: -113.333%; top: -438.862%; }
.logo--riot-games { aspect-ratio: 88 / 24.64; }
.logo--riot-games .logo-wall__icon-image { width: 332.955%; height: 661.526%; left: -117.045%; top: -284.091%; }
.logo--red-bull { aspect-ratio: 109 / 21.9832; }
.logo--red-bull .logo-wall__icon-image { width: 268.807%; height: 741.475%; left: -84.4037%; top: -322.974%; }