/* marquee.css */

.marquee {
  width: 100%;
  overflow: hidden;
  background: #800000;
  white-space: nowrap;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: scroll 30s linear infinite;
  animation-play-state: paused; /* arranca pausada: espera confirmación de fuente */
  font-family: "Comic Neue", "Comic Sans MS", cursive;
  font-size: 24px;
  font-weight: bold;
  color: #FFFF00;
}

/* El script en <head> agrega esta clase al <html> cuando
   document.fonts.load(...) confirma (o descarta) la carga
   de "Comic Neue" bold, y recién ahí arranca la animación. */
.fonts-ready .marquee span {
  animation-play-state: running;
}

@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}