/* ==========================================================================
   Emoji Horse Parade Animation
   Pure CSS, fully decorative (aria-hidden on the HTML element)
   Respects prefers-reduced-motion
   ========================================================================== */

.horse-parade {
    overflow: hidden;
    height: 3rem;
    position: relative;
    background: var(--color-bg-alt, #FFF0F3);
    border-bottom: 2px solid var(--color-border, #F0D0DA);
}

.parade-track {
    display: flex;
    gap: 1rem;
    white-space: nowrap;
    font-size: 1.8rem;
    line-height: 3rem;
    animation: parade-scroll 25s linear infinite;
    width: max-content;
}

.parade-track span {
    flex-shrink: 0;
}

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

/* Accessibility: stop animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .parade-track {
        animation: none;
        justify-content: center;
        transform: none;
    }

    .horse-parade {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}