/* fx.css · sell/logo-row, client logos arrive one after another · owner: Lizzy East · all rights reserved */

/* A plain list of logos. Unanimated it is simply the row, standing still: nothing
   scrolls past, nothing loops. Each logo is an inline SVG with role="img" and its
   client's name as its label. Still to come with motion allowed, the logos wait
   low and clear, then fade and rise into place one after another, once. The rise
   stays inside each logo's own cell, so nothing below is ever covered, and all
   the timing follows --fx-dur, so a logo reached early arrives at once. */
[data-fx~="sell/logo-row"] {
  --fx-lead: calc(var(--fx-delay) + var(--fx-i) * var(--fx-stagger));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  align-items: center;
  gap: var(--fx-logo-gap, 1.25rem 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
[data-fx~="sell/logo-row"] > li {
  display: grid;
  place-items: center;
  min-height: 4.5rem;
  padding-block: 0.5rem;
  color: var(--fx-logo-ink, #4a4f5e);
}
[data-fx~="sell/logo-row"] > li > svg { display: block; width: 100%; max-width: 11rem; height: auto; }

/* Each logo's place in the row, for the stagger (a row of up to twelve). */
[data-fx~="sell/logo-row"] > li:nth-child(2) > svg { --fx-i: 1; }
[data-fx~="sell/logo-row"] > li:nth-child(3) > svg { --fx-i: 2; }
[data-fx~="sell/logo-row"] > li:nth-child(4) > svg { --fx-i: 3; }
[data-fx~="sell/logo-row"] > li:nth-child(5) > svg { --fx-i: 4; }
[data-fx~="sell/logo-row"] > li:nth-child(6) > svg { --fx-i: 5; }
[data-fx~="sell/logo-row"] > li:nth-child(7) > svg { --fx-i: 6; }
[data-fx~="sell/logo-row"] > li:nth-child(8) > svg { --fx-i: 7; }
[data-fx~="sell/logo-row"] > li:nth-child(9) > svg { --fx-i: 8; }
[data-fx~="sell/logo-row"] > li:nth-child(10) > svg { --fx-i: 9; }
[data-fx~="sell/logo-row"] > li:nth-child(11) > svg { --fx-i: 10; }
[data-fx~="sell/logo-row"] > li:nth-child(12) > svg { --fx-i: 11; }

html.fx-armed [data-fx~="sell/logo-row"].is-pending > li > svg {
  opacity: 0;
  translate: 0 var(--fx-logo-rise, 0.75rem);
}
html.fx-armed [data-fx~="sell/logo-row"].is-in > li > svg {
  transition: opacity var(--fx-dur) var(--fx-ease), translate var(--fx-dur) var(--fx-ease);
  transition-delay: calc(var(--fx-lead, 0ms) + var(--fx-i) * var(--fx-logo-stagger, calc(var(--fx-dur) * 0.16)));
}