/**
 * Melanin Stories — assets/css/components/ticker.css
 * Bandeau défilant lent, boucle CSS pure (pas de JS). Se met en
 * pause au survol/focus pour la lisibilité.
 */

.ms-ticker {
  background: var(--ms-ink);
  color: #FFFFFF;
  overflow: hidden;
  padding: 14px 0;
  position: relative;
}

/* Dégradés aux bords pour un fondu propre, pas de coupure nette */
.ms-ticker::before,
.ms-ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.ms-ticker::before {
  left: 0;
  background: linear-gradient(90deg, var(--ms-ink), transparent);
}
.ms-ticker::after {
  right: 0;
  background: linear-gradient(270deg, var(--ms-ink), transparent);
}

.ms-ticker__track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  /* Vitesse volontairement lente ("bandeau défilant lent" demandé) */
  animation: ms-ticker-scroll 70s linear infinite;
}

.ms-ticker:hover .ms-ticker__track,
.ms-ticker:focus-within .ms-ticker__track {
  animation-play-state: paused;
}

.ms-ticker__item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ms-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 0 34px;
  border-right: 1px solid rgba(250, 244, 230, 0.25);
}

.ms-ticker__tag {
  color: var(--ms-gold);
  text-transform: uppercase;
  font-weight: 500;
}

/* La liste étant dupliquée une fois en PHP, on ne fait défiler que
   la moitié du track pour une boucle parfaitement continue. */
@keyframes ms-ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   MOBILE / TABLETTE — texte légèrement réduit, on garde la même
   mécanique (pas besoin de repenser le composant, juste la densité).
   ========================================================================== */
@media (max-width: 780px) {
  .ms-ticker__item {
    font-size: 11px;
    padding: 0 22px;
    gap: 10px;
  }
  .ms-ticker::before,
  .ms-ticker::after {
    width: 32px;
  }
}

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