/* PromoPrint · franja de marcas (debajo del hero). Usa los tokens de hero.css. */

.brands {
  position: relative;
  background: var(--ink);
  /* Sin borde ni relleno superior amplio: la franja arranca dentro de la oscuridad con
     la que termina el hero, como si emergiera de ella. */
  padding: clamp(40px, 4.4vw, 60px) 0 clamp(64px, 7.5vw, 104px);
  --logo-scale: 1.65;
  --logo-gap: 88px;
  --logo-tone: 0.64;   /* más contraste que la referencia, sin competir con el hero */
}

.brands__title {
  margin: 0 0 clamp(28px, 3.6vw, 40px);
  padding-inline: 20px;
  text-align: center;
  font: 600 12.5px/1.4 var(--font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--paper-rgb) / 0.62);
}

.brands__viewport {
  position: relative;
  overflow: hidden;
  /* Desvanecimiento lateral con curva suave: los logos aparecen y se van sin borde. */
  --fade: linear-gradient(90deg,
    transparent 0%, rgba(0, 0, 0, 0.06) 3%, rgba(0, 0, 0, 0.24) 6%, rgba(0, 0, 0, 0.5) 9%,
    rgba(0, 0, 0, 0.76) 12%, rgba(0, 0, 0, 0.94) 15%, #000 18%,
    #000 82%, rgba(0, 0, 0, 0.94) 85%, rgba(0, 0, 0, 0.76) 88%, rgba(0, 0, 0, 0.5) 91%,
    rgba(0, 0, 0, 0.24) 94%, rgba(0, 0, 0, 0.06) 97%, transparent 100%);
  -webkit-mask-image: var(--fade);
          mask-image: var(--fade);
}

.brands__track {
  display: flex;
  width: max-content;
  animation: brands-scroll var(--duration, 80s) linear infinite;
  will-change: transform;
}
.brands.is-offscreen .brands__track { animation-play-state: paused; }
@media (hover: hover) {
  /* Con ratón, detenerse sobre la franja la pausa para leer una marca. */
  .brands__viewport:hover .brands__track { animation-play-state: paused; }
}

@keyframes brands-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--shift, 0px)), 0, 0); }
}

.brands__group {
  display: flex;
  flex: none;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* El espacio va DENTRO de cada juego (margen derecho) para que el juego sea periódico.
   La fila es más alta que el logo más alto (Chivo Pets): el viewport recorta lo que sobresale. */
.brands__item {
  flex: none;
  display: flex;
  align-items: center;
  height: 112px;
  margin-right: var(--logo-gap);
}

.brands__item img {
  display: block;
  height: calc(var(--h) * var(--logo-scale) * 1px);
  width: calc(var(--w) * var(--logo-scale) * 1px);
  opacity: var(--logo-tone);
  user-select: none;
  -webkit-user-drag: none;
}

@media (max-width: 600px) {
  .brands { --logo-scale: 1.3; --logo-gap: 52px; padding-top: 44px; padding-bottom: 72px; }
  .brands__item { height: 92px; }
  .brands__viewport {
    --fade: linear-gradient(90deg,
      transparent 0%, rgba(0, 0, 0, 0.3) 4%, rgba(0, 0, 0, 0.75) 8%, #000 12%,
      #000 88%, rgba(0, 0, 0, 0.75) 92%, rgba(0, 0, 0, 0.3) 96%, transparent 100%);
  }
}

/* Entrada progresiva (la activa brands.js al verse la franja por primera vez):
   primero la frase, luego la fila de logos, sin rebote. */
.brands.js-reveal .brands__title {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.brands.js-reveal .brands__viewport {
  opacity: 0;
  transition: opacity 1300ms cubic-bezier(0.4, 0, 0.2, 1) 180ms;
}
.brands.js-reveal.is-revealed .brands__title { opacity: 1; transform: none; }
.brands.js-reveal.is-revealed .brands__viewport { opacity: 1; }

/* Movimiento reducido: sin desplazamiento; los logos se muestran quietos y centrados. */
.brands.is-static .brands__viewport { -webkit-mask-image: none; mask-image: none; }
.brands.is-static .brands__track {
  animation: none;
  width: auto;
  justify-content: center;
  padding-inline: 20px;
}
.brands.is-static .brands__group {
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--logo-gap);
  row-gap: 8px;
}
.brands.is-static .brands__item { margin-right: 0; }

@media (prefers-reduced-motion: reduce) {
  .brands__track { animation: none; }
  .brands.js-reveal .brands__title { transform: none; transition-duration: 300ms; }
  .brands.js-reveal .brands__viewport { transition-duration: 300ms; transition-delay: 0ms; }
}