/* A11 Sports — preview · marketing-slideshow
 * CSS do crossfade de logos de parceiros (seção 05 — Marketing).
 * Linkar no <head> onde o componente for usado (index.html).
 * Usa os tokens de tokens.css — não redefine cor local.
 */

.logo-crossfade {
  position: relative;
  width: 100%;
  /* cada slide tem fundo próprio (branco padrão; Coca-Cola vermelho via JS) */
  background: #fff;
  color: var(--ink-on-dark);
  border: 1px solid var(--line);
  overflow: hidden;
}

/* palco do crossfade — proporção estável, sem CLS */
.logo-crossfade__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 260px;
}

.logo-crossfade__slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 72px);
  opacity: 0;
  background: #fff;
  transition: opacity 1.1s var(--ease);
  will-change: opacity;
}

.logo-crossfade__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.logo-crossfade__slide img {
  width: auto;
  max-width: min(420px, 78%);
  max-height: 140px;
  object-fit: contain;
  /* logos coloridas (Sadia, Sebrae, NBA Store) ficam na cor original */
}

/* logos brancas/claras: viram pretas pra contrastar no fundo branco */
.logo-crossfade__slide.is-dark img {
  filter: brightness(0);
}

/* Ken Burns leve — só no slide ativo, só transform */
.logo-crossfade__slide.is-active img {
  animation: lc-kenburns 6s var(--ease) both;
}

@keyframes lc-kenburns {
  from { transform: scale(1.06) translate3d(-1.5%, 1%, 0); }
  to   { transform: scale(1)    translate3d(0, 0, 0); }
}

/* selo discreto tipo tarja mono (coerente com o resto do preview) */
.logo-crossfade::after {
  content: "A11 · PARTNERS";
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .6rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mute);
  mix-blend-mode: difference;
}

/* ---- grade estática (prefers-reduced-motion) ---- */
.logo-crossfade.is-static .logo-crossfade__stage {
  aspect-ratio: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: #e6e6e6; /* linhas e células vazias claras, no tom dos slides brancos */
  min-height: 0;
}

.logo-crossfade.is-static .logo-crossfade__slide {
  position: static;
  inset: auto;
  opacity: 1;
  padding: clamp(20px, 4vw, 40px);
  transition: none;
}

.logo-crossfade.is-static .logo-crossfade__slide img {
  animation: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .logo-crossfade__slide,
  .logo-crossfade__slide.is-active img {
    transition: none;
    animation: none;
  }
}