/* ==========================================================================
   Workflow Studio — showreel
   logos.css
   The "currently used by" strip: a marquee of studio marks under the pitch.
   ========================================================================== */

/* --- Section --------------------------------------------------------------- */

.logos {
  padding: 44px 0;
}

.logos-label {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 26px;
}

/* --- Marquee viewport ------------------------------------------------------
   The fade is a mask rather than two gradient overlays: overlays would have to
   be painted in the section's background colour, and this strip sits on the
   backdrop graph, which is not a flat colour.
   -------------------------------------------------------------------------- */

.logo-marquee {
  overflow: hidden;
  /* Full width, not the container: a marquee that stops short of the edge
     reads as a clipped list rather than as something passing through. */
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 96px,
    #000 calc(100% - 96px),
    transparent
  );
}

.logo-track {
  display: flex;
  /* max-content, so the two rows are measured at their natural width and the
     -50% below lands exactly on the start of the copy. */
  width: max-content;
  animation: logo-scroll 80s linear infinite;
}

/* Paused under the pointer so a mark can actually be read. */
.logo-marquee:hover .logo-track {
  animation-play-state: paused;
}

@keyframes logo-scroll {
  /* -50% is one full row: the track holds the row twice, so the jump back to 0
     lands on an identical frame. Changing the number of rows breaks this.
     Two copies are only enough while a row is wider than the screen — sixteen
     marks put it past 3000px. Drop marks and the travel outruns the track,
     which opens a gap on the right; add copies and this number moves with it. */
  to {
    transform: translateX(-50%);
  }
}

.logo-row {
  display: flex;
  align-items: center;
  gap: 64px;
  padding-right: 64px;
  margin: 0;
  list-style: none;
}

/* --- One logo -------------------------------------------------------------- */

.logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  /* The marks are flat white PNGs, so opacity alone dims them — there is no
     currentColor left to transition now that the names live in the alt text. */
  opacity: 0.45;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.logo img {
  height: 46px;
  width: auto;
  flex: 0 0 auto;
}

/* A row of marks that agree optically beats a row that agrees on a number, so
   the two shapes that fight the default height get their own.

   Stacked marks — Alfa Romeo, Citroën, DS, Maserati, Opel — spend their height
   on an emblem sitting above a wordmark, or on a ring of type around a badge.
   At the height a plain wordmark wants, that second element lands near 6px and
   stops being readable, so they are set taller. */
.logo-stacked img {
  height: 68px;
}

/* Wide marks — Dacia, Lancia — are long, low wordmarks close to ten times as
   wide as they are tall. Matched on height they run past 400px and swallow the
   row; matched on width they read as the same size as everything else. */
.logo-wide img {
  height: 32px;
}

/* --- Picking one mark out of the row ---------------------------------------
   Hovering the strip already stops the travel; this is what the stop is for.
   The whole track drops back so the row reads as a held breath, and the mark
   under the pointer comes up to full — the emphasis is carried by the contrast
   between the two, not by the hovered mark alone, which is why the siblings
   dim rather than the target simply brightening.

   Gated on a real pointer: `:hover` sticks after a tap, and on touch the strip
   would stay dimmed around whichever mark was last touched with no way to
   clear it. The gate is a capability, not a breakpoint, so it belongs to the
   component rather than to responsive.css.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .logo-marquee:hover .logo {
    opacity: 0.18;
  }

  /* Same specificity as the rule above (0,3,0), so this one only wins by
     coming after it. Keep the order. */
  .logo-marquee .logo:hover {
    opacity: 1;
    transform: scale(1.08);
  }
}

/* The strip is one long line of marks; a motion-averse visitor gets the same
   marks as a static wrapped row, with no travel at all. */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee {
    mask-image: none;
  }

  .logo-track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }

  .logo-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 48px;
    padding-right: 0;
  }

  /* The three copies exist only to make the loop seamless. */
  .logo-row[aria-hidden='true'] {
    display: none;
  }

  /* The dimming is a state change and survives; the growth is travel and does
     not. Losing it costs nothing — the contrast was doing the work. */
  .logo {
    transition: opacity 0.25s ease;
  }

  .logo-marquee .logo:hover {
    transform: none;
  }
}