/**
 * Match Ticker Component Styles (NF-04)
 *
 * Defines the @keyframes animation for newly injected live events.
 * The .ticker-event--new class is applied by JS when a new event is
 * prepended during live polling and triggers a fade-in-slide-down effect.
 */

/**
 * Fade in from above: opacity 0 → 1, slight upward offset → natural position.
 * Duration and easing are controlled by .ticker-event--new below.
 */
@keyframes ticker-fade-in-slide-down {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * Applied by match-ticker.js to newly prepended live events.
 * The animationend listener removes the class to keep the DOM clean.
 */
.ticker-event--new {
  animation: ticker-fade-in-slide-down 0.4s ease-out forwards;
}