/*!
 * Cordel — estilos base do carrossel de palavras e do texto colorido.
 * As cores nomeadas (azul, amarelo, coral, lima, roxo, escuro) são as do
 * ecossistema Pangeia Labs, mas qualquer projeto pode redefinir essas
 * variáveis CSS pra usar sua própria paleta.
 */

:root {
  --cordel-azul: #0051ff;
  --cordel-amarelo: #ffd400;
  --cordel-coral: #ff5a5f;
  --cordel-lima: #c6ff3d;
  --cordel-roxo: #7a3bff;
  --cordel-escuro: #161616;
  --cordel-transition: 350ms;
}

.cordel-carousel {
  display: inline-block;
  position: relative;
  overflow: hidden;
  /* text-bottom (não bottom): com overflow:hidden, a baseline de um
     inline-block vira a borda inferior da própria caixa — "bottom" alinha
     essa borda com o fundo da line box inteira (que inclui o "leading"
     extra do line-height), o que empurra a palavra visivelmente pra baixo
     em relação ao resto do texto da linha. "text-bottom" alinha com o
     fundo da fonte do elemento pai, que fica muito mais perto da baseline
     de verdade. */
  vertical-align: text-bottom;
  height: 1.2em;
  min-width: 0.6em;
}

.cordel-carousel-inner {
  display: inline-block;
}

.cordel-cor {
  font-weight: 700;
}

.cordel-cor--azul {
  color: var(--cordel-azul);
}
.cordel-cor--amarelo {
  color: var(--cordel-amarelo);
}
.cordel-cor--coral {
  color: var(--cordel-coral);
}
.cordel-cor--lima {
  color: var(--cordel-lima);
}
.cordel-cor--roxo {
  color: var(--cordel-roxo);
}
.cordel-cor--escuro {
  color: var(--cordel-escuro);
}

@media (prefers-reduced-motion: reduce) {
  .cordel-carousel-inner {
    transition: none !important;
    transform: none !important;
  }
}