/* Logo row: a small mono label over a centred, wrapping row of monochrome logos. Each logo is an alpha
   mask (foundations/imagery/logos/) painted in the theme's ink: subtle white at night, ink by day. */

.logo-row {
  /* Height of a square logo of median ink coverage; every logo is this × its optical --scale. */
  --logo-unit: clamp(34px, 3.9vw, 56px);
  --logo-opacity: 0.5;
  --logo-opacity-hover: 0.95;
  display: grid;
  justify-items: center;
  gap: var(--space-6);
  text-align: center;
}

.logo-row__label {
  color: var(--ink-muted);
}

.logo-row__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(var(--space-5), 2.8vw, var(--space-6)) clamp(var(--space-5), 3.4vw, var(--space-7));
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.logo-row__item {
  display: flex;
}

/* The box sizes the logo and takes hover and focus; the mark inside paints it. Keeping the mask on the
   inner element leaves the focus ring of linked logos unclipped. */
.logo-row__logo {
  position: relative;
  display: block;
  height: calc(var(--logo-unit) * var(--scale, 0.5));
  aspect-ratio: var(--aspect, 3);
  color: inherit;
}
.logo-row__mark {
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: var(--logo-opacity);
  -webkit-mask: var(--mask) center / contain no-repeat;
  mask: var(--mask) center / contain no-repeat;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.logo-row__logo:hover .logo-row__mark,
.logo-row__logo:focus-visible .logo-row__mark {
  opacity: var(--logo-opacity-hover);
}
a.logo-row__logo:focus-visible {
  outline-offset: 8px;
}

/* ── Reveal: once, staggered, when the row scrolls into view. --logo-row-delay offsets a whole row.
   The fill mode is backwards, so no blur or transform lingers on the logos once they have landed. ── */

@media (prefers-reduced-motion: no-preference) {
  .logo-row:not(.is-visible) :is(.logo-row__label, .logo-row__item) {
    opacity: 0;
  }
  .logo-row.is-visible .logo-row__label {
    animation: logo-row-in 900ms var(--ease-out-expo) var(--logo-row-delay, 0ms) backwards;
  }
  .logo-row.is-visible .logo-row__item {
    animation: logo-row-in 1000ms var(--ease-out-expo) backwards;
    animation-delay: calc(var(--logo-row-delay, 0ms) + 120ms + var(--i, 0) * 70ms);
  }
}
@keyframes logo-row-in {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(10px);
  }
}