/* Logo strip (languages and tools). Each design styles it through --c-*. */

.cinta {
  --c-fg: currentColor;
  --c-muted: currentColor;
  --c-line: rgba(127, 127, 127, .25);
  --c-logo: 44px;
  --c-gap: 5.5rem;
  --c-font: ui-monospace, monospace;
  --c-pad: 22px;

  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cinta__fila {
  position: relative;
  overflow: hidden;
  padding: var(--c-pad) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.cinta__fila + .cinta__fila { border-top: 1px solid var(--c-line); }

.cinta__pista {
  display: flex;
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0;
  /* cinta.js computes the duration from the real width, so both rows move at
     the same speed; it stays still until the clones exist (it would jump). */
  animation: cinta var(--bucle-duracion, 30s) linear infinite;
  animation-play-state: paused;
}
.cinta__fila.lista .cinta__pista { animation-play-state: running; }
.cinta__fila.lista:hover .cinta__pista { animation-play-state: paused; }
.cinta__fila--inversa .cinta__pista { animation-direction: reverse; }

@keyframes cinta {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.cinta__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* margin (not gap) so the -50% loop lines up without a jump */
  margin-right: var(--c-gap);
}
.cinta__logo {
  width: var(--c-logo);
  height: var(--c-logo);
  display: grid;
  place-items: center;
}
.cinta__logo img { width: 100%; height: 100%; object-fit: contain; }
.cinta__nombre { font: 400 11px var(--c-font); color: var(--c-muted); white-space: nowrap; }

@media (max-width: 760px) {
  .cinta { --c-gap: 3rem; --c-logo: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .cinta__pista { animation: none; }
}

/* Light mode (html.ligero, comun/preferencias.js): the strip stands still and
   scrolls by hand; the clones only exist for the loop. */
html.ligero .cinta__fila { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
html.ligero .cinta__pista { animation: none; }
html.ligero .cinta__pista > [aria-hidden="true"] { display: none; }